javascript6

Posted 2020-09-27 左耳_fly

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript6相关的知识，希望对你有一定的参考价值。

定时器

setInterval(函数,毫秒)  ------> 重复执行

setTimeout(函数,毫秒); ------> 执行一次

<script type="text/javascript">
     window.onload=function(){
            var timer=null;
            i=0;
            function fn1(){
                document.title=i;
                i++;
                if(i>=11){
                    clearInterval(timer);
                }
            }
            timer=setInterval(fn1,50);
      }
</script>

定时器切换背景例子

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>定时器切换背景</title>
        <script type="text/javascript">
            window.onload=function(){
                var oInput=document.getElementsByTagName(‘input‘);
                var oBody=document.body;
                var timer=null;
                var num=0;
                var arrImg=[‘img/1.png‘,‘img/2.png‘,‘img/3.png‘,‘img/4.png‘];
                
                oInput[0].onclick=function(){
                    clearInterval(timer);
                    timer=setInterval(function(){
                        oBody.style.background=‘url(‘+arrImg[num]+‘)‘;
                        num++;
                        num%=arrImg.length;
                    },1000);
                }
                oInput[1].onclick=function(){
                    clearInterval(timer);
                }
            }
        </script>
    </head>
    <body>
        <input type="button" value="更换背景"/>
        <input type="button" value="停止"/>
    </body>
</html>

View Code

图片切换的例子加一个自动切换功能

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            body{
                background-color: #333;
            }
            ul,p{
                padding:0;
                margin:0;
            }
            li{
                list-style: none;
            }
            #pic{
                width: 400px;
                height:500px;
                position: relative;
                margin:0 auto;
                background: url(img/loader_ico.gif) center center no-repeat;
            }
            #pic img{
                width:400px;
                height: 500px;
            }
            #pic ul{
                width:40px;
                position:absolute;
                top:0;
                right:-50px;
            }
            #pic li{
                width:40px;
                height:40px;
                margin-bottom: 4px;
                background-color: #666;
            }
            #pic .active{
                background-color: #fc3;
            }
            #pic p,
            #pic span{
                width:400px;
                height:30px;
                line-height: 30px;
                text-align: center;
                color:#fff;
                position: absolute;
                background-color: #333;
            }
            #pic p{
                bottom:0;
            }
            #pic span{
                top:0;
            }
        </style>
        <script type="text/javascript">
            window.onload=function(){
                var oPic=document.getElementById(‘pic‘);
                var oImg=oPic.getElementsByTagName(‘img‘)[0];
                var oSpan=oPic.getElementsByTagName(‘span‘)[0];
                var oP=oPic.getElementsByTagName(‘p‘)[0];
                var oUl=oPic.getElementsByTagName(‘ul‘)[0];
                var aLi=oUl.getElementsByTagName(‘li‘);
                var arrUrl=[‘img/1.png‘,‘img/2.png‘,‘img/3.png‘,‘img/4.png‘];
                var arrText=[‘小宠物‘,‘图片二‘,‘图片三‘,‘面具‘];
                var num=0;
                var oldLi=null;
                
                for(var i=0;i<arrUrl.length;i++){
                    oUl.innerHTML+=‘<li></li>‘;
                }
                oldLi=aLi[num];
                //初始化
                fTab();
                function fTab(){
                    oImg.src=arrUrl[num];
                    oSpan.innerHTML=num+1+‘/‘+arrUrl.length;
                    oP.innerHTML=arrText[num];
                    
                    for( var i=0; i<aLi.length; i++ ){
                        aLi[i].className = ‘‘;
                    }
                    aLi[num].className = ‘active‘;
                }
                
                for(var i=0;i<aLi.length;i++){
                    aLi[i].index=i;
                    aLi[i].onclick=function(){
                        num=this.index;
                        fTab();
                    }
                }
                
                /**********************/
                
                var timer=null;
                function autoPlay(){
                    timer=setInterval(function(){
                        num++;
                        num%=arrText.length;
                        fTab();
                    },1000);
                }
                autoPlay();
                oPic.onmouseover=function(){
                    clearInterval(timer);
                }
                oPic.onmouseout=autoPlay;
                
                /**********************/
                
            }
        </script>
    </head>
    <body>
        <div id="pic">
            <img src="" alt="" />
            <span>数量正在加载中...</span>
            <p>正在加载中...</p>
            <ul>
                
            </ul>
        </div>
    </body>
</html>

View Code

QQ菜单延时的例子

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>QQ菜单延时</title>
        <style>
            #qq{
                width:200px;
                height:400px;
                background-color: #f9c;
            }
            #title{
                width:240px;
                height:180px;
                background-color: #fc6;
                position: absolute;
                left:220px;
                top:10px;
                display: none;
            }
        </style>
        <script type="text/javascript">
            /*封装的方法*/
            function $(v){
                if(typeof v===‘function‘){
                    window.onload=v;
                }else if(typeof v===‘string‘){
                    return document.getElementById(v);
                }else if(typeof v===‘object‘){
                    return v;
                }
            }
            var timer=null;
            $(function(){
                $(‘qq‘).onmouseover=show;
                $(‘qq‘).onmouseout=hide;
                $(‘title‘).onmouseover=show;
                $(‘title‘).onmouseout=hide;
                
                function show(){
                    clearInterval(timer);
                    $(‘title‘).style.display=‘block‘;
                }
                function hide(){
                    timer=setInterval(function(){
                        $(‘title‘).style.display=‘none‘;
                    },1000);
                }
            });
        </script>
    </head>
    <body>
        <div id="qq"></div>
        <div id="title"></div>
    </body>
</html>

View Code

以上是关于javascript6的主要内容，如果未能解决你的问题，请参考以下文章

伪代码 - 示例

Javascript 6中的字典和地图有啥区别？ [复制]

微信小程序代码片段

VSCode自定义代码片段——CSS选择器

谷歌浏览器调试jsp 引入代码片段，如何调试代码片段中的js

片段和活动之间的核心区别是啥？哪些代码可以写成片段？