집 > 기사 > 웹 프론트엔드 > 심층적인 JavaScript 타이머

심층적인 JavaScript 타이머

php中世界最好的语言원래의: 2018-03-13 13:26:381461검색

이번에는 JavaScript 타이머에 대해 심층적으로 소개하겠습니다. JavaScript 타이머 사용 시 주의사항은 무엇인가요? 연도, 월, 일, 주, 시, 분, 초 가져오기

<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. 타이머

setInterval 간격 유형: 매번 실행하는 데 필요한 ms 수

setTimeout 지연 유형: 지연 시간은 몇 ms입니까?

두 타이머의 차이점:

setInterval 간격 유형, 여러 번 실행 가능

setTimeout 지연 유형, 한 번만 실행됨

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

Open 타이머 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 타이머clearInterval(timer);

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

3. 문자열 가로채기

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

4. 숫자 시계 연습

<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>

심층적인 JavaScript 타이머 지연 프롬프트 상자

<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>

간단한 코드: 두 개의 동일한 마우스오버 및 마우스아웃 병합

<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. 방법은 본 글의 사례를 읽어보신 후, 더 많은 PHP 중국어 홈페이지의 다른 관련 글도 주목해주세요!

추천도서:

JavaScript 기본 응용 자세히 알아보기

JS에서 주의해야 할 8가지 기본 지식

위 내용은 심층적인 JavaScript 타이머의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：JavaScript의 기본 사항에 대해 자세히 알아보세요.다음 기사：JavaScript의 기본 사항에 대해 자세히 알아보세요.