值得記錄的（一）

evenyao發表於2018-10-24

簡要記錄維護 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);
}

　　

相關文章