zoukankan      html  css  js  c++  java

  • javascript学习6

      • 定时器
      • 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

       方块往前或往后移动的例子以及其封装

    • <!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <style>
        #div1 { width:100px; height:100px; background:red; position:absolute; top:50px; left:30px; }
    </style>
    <script>
        var oBtn1 = document.getElementById('btn1');
        var oBtn2 = document.getElementById('btn2');
        var oDiv = document.getElementById('div1');
        
        oBtn1.onclick = function () {
            doMove ( oDiv, -12, 10 );
        };
        oBtn2.onclick = function () {    
            doMove ( oDiv, 12, 800 );    
        };
        
        /*
            oDiv 12        800        >
            oDiv -12   -10        <
            
            doMove ( oDiv, 12, 800 );
        */
        
        function doMove ( obj, dir, target ) {
            clearInterval( obj.timer );
            obj.timer = setInterval(function () {
                var speed = parseInt(getStyle( obj, 'left' )) + dir;            // 步长
                if ( speed > target && dir > 0 ) {        // 往前跑
                    speed = target;
                }
                if ( speed < target && dir < 0 ) {        // 往后跑
                    speed = target;
                }
                obj.style.left = speed + 'px';
                if ( speed == target ) {
                    clearInterval( obj.timer );
                }
            }, 30);
        }
        function getStyle ( obj, attr ) { 
            return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr]; 
        }
    </script>
</head>
<body>
    <input id="btn1" type="button" value="往后" />
    <input id="btn2" type="button" value="往前" />
    <div id="div1"></div>
</body>
</html>
      View Code

       方块向上或向下移动的例子以及封装

    • <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #div1{width:80px;height:80px;background: red;position: absolute;top:60px;left:60px;}
        </style>
        <script type="text/javascript">
            window.onload=function(){
                var oBtn1=document.getElementById('btn1');
                var oBtn2=document.getElementById('btn2');
                var oDiv=document.getElementById('div1');
                oBtn1.onclick=function(){
                    move(oDiv,'top',-20,40);
                }
                oBtn2.onclick=function(){
                    move(oDiv,'top',20,700);
                }
            }
            function move(obj,attr,dir,target){
                clearInterval(timer);
                var timer=setInterval(function(){
                    var speed=parseInt(getStyle(obj,attr))+dir;
                    if ( speed > target && dir > 0 ||  speed < target && dir < 0  ) {
                        speed = target;
                    }
                    obj.style[attr]=speed+'px';
                    if(speed==target){
                        clearInterval(timer);
                    }
                },30);
            }
            function getStyle(obj,attr){
                return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr];
            }
        </script>
    </head>
    <body>
        <input type="button" value="向上" id="btn1"/>
        <input type="button" value="向下" id="btn2"/>
        <div id="div1"></div>
    </body>
</html>
      View Code

      图片抖动

      <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            img{position: absolute;top:200px;left:300px;width:100px;}
        </style>
        <script type="text/javascript">
            function getStyle ( obj, attr ) { 
                return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr];
            }
            window.onload=function(){
                var oImg=document.getElementById('img1');
                oImg.onclick=function(){
                    var arr=[];//20 -20 18 -18 ... 0
                    var pos=parseInt(getStyle(oImg,'left'));//原来位置
                    var timer=null;
                    var num=0;
                    for(var i=20;i>0;i-=2){
                        arr.push(i,-i);
                    }
                    arr.push(0);
                    clearInterval(timer);
                    timer=setInterval(function(){
                        oImg.style.left=pos+arr[num]+'px';
                        num++;
                        if(num==arr.length){
                            clearInterval(timer);
                        }
                    },50);
                }
            }
        </script>
    </head>
    <body>
        <img src="../img/5.png" alt="" id="img1"/>
    </body>
</html>
      View Code

       抖动封装

      <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            img{position: absolute;top:200px;left:300px;width:100px;}
            #img2{left:420px;}
        </style>
        <script type="text/javascript">
            function getStyle ( obj, attr ) { 
                return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr];
            }
            window.onload=function(){
                var oImg1=document.getElementById('img1');
                var oImg2=document.getElementById('img2');
                oImg1.onclick=fns;
                oImg2.onclick=fns;
            }
            function fns(){
                var _this=this;
                    shake(_this,'left',function(){
                        shake(_this,'top');
                    });
            }
            function shake(obj,attr,endFn){
                var arr=[];//20 -20 18 -18 ... 0
                var pos=parseInt(getStyle(obj,attr));//原来位置
                var timer=null;
                var num=0;
                for(var i=20;i>0;i-=2){
                    arr.push(i,-i);
                }
                arr.push(0);
                clearInterval(timer);
                timer=setInterval(function(){
                    obj.style[attr]=pos+arr[num]+'px';
                    num++;
                    if(num==arr.length){
                        clearInterval(timer);
                        endFn && endFn();
                    }
                },50);
            }
        </script>
    </head>
    <body>
        <img src="../img/5.png" alt="" id="img1"/>
        <img src="../img/6.png" alt="" id="img2"/>
    </body>
</html>
      View Code

      关于多张图片抖动时的隐患解决方案

      <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            img{position: absolute;top:200px;width:60px;height:60px;}
        </style>
        <script type="text/javascript">
            function getStyle ( obj, attr ) { 
                return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr];
            }
            window.onload=function(){
                var oImg=document.getElementsByTagName('img');
                for(var i=0;i<oImg.length;i++){
                    oImg[i].style.left=60+i*80+'px';
                    oImg[i].onmouseover=fns;
                }
            }
            function fns(){
                var _this=this;
                shake(_this,'left',function(){
                    shake(_this,'top');
                });
            }
            function shake(obj,attr,endFn){
                if(obj.onOff){
                    return;
                }
                obj.onOff=true;
                var arr=[];//20 -20 18 -18 ... 0
                var pos=parseInt(getStyle(obj,attr));//有隐患
                var timer=null;
                var num=0;
                for(var i=20;i>0;i-=2){
                    arr.push(i,-i);
                }
                arr.push(0);
                clearInterval(timer);
                timer=setInterval(function(){
                    obj.style[attr]=pos+arr[num]+'px';
                    num++;
                    if(num==arr.length){
                        clearInterval(timer);
                        endFn && endFn();
                        obj.onOff=false;
                    }
                },50);
            }
        </script>
    </head>
    <body>
        <img src="../img/1.png" alt=""/>
        <img src="../img/2.png" alt=""/>
        <img src="../img/3.png" alt=""/>
        <img src="../img/4.png" alt=""/>
        <img src="../img/5.png" alt=""/>
        <img src="../img/6.png" alt=""/>
    </body>
</html>
      View Code

       系统时间对象

      • new Date();  //当前系统的时间对象   数据类型为object

        • 以下这些的数据类型为number

        • getFullYear()

        • getMonth()    //月份  1月份从0开始算  正常算： getMonth()+1

        • getDate()

        • getDay()

        • getHours()

        • getMinutes()

        • getSeconds()

                     实例：网站电子时钟　　

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            window.onload=function(){
                var oBody=document.body;
                
                fnTime();
                var timer=setInterval(function(){
                        fnTime();
                },1000);
                
                function fnTime(){
                    var str='';
                    var myTime=new Date();
                    
                    var iYear=myTime.getFullYear();
                    var iMonth=myTime.getMonth()+1;
                    var iDate=myTime.getDate();
                    var iWeek=myTime.getDay();
                    var iHours=myTime.getHours();
                    var iMinutes=myTime.getMinutes();
                    var iSeconds=myTime.getSeconds();
                    
                    if(iWeek==0){iWeek='星期日';}
                    if(iWeek==1){iWeek='星期一';}
                    if(iWeek==2){iWeek='星期二';}
                    if(iWeek==3){iWeek='星期三';}
                    if(iWeek==4){iWeek='星期四';}
                    if(iWeek==5){iWeek='星期五';}
                    if(iWeek==6){iWeek='星期六';}

                    str=iYear+'年'+iMonth+'月'+ iDate+'日 '+ iWeek+' '+toTwo(iHours)+':'+ toTwo(iMinutes)+':'+ toTwo(iSeconds);
                    oBody.innerHTML=str;
                }
            }
            function toTwo(n){
                return n<10?'0'+n:''+n
            }
        </script>
    </head>
    <body>
    </body>
</html>
    View Code

     　　　　实例：图片时钟

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            span{
                display:inline-block;
                width:122px;
                height:172px;
                background: url("img/colon.JPG") center center no-repeat;
                background-size:100% 100%;
            }
        </style>
        <script type="text/javascript">
            window.onload=function(){
                var oP=document.getElementById('time');
                var oImg=document.getElementsByTagName('img');
                
                fnTime();
                setInterval(fnTime,1000);
                
                function fnTime(){
                    var myTime=new Date();
                    
                    var iHours=myTime.getHours();
                    var iMinutes=myTime.getMinutes();
                    var iSeconds=myTime.getSeconds();
                    var str=toTwo(iHours)+toTwo(iMinutes)+toTwo(iSeconds)

                    oP.innerHTML=str;
                    
                    for(var i=0;i<str.length;i++){
                        oImg[i].src = 'img/' + str.charAt(i) + '.JPG';
                    }
                }
            }
            function toTwo(n){
                return n<10?'0'+n:''+n
            }
        </script>
    </head>
    <body>
        <p id="time" style="font-size: 60px;display: none;"></p>
        <img src="img/0.JPG" alt=""/>
        <img src="img/0.JPG" alt=""/>
        <span></span>
        <img src="img/0.JPG" alt=""/>
        <img src="img/0.JPG" alt=""/>
        <span></span>
        <img src="img/0.JPG" alt=""/>
        <img src="img/0.JPG" alt=""/>
    </body>
</html>
    View Code

     　　Date对象的参数

    　　　　　　数字形式：new Date(2013,4,1,9,48,12);

     　　　　　　字符串形式：new Date('June 10,2013 12:12:12');

    　　月份取值

    　　　　　　January、February、March、April、May、June、July、August、September、October、November、December

    　　时间转换公式

    　　　　　　天：Math.floor(t/86400);

    　　　　　　时：Math.floor(t%86400/3600);

    　　　　　　分：Math.floor(t%86400%3600/60);

    　　　　　　秒：t%60

    <script type="text/javascript">
    var iNow=new Date();//2017,6,14,15,26,35
    var iNew=new Date(2017,6,15,15,26,35);
            
    var t=Math.floor((iNew-iNow)/1000);//将毫秒转换为秒
    var str = Math.floor(t/86400)+'天'+Math.floor(t%86400/3600)+'时'+Math.floor(t%86400%3600/60)+'分'+t%60+'秒';            
    alert(str);//0天23时51分56秒
</script>

    　　倒计时实例

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .t1{width:400px;}
        </style>
        <script type="text/javascript">
            window.onload=function(){
                var aInput=document.getElementsByTagName('input');
                var iNow=null;
                var iNew=null;
                var t=0;
                var str='';
                var timer=null;
                aInput[2].onclick=function(){
                    iNew=new Date(aInput[0].value);
                    clearInterval(timer);
                    timer=setInterval(function(){
                        iNow=new Date();
                        t=Math.floor((iNew-iNow)/1000);
                        if(t>=0){
                            str = Math.floor(t/86400)+'天'+Math.floor(t%86400/3600)+'时'+Math.floor(t%86400%3600/60)+'分'+t%60+'秒';
                               aInput[1].value=str;
                        }else{
                            clearInterval(timer);
                        }
                    },1000);
                }
            }
        </script>
    </head>
    <body>
        距离:<input class="t1" type="text" value="July 15,2017 15:41:20"/><br />
        还剩:<input class="t1" type="text" />
        <input type="button" value="开始倒计时吧"/>
    </body>
</html>
    View Code

     　　时间戳：getTime()

    　　　　返回从1970年1月1日0点0分0秒0毫秒到现在的时间有多少毫秒

    　　　　alert(new Date().getTime());

    <script type="text/javascript">
    var foo={
        bar:function(){
            console.log(this);
        }
    }
    foo.bar();//object
    (foo.bar)();//object
    (foo.bar=foo.bar)();//window
    (foo.bar,foo.bar)();//window
    (false||foo.bar)();//window
</script>
  • 相关阅读:
    RabbitMQ系列教程之一：我们从最简单的事情开始！Hello World（转载）
    如何安装和配置RabbitMQ（转载）
    C++学习笔记-模板
    C++学习笔记-多态的实现原理
    C++学习笔记-多态的实现原理
    C++学习笔记-多态
    C++学习笔记-多态
    C++学习笔记-继承中的构造与析构
    C++学习笔记-继承
    C++学习笔记-封装
  • 原文地址：https://www.cnblogs.com/web-Knowledge/p/7159746.html
Copyright © 2011-2022 走看看