12
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);