值得记录的（一）
簡要記錄維護?
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) returnvar 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 = falseisToStart = falseif(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) returnvar 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 = falseisToEnd = falseif(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 = 1var timer = setInterval(function() {console.log(restHelper );if(restHelper == 3600){alert('已經閱讀一小時咯！請休息片刻喲。')clearInterval(timer)timeCount()}}, 1000); }
更多專業前端知識，請上 【猿2048】www.mk2048.com
總結
- 上一篇： js文件处理File
- 下一篇： jQuery 打气球小游戏 点击气球爆炸