简要记录维护 jQuery 项目相关需求实现的细节，方便日后回顾。样式相关flex 布局justify-content: flex-start; 和 justify-content: center;flex-wrap: wrap; 换行cursor: po ...
简要记录维护 jQuery 项目相关需求实现的细节，方便日后回顾。
样式相关
flex 布局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='/images/loading.gif' data-original="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script></head><body> <div > <div > <input type="text" id="keywords" placeholder="随便输入查看效果，默认5条"> <span > <button id="search" type="button">Go!</button> </span> </div><!-- /input-group --> </div><!-- /.col-lg-6 --> </div><!-- /.row --> <br><br> <div > <span>搜索历史</span> <span id="empty">清除历史</span> </div> <div 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);}
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com
原标题：值得记录的 （一）
关键词：
*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：
admin#shaoqun.com
（#换成@）。
