1- var str = “hgDzGHjhcxghvcgxzhjzcgjhxzgcjhgsduyfuys”将字符串中出现次数最多的字母弹框输出;
var str = 'hgDzGHjhcxghvcgxzhjzcgjhxzgcjhgsduyfuys'; var result = maxN(str); function maxN(str) { var json = {}; //定义一个json对象用于保存str的每一项以及出现次数。 for (var i = 0; i < str.length; i++) { //遍历str,循环其中的每一个字符，将某个字符的值及出现的个数拿出来作为json的key和value if (!json[str.charAt(i)]) {//判断json中是否有当前str的值 //如果不存在 就将当前值添加到json中去，并设置1 json[str.charAt(i)] = 1; } else { //如果存在的话就让数组中已有的当前值的value值++； json[str.charAt(i)]++; } } //存储出现次数最多的值和次数 var number = ''; var num = 0; //遍历json 使用打擂算法统计需要的值 for (var j in json) { //如果当前项大于下一项 if (json[j] > num) { //就让当前值更改为出现最多次数的值 num = json[j]; number = j; } } return { number: number, num: num } } alert('该字符串出现' + result.num + '次的' + result.number);
2- 举例实现对象的深拷贝;
深拷贝: 复制,把一个对象中的属性或者方法复制到另外的对象中
var obj1 = { age: 18, sex: "男", hobby: ['赛车', '打球', '滑雪'], dog: { name: '小白', weight: 10, color: '白' } } var obj2 = {} // 通过函数,把a中的属性复制到b function copy(a, b) { // 先获取a中的属性 for (var key in a) { var items = a[key]; // 判断items是不是数组 if (items instanceof Array) { // 如果是数组,b中要添加新属性,这个属性也是数组形式 b[key] = [] // 遍历数组,把a[key]一个一个复制到b[key]中 copy(items, b[key]) // 判断items是不是对象 } else if (items instanceof Object) { b[key] = {} } else { // 普通数据,直接复制 b[key] = items } } } copy(obj1, obj2) console.dir(obj1) console.dir(obj2)
3-举例实现对象方法的继承
function Parent(firstname) { this.fname=firstname; this.age=40; this.sayAge=function() { console.log(this.age); } } function Child(firstname) { this.parent=Parent; this.parent(firstname); delete this.parent; this.saySomeThing=function() { console.log(this.fname); this.sayAge(); } } var mychild=new Child("李"); mychild.saySomeThing();
4-写一个左中右布满全屏，其中左右固定宽度 200px，中间部分自适应，要求先加载中间部 分，写出结构和样式
<style> html, body { margin: 0; width: 100%; } #leftDiv, #rightDiv { width: 200px; height: 200px; position: absolute; top: 0; } #leftDiv { background: #16A05D; left: 0; } #rightDiv { background: #DC5044; right: 0; } #centerDiv { background: #FFCD41; height: 200px; } </style> </head> <body> <div id="leftDiv">左边div</div> <div id="centerDiv">中间div</div> <div id="rightDiv">右边div</div> </body>
5- 封装一个 jqery 的插件
/**
* 轮播图jquery插件 *
* 要求将被渲染为轮播图的div的id名为slider
* 调用方式为$('#slider').sliderImg(imgs);
* 其中imgs是图片数组，每一个数组元素为图片的路径名
* 样式需引入slider.css, 默认图片大小为520*280px,
*/
(function ($) {
function Slider(options) {
this.wrapper = options.wrapper;
this.timer = null;
this.nowIndex = 0;
this.itemWidth = parseInt(this.wrapper.css('width'));
this.itemNum = imgs.length;
this.locked = false;
this.imgs = options;
this.init();
}
Slider.prototype.init = function () {
this.createDom();
this.bindEvent();
this.automove();
},
Slider.prototype.createDom = function () {
var imgBox = $('<ul class="img-box"></ul>');
var imgLi = '';
var orderListStr = ''
for (var i = 0; i < this.itemNum; i++) {
imgLi += '<li><a href="javascript:void(0)">
<img src="'+ this.imgs[i] + '" alt="">
</a></li>';
orderListStr += '<li></li>'
}
imgLi += '<li><a href="javascript:void(0)">
<img src="'+ this.imgs[0] + '" alt="">
</a></li>';
var btnDiv = '<div class="btn">
<a class="prev"><span></span></a>
<a class="next"><span></span></a>
</div>';
var orderBox = $('<div class="order"></div>');
var orderUl = $('<ul></ul>');
$(this.wrapper).append(imgBox.html(imgLi))
.append($(btnDiv))
.append(orderBox.append(orderUl.html(orderListStr)));
$('#slider .order li').eq(0).addClass('active');
};
/**
* 绑定事件
*/
Slider.prototype.bindEvent = function() {
var self = this;
$('#slider .order li').add('.next').add('.prev').on('click', function () {
var className = $(this).attr('class')
if (className == 'prev') {
self.move('prev');
} else if (className == 'next') {
self.move('next');
} else {
self.move($(this).index())
}
})
$('#slider')
.on('mouseenter', function () {
$('#slider .btn').show();
clearTimeout(self.timer);
})
.on('mouseleave', function () {
$('#slider .btn').hide();
self.automove();
})
}
/**
* 定时调用移动函数，轮播下一张图片
*/
Slider.prototype.automove = function() {
clearInterval(this.timer)
var self = this;
this.timer = setTimeout(function () {
self.move('next');
}, 2000);
}
/**
* 根据方向，更改index，更改后的Index表示我想到哪一张去
* @param {*} dir 方向
*/
Slider.prototype.move = function(dir) {
if (this.locked) {
return;
}
this.locked = true;
if (dir == 'prev' || dir == 'next') {
if (dir == 'next') {
if (this.nowIndex == this.itemNum) {
this.nowIndex = 0;
$('#slider .img-box').css('left', 0);
}
this.nowIndex++;
} else {
if (this.nowIndex == 0) {
this.nowIndex = this.itemNum;
$('#slider .img-box').css('left', -(this.itemNum * this.itemWidth) + 'px');
}
this.nowIndex--;
}
} else {
this.nowIndex = dir;
}
//先改变索引样式，再滑动
this.changeStyle();
this.slider();
}
/**
* 移动到nowindex指向元素的位置
*/
Slider.prototype.slider = function() {
var self = this;
//这个animate必须写成对象形式
$('#slider .img-box').animate({ left: -(self.nowIndex * self.itemWidth) + 'px' }, function () {
self.automove();
self.locked = false;
})
}
/**
* 修改索引的样式
*/
Slider.prototype.changeStyle = function() {
$('#slider .order .active').removeClass('active');
if (this.nowIndex == this.itemNum) { //处理多出来一个轮播页的关键！！！
//这个时候是展示的多出来的那一张，其实是第0张
$('#slider .order li').eq(0).addClass('active');
} else {
$('#slider .order li').eq(this.nowIndex).addClass('active');
}
}
//添加自定义jq插件
$.fn.extend({
sliderImg: function (options) {
options.wrapper = this || $('body');
new Slider(options);
}
})
})(jQuery);