3.4 针对于页面美观，命名

Posted 2020-06-18 miaomiao8899

1、放在主页面的js代码<script>....</script>，移动到其余的js文件中,在js文件中可以添加函数，让其执行即可，可以美化html页面

<script type="text/javascript">
        var myScroll1;
        function loaded() {
            myScroll1= new iScroll(‘wrapper‘, {
              mouseWheel: true, 
              click: true,
              snap:"li",
              hScrollbar:false,
              hScroll:false,
              onBeforeScrollStart:function(){
                  $(".scr1-top").css("opacity","0.5");
                  $(".scr1-bottom").css("opacity","0.5");
                  $(".time img:first").attr(‘src‘,"images/set-time.png");
                },
              onBeforeScrollEnd:function(){
                  $(".scr1-top").css("opacity","1");
                  $(".scr1-bottom").css("opacity","1");
                  $(".time img:first").attr(‘src‘,"images/time-save.png");
                }
    });
        }
        document.addEventListener(‘DOMContentLoaded‘, function () { setTimeout(loaded, 200); }, false);
        var myScroll2;
        function fengsu() {
            myScroll2 = new iScroll(‘wrapper2‘, {
              mouseWheel: true, 
              click: true,
              snap:"li",
              hScrollbar:false,
              hScroll:false,
              onBeforeScrollStart:function(){
                  $(".scr2-top").css("opacity","0.5");
                  $(".scr2-bottom").css("opacity","0.5");
                  $(".time img:last").attr(‘src‘,"images/set-time.png");
                },
              onBeforeScrollEnd:function(){
                  $(".scr2-top").css("opacity","1");
                  $(".scr2-bottom").css("opacity","1");
                    $(".time img:last").attr(‘src‘,"images/time-save.png");
                }
    });
        }
        document.addEventListener(‘DOMContentLoaded‘, function () { setTimeout(fengsu, 200); }, false);

</script>

就可以放在js文件中，一这样形式进行运行

 var myScrolltime, myScrollwind;
    function loaded() {
        myScrolltime = new iScroll(‘set-time‘, {
            snap: "li",
            hScroll: false,
            onBeforeScrollStart: function() {
                $(".scroll-top-a, .scroll-bottom-a").css("opacity", "0.5");
                $(".set-time-wind img:first").attr(‘src‘, "images/set-time.png");
            },
            onBeforeScrollEnd: function() {
                $(".scroll-top-a, .scroll-bottom-a").css("opacity", "1");
                $(".set-time-wind img:first").attr(‘src‘, "images/time-save.png");
            }
        });
        myScrollwind = new iScroll(‘set-wind‘, {
            snap: "li",
            hScroll: false,
            onBeforeScrollStart: function() {
                $(".scroll-top-b, .scroll-bottom-b").css("opacity", "0.5");
                $(".set-time-wind img:last").attr(‘src‘, "images/set-time.png");
            },
            onBeforeScrollEnd: function() {
                $(".scroll-top-b, .scroll-bottom-b").css("opacity", "1");
                $(".set-time-wind img:last").attr(‘src‘, "images/time-save.png");
            }
        });
    }
 loaded(); 

2、页面命名尽量一看就能看懂，可以利用百度翻译、谷歌翻译等进行命名，要有语义性，

    空格多一些，可以让js代码看起来更舒服一些