值得记录的 （一）
程序员文章站
2022-04-04 21:40:43
简要记录维护 jQuery 项目相关需求实现的细节，方便日后回顾。 样式相关 flex 布局justify-content: flex-start; 和 justify-content: center;flex-wrap: wrap; 换行cursor: pointer; 手型的使用 jQuery ......
简要记录维护 jquery 项目相关需求实现的细节，方便日后回顾。
样式相关
flex 布局justify-content: flex-start; 和 justify-content: center;flex-wrap: wrap; 换行cursor: pointer; 手型的使用
jquery 左右移动 animate
使用 jquery 实现左右按钮移动效果 - 类似于 fm 音乐播放器项目的动画实现
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预览
代码
<!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);
}
上一篇： Requests爬虫
下一篇： 小姐多少钱上一次