值得记录的 （一）
2018-10-24 本文已影响1人
passMaker
简要记录维护 jQuery 项目相关需求实现的细节，方便日后回顾。
样式相关
flex 布局
justify-content: flex-start; 和 justify-content: center;
flex-wrap: wrap; 换行
cursor: pointer; 手型的使用
jQuery 左右移动 animate
使用 jQuery 实现左右按钮移动效果 - 类似于 FM 音乐播放器项目的动画实现
var num
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(!(parseFloat($('.content_new').width()) > parseFloat($('.items_new').css('width')) * num)){
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')) * <?=(int)$newNum?>) { // 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预览
代码
<!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小时，请休息片刻）
timeCount()
function timeCount(){
var restHelper = 1
var timer = setInterval(function() {
console.log(restHelper++);
if(restHelper == 3600){
alert('已经阅读一小时咯！请休息片刻哟。')
clearInterval(timer)
timeCount()
}
}, 1000);
}
