标签 笔试题 下的文章

[ JS笔试题 ] 统计字符串中出现次数最多的字符和次数

要求如下:

通过JS统计字符串中出现次数最多的字符和次数

Javascript

// 统计字符串中出现次数最多的字符和次数
function str_count(str){
    var oldStr,
        getStr,
        MaxTimes=0,
        CountResult = [];

    while (str != ""){ //作为循环条件,判断字符串是否为空
        oldStr = str;   
        getStr = str.substr(0,1); //截取当前字符串中第一个字符
        str = str.replace(new RegExp(getStr,"g"),""); //利用正则表达式匹配所有该字符并替换为空

        if(oldStr.length - str.length == MaxTimes){ //若该字符出现次数等于MaxTimes,Push进数组
            CountResult.push(getStr + ":" + MaxTimes + "次");
        }

        if(oldStr.length - str.length > MaxTimes){  //若该字符出现次数超过MaxTimes,重新赋值
            CountResult = [];
            MaxTimes = oldStr.length-str.length;
            CountResult.push(getStr + ":" + MaxTimes + "次");
        }
    
    }
    console.log(CountResult);
}

测试如下:

str_count("aa"); // a:2次

str_count("aabbb"); // b:3次

当然,同时有两个字符出现次数相等均为最大时,也可以正常运算

str_count("aabbbccc") // b:3次, c:3次

[ CSS笔试题 ] 设计可伸缩的分栏布局

要求如下:

  1. 设计三栏布局,实现可伸缩性
  2. 中间栏宽度为100%
  3. 左栏和右栏固定宽度为100px

解一:

HTML

<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>

CSS

.left,.middle,.right{position:absolute;z-index:2;height:100px;}
.left{left:0;width:100px;background:green;}
.middle{z-index:1;width:100%;background:orange;}
.right{right:0;width:100px;background:green;}

Read More »

[ CSS笔试题 ] 设计无外边框的九宫格模型

要求如下:

  1. 实现九宫格,每个格子是边长为100px的正方形
  2. 内边框为2px;
  3. 无外边框

解一:

最简单粗暴的方法,创建9个DIV,采取绝对定位,然后将外侧的边框颜色设为透明

为书写简便,公共属性写在 grid 类中

HTML

<body>
<div class="grid a"></div>
<div class="grid b"></div>
<div class="grid c"></div>
<div class="grid d"></div>
<div class="grid e"></div>
<div class="grid f"></div>
<div class="grid g"></div>
<div class="grid h"></div>
<div class="grid i"></div>
</body>

CSS

.grid{position: absolute;width: 100px;height: 100px;border:1px solid black;}
.a{top:0;left: 0;border-top-color:transparent; border-left-color:transparent; }
.b{top:0;left: 102px;border-top-color:transparent; }
.c{top:0;left: 204px;border-top-color:transparent; border-right-color:transparent; }
.d{top: 102px;left: 0;border-left-color:transparent;}
.e{top: 102px;left: 102px;}
.f{top: 102px;left: 204px;border-right-color:transparent;}
.g{top:204px;left: 0;border-left-color:transparent;border-bottom-color:transparent;}
.h{top:204px;left: 102px;border-bottom-color:transparent;}
.i{top:204px;left: 204px;border-right-color:transparent;border-bottom-color:transparent;}

Read More »