zoukankan      html  css  js  c++  java
  • js时间、定时器、移动div块、轮播

     时间

    var now = new Date();

        var future = new Date(2016,8,12,24,0,0);

        var lefts = parseInt((future-now)/1000);

        var day = parseInt(lefts/86400);

    var year = now.getFullYear();

    var month = now.getMonth()+1<=10?now.getMonth()+1:’0’+(now.getMonth()+1);

    var date = now.getDate();

    var week = now.getDay();        0:周天

    var hour = now.getHours();

    var minute = now.getMinutes()

    var second = now.getSeconds();

    var shijianchuo = now.getTime();

    定时器

    time1 = setTimeout(func(),1000)  定时器   1000毫秒后执行func函数 

     

    clearTimeout(time1)           关闭定时器

     

    time2 = setInterval(func(),1000)  反复定时器 每1秒后执行(也耗时间)

     

    clearInterval(time2)            关闭反复定时器

    点击移动div块

    <body>
    <button onClick="show()">点我移动</button>
    <div id="dd" style=" 100px;height: 100px;background: #ccc;position:absolute;left: 0px"></div>    
    </body>
    </html>
    <script>
        function show(){
            var d = document.getElementById("dd");
            /*var str=d.style.width;*/
            /*var str=d.style.left;
            str=parseInt(str.slice(0,-2));*/
            
            var str=0;
            var obj=setInterval(function(){
                str=str+3;
                /*d.style.width=str+"px";*/
                d.style.left=str+"px";
                
                if(str >= 1000){
                    clearInterval(obj);
                }
            },50);
        }
    </script>

    轮播

    <body>
        <center>
            <img src="./image/blue_big.jpg" height="300px" id="img_1" alt=""><br>
            
            <button onClick="pre()">上一张</button>
            <button onClick="next()">下一张</button><br>
            <!--<div id="div1">
                <button onClick="change(0)">源计划·联合</button>
                <button onClick="change(1)">源计划·自由</button>
                <button onClick="change(2)">源计划·林</button>
            </div>-->
            <div id="div1">
                <img src="./image/blue_big.jpg" height="50px" xb="0" alt="">
                <img src="./image/green_big.jpg" height="50px" xb="1" alt="">
                <img src="./image/orange_big.jpg" height="50px" xb="2" alt=""><br>
            </div>
        </center>
    </body>
    </html>
    <script>
        var imgs=['./image/blue_big.jpg','./image/green_big.jpg','./image/orange_big.jpg'];
        var i=0;
        var t=2000;
        var IntervalObj=null;
        var oImg=null;
        var oBtn=[];  //oBtn数组    
        var oImg_small = [];
        
        window.onload = function(){
            init();              //初始化变量
            addEvent();           //添加事件
        }
    
        /*初始化变量*/
        function init(){
            oImg_small = document.getElementById('div1').getElementsByTagName("img"); //缩略图 数组
            oBtn=document.getElementById('div1').getElementsByTagName("button");
            oImg = document.getElementById("img_1"); // 图片元素
            IntervalObj = setInterval(next,t);       // 轮播重复
        }
    
        /*添加事件*/
        function addEvent(){
    
            oImg.onmouseover = function(){           //图片的鼠标移入事件
                clearInterval(IntervalObj);
            }
    
            oImg.onmouseout = function(){           //图片鼠标的移出事件
                IntervalObj = setInterval(next,t);
            }
    
    
            for(var j = 0; j<oImg_small.length;j++){ //点击 每一张缩略图
               oImg_small[j].onclick = function(){
                   i = +this.getAttribute("xb");     //获取其下标 
                   oImg.src = imgs[i];               //路径 给 img元素的src
               }
            }
    
            for(var j = 0; j<oImg_small.length;j++){ //点击 每一张缩略图
               oBtn[j].onclick = function(){
                   i = +this.getAttribute("xb");     //获取其下标 
                   oImg.src = imgs[i];               //路径 给 img元素的src
               }
            }
        }
    function next(){ /*下一张*/ i++; if(i >= imgs.length){ // i=图片数 时(最后一张) i = 0; // 再从第一张开始 } oImg.src = imgs[i]; } function pre(){ /*上一张*/ i--; if(i < 0){ // i<0 时(第一张) i = imgs.length-1; // 再跳到最后一张 } oImg.src = imgs[i]; } /*function change(num){ i=num; oImg.src=imgs[i] }*/ </script>

  • 相关阅读:
    Java反射在Android中的使用
    配置adb环境变量
    Android Studio 生成Release版,报Warning的解决办法
    Android Studio导入System Library步骤
    Windows 10 Java环境变量配置
    做一个有内涵的程序猿
    简述Python2与Python3的区别
    对不起,您输入的内容不合法
    python的数据类型
    python三器——装饰器/迭代器/生成器
  • 原文地址:https://www.cnblogs.com/javscr/p/9719644.html
Copyright © 2011-2022 走看看