值得记录的 (一)

本系列取名为 值得记录的,不定期会进行更新记录。主要是用来记录在工作接触到的项目相关。本文为第一篇,也是真正成为前端工程师之后的第一个按照产品和测试提出的需求与bug给项目增加功能与消除bug的维护。此文简要记录维护 jQuery 项目相关需求实现的细节,方便日后回顾。

样式相关

flex 布局
justify-content: flex-start;justify-content: center;
flex-wrap: wrap; 换行


cursor: pointer; 手型的使用


jQuery 左右移动 animate

使用 jQuery 实现左右按钮移动效果 - 类似于 FM 音乐播放器项目 的动画实现

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
var isAnimate = false   //判断是否在动画之中
var isToStart = true //判断是否在最起始位置
var isToEnd = false //判断是否到底

$(".right_button").on("click",function(){
if(isAnimate) return
var itemWidth = $('.items_new').outerWidth(true) //每个小容器的真实宽度
var rowCount = parseInt($('.content_new').width()/itemWidth) //可视窗口 除以 itemWidth 得到可视窗口能看到的整数个数

if(!isToEnd){
isAnimate = true
$('.items_new').animate({
left: '-=' + rowCount * itemWidth
},400, function(){
isAnimate = false
isToStart = false
if(parseFloat($('.content_new').width()) - parseFloat($('.items_new').css('left')) >= parseFloat($('.items_new').css('width')) * <?=Yii::$app->params['bookShow']['newBookNum']?>) { // newBookNum 对应 params.php 文件设置书本数量
isToEnd = true
}
})
}
})

$(".left_button").on("click",function(){
if(isAnimate) return
var itemWidth = $('.items_new').outerWidth(true)
var rowCount = parseInt($('.content_new').width()/itemWidth)

if(!isToStart){
isAnimate = true
$('.items_new').animate({
left: '+=' + rowCount * itemWidth
},400, function(){
isAnimate = false
isToEnd = false
if(parseFloat(($('.items_new').css('left'))) >= 0){
isToStart = true
}
})
}
})


localStorage 实现搜索功能

用 localStorage 实现搜索历史功能,点击可跳转相应页面
Demo预览

代码

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
147
148
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<title>搜索历史----localstorage本地化存储</title>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>

</head>
<body>
<div class="col-lg-6" style="margin-top:20px;">
<div class="input-group">
<input type="text" class="form-control" id="keywords" placeholder="随便输入查看效果,默认5条">
<span class="input-group-btn">
<button class="btn btn-default" id="search" type="button">Go!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->

<br><br>
<div style="margin:20px 20px 0px 20px;">
<span>搜索历史</span>
<span id="empty">清除历史</span>
</div>
<div style="margin:20px;" id="history">

</div>
</body>
<script type="text/javascript">
$(function(){
update_history();
// 绑定回车事件
$(document).keydown(function(event){
if(event.keyCode==13){
$("#search").click();
}
});

// 搜索点击事件
$("#search").click(function(){
var keywords = $("#keywords").val();
history(keywords); //添加到缓存
update_history(); //更新搜索历史
})

// 清空搜索历史
$("#empty").click(function(){
mystorage.remove('keywords');
$("#history").html(" ");
})
})

/**
* [update_history 更新搜索历史]
*/
function update_history(){
console.log(mystorage.get("keywords"));
var history = mystorage.get("keywords");
if (history) {
var html = "";
$.each(history,function(i,v){
html += "<a class='history_link btn btn-default' style='margin: 5px;' href='javascript:;' role='button'>"+v+"</a>"
})
$("#history").html(html);
};
}


/**
* [history //搜索历史函数存储]
*/
function history(value){
var data = mystorage.get("keywords");
if (!data) {
var data = []; //定义一个空数组
}else if(data.length === 5){ //搜索历史数量
data.shift(); //删除数组第一个元素有
}else{

};
if (value) { //判断搜索词是否为空
if (data.indexOf(value)<0) { //判断搜索词是否存在数组中
data.push(value); //搜索词添加到数组中
mystorage.set("keywords",data); //存储到本地化存储中
};
};
}

/**
* [mystorage 存储localstorage时候最好是封装一个自己的键值,在这个值里存储自己的内容对象,封装一个方法针对自己对象进行操作。避免冲突也会在开发中更方便。]
*/
var mystorage = (function mystorage(){
var ms = "mystorage";
var storage=window.localStorage;
if(!window.localStorage){
alert("浏览器不支持localstorage");
return false;
}
var set = function(key,value){
//存储
var mydata = storage.getItem(ms);
if(!mydata){
this.init();
mydata = storage.getItem(ms);
}
mydata = JSON.parse(mydata);
mydata.data[key] = value;
storage.setItem(ms,JSON.stringify(mydata));
return mydata.data;
};
var get = function(key){
//读取
var mydata = storage.getItem(ms);
if(!mydata){
return false;
}
mydata = JSON.parse(mydata);
return mydata.data[key];
};
var remove = function(key){
//读取
var mydata = storage.getItem(ms);
if(!mydata){
return false;
}
mydata = JSON.parse(mydata);
delete mydata.data[key];
storage.setItem(ms,JSON.stringify(mydata));
return mydata.data;
};
var clear = function(){
//清除对象
storage.removeItem(ms);
};
var init = function(){
storage.setItem(ms,'{"data":{}}');
};
return {
set : set,
get : get,
remove : remove,
init : init,
clear : clear
};
})();
</script>
</html>


计时器温馨提示

温馨提示功能(例:已耗时用眼1小时,请休息片刻)

1
2
3
4
5
6
7
8
9
10
11
12
13
timeCount()

function timeCount(){
var restHelper = 1
var timer = setInterval(function() {
console.log(restHelper++);
if(restHelper == 3600){
alert('已经阅读一小时咯!请休息片刻哟。')
clearInterval(timer)
timeCount()
}
}, 1000);
}

本文结束  感谢您的阅读
0%