suchen

Heim >Web-Frontend >js-Tutorial >Ausführlicher JavaScript-Timer

Ausführlicher JavaScript-Timer

php中世界最好的语言
php中世界最好的语言Original
2018-03-13 13:26:381487Durchsuche

Dieses Mal werde ich Ihnen eine ausführliche Einführung in JavaScript-Timer geben. Was sind die Vorsichtsmaßnahmen bei der Verwendung von JavaScript--Timern?

Jahr, Monat, Tag, Woche, Stunde, Minute und Sekunde abrufen

<script>
    var date = new Date()
    date.getFullYear(); //2017 年
    date.getMonth(); // 5 注意:月份是个诡异的东西,他是从0开始计算的,故+1才等于正常的月份
    date.getDate(); //11 日
    date.getDay(); //星期 美国的星期是从星期日开始的,故0为星期日,1为星期一,...6为星期六
    date.getHours(); //时
    date.getMinutes(); //分
    date.getSeconds(); //秒
</script>

2. Timer

setInterval Intervalltyp: Wie viele Millisekunden alle ausgeführt werden sollen Zeit
setTimeout Verzögerungstyp: Verzögerung Wie viele ms dauert die Ausführung

Der Unterschied zwischen den beiden Timern:

setInterval Intervalltyp, kann mehrmals ausgeführt werden
setTimeout Verzögerung Typ, nur einmal ausgeführt 

<script>
        function show() {
            alert(&#39;定时器&#39;);
        }//        setInterval(show,1000); // 一秒执行一次
        setTimeout(show,1000);  //延时一秒执行
</script>

Enable timer setInterval()

var btn1 = document.getElementById(&#39;btn1&#39;);var btn2 = document.getElementById(&#39;btn2&#39;);var i = 0;var timer = null;
btn1.onclick = function () {       //开启定时器
       timer = setInterval(function () {
           i++;
           alert(i);
      },1000);
}

Close timer clearInterval(timer);

btn2.onclick = function () {
       i = 0;
       clearInterval(timer);
}

3. Intercept string 

str[0];不兼容低版本浏览器,如IE7等;
var a = &#39;abcdef&#39;;alert(a[0]);
str.charAt(0); 兼容各种浏览器
var a = &#39;abcdef&#39;;a.charAt(0); //兼容各种浏览器

4. Zahlenuhr-Übung

<html lang="en"><head>
    <meta charset="UTF-8">
    <title>数字时钟</title>
    <style>
        body{            background-color: black;            font-size: 50px;            color: white;
        }    </style>
    <script>
        window.onload = function () {            var aImg = document.getElementsByTagName(&#39;img&#39;);            function tick() {                var date = new Date();                //把时间拼接成一个字符串,如:212835;
                //toDouble()这个函数,是为了把单数转换成双位数,如,9转换成09
                var sTime = toDouble(date.getHours()) + toDouble(date.getMinutes()) + toDouble(date.getSeconds());                for (var i=0;i<aImg.length;i++){
                    aImg[i].src = &#39;image/&#39;+sTime.charAt(i)+&#39;.png&#39;;
                }
            }
            setInterval(tick,1000);
            tick(); //由于setInterval会延时1000ms执行,所以为了防止每次刷新页面时,页面上显示00:00:00的情况,调用下此函数
        }        //把获取的时/分/秒 转换成双位数
        function toDouble(n) {            if (n<10){                return &#39;0&#39; + n;
            }else {                return &#39;&#39; +n;//前面的&#39;&#39;,是为了把数字转换成字符串
            }
        }    </script></head><body>![](image/0.png)
![](image/0.png)
:
![](image/0.png)
![](image/0.png)
:
![](image/0.png)
![](image/0.png)</body></html>

Ausführlicher JavaScript-Timer

Eingabeaufforderungsfeld verzögern

<html lang="en"> <head>     <meta charset="UTF-8">     <title>07-延时提示框</title>     <style>         div{float: left;margin-left: 20px;}         #div1{width: 50px;height: 50px;background-color: red;}         #div2{ width: 200px;height: 200px;background-color: #ccc;display: none;}     </style>     <script>         window.onload = function () {             var oDiv1 = document.getElementById(&#39;div1&#39;);             var oDiv2 = document.getElementById(&#39;div2&#39;);             var timer = null;             oDiv1.onmouseover = function () {                 oDiv2.style.display = &#39;block&#39;;                 clearTimeout(timer); //清除延时器             }             oDiv1.onmouseout = function () {                 timer = setTimeout(function () {                     oDiv2.style.display = &#39;none&#39;;                 },500);             }             oDiv2.onmouseover = function () {                 clearTimeout(timer);             }             oDiv2.onmouseout = function () {                 timer = setTimeout(function () {                     oDiv2.style.display = &#39;none&#39;;                 },500);             }         }     </script> </head> <body> <div id="div1"></div> <div id="div2"></div> </body> </html>

Vereinfachter Code: zwei identische Mouseover zusammenführen und Mouseout

<html lang="en"> <head>     <meta charset="UTF-8">     <title>07-延时提示框</title>     <style>         div{float: left;margin-left: 20px;}         #div1{width: 50px;height: 50px;background-color: red;}         #div2{ width: 200px;height: 200px;background-color: #ccc;display: none;}     </style>     <script>         window.onload = function () {             var oDiv1 = document.getElementById(&#39;div1&#39;);             var oDiv2 = document.getElementById(&#39;div2&#39;);             var timer = null;             //简化代码,合并两个相同的mouseover             oDiv2.onmouseover = oDiv1.onmouseover = function () {                 oDiv2.style.display = &#39;block&#39;;                 clearTimeout(timer);             }             //简化代码,合并两个相同的mouseout             oDiv2.onmouseout = oDiv1.onmouseout = function () {                 timer = setTimeout(function () {                     oDiv2.style.display = &#39;none&#39;;                 },500);             }         }     </script> </head> <body> <div id="div1"></div> <div id="div2"></div> </body> </html>

6. Nahtloses Scrollen

<html><head><meta charset="utf-8"><title>无缝滚动</title><style>* {margin:0; padding:0;}#div1 {width:712px; height:108px; margin:100px auto; position:relative; background:red; overflow:hidden;}#div1 ul {position:absolute; left:0; top:0;}#div1 ul li {float:left; width:178px; height:108px; list-style:none;}</style><script>window.onload=function (){    var oDiv=document.getElementById(&#39;div1&#39;);    var oUl=oDiv.getElementsByTagName(&#39;ul&#39;)[0];    var aLi=oUl.getElementsByTagName(&#39;li&#39;);    
    var speed=-2;    
    //oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;
    oUl.innerHTML+=oUl.innerHTML;
    oUl.style.width=aLi[0].offsetWidth*aLi.length+&#39;px&#39;;    //offsetWidth :(width+padding+border) 当前对象的宽度。
    //offsetLeft 当前对象到其上级层左边的距离。
    function move(){        //往左滚动
        if(oUl.offsetLeft<-oUl.offsetWidth/2)
        {
            oUl.style.left=&#39;0&#39;;
        }        //往右滚动
        if(oUl.offsetLeft>0)
        {
            oUl.style.left=-oUl.offsetWidth/2+&#39;px&#39;;
        }        //offsetLeft 距离父元素左侧距离
        oUl.style.left=oUl.offsetLeft+speed+&#39;px&#39;;
    }    //定时器
    var timer=setInterval(move, 30);
    
    oDiv.onmouseover=function ()    {
        clearInterval(timer);
    };
    
    oDiv.onmouseout=function ()    {
        timer=setInterval(move, 30);
    };    //往左滚动
    document.getElementsByTagName(&#39;a&#39;)[0].onclick=function ()    {
        speed=-2;
    };    //往右滚动
    document.getElementsByTagName(&#39;a&#39;)[1].onclick=function ()    {
        speed=2;
    };
};</script></head><body><a href="javascript:;">向左走</a><a href="javascript:;">向右走</a><div id="div1">
    <ul>
        <li>![](img2/1.jpg)</li>
        <li>![](img2/2.jpg)</li>
        <li>![](img2/3.jpg)</li>
        <li>![](img2/4.jpg)</li>
    </ul></div></body></html>

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Inhalte finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Ausführliche Grundanwendung von JavaScript

8 Grundkenntnisse von JS, die beachtet werden müssen zu

Das obige ist der detaillierte Inhalt vonAusführlicher JavaScript-Timer. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Tauchen Sie tief in die Grundlagen von JavaScript einNächster Artikel：Tauchen Sie tief in die Grundlagen von JavaScript ein

In Verbindung stehende Artikel

Mehr sehen