day12
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 的插件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
|
/** * 轮播图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); |
