• 第36天:倒计时:发动短信验证、跳转页面、关闭广告


    一、setTimeout

    setTimeout("函数",时间)
    setInterval(fn,5000);//每隔5秒执行一次fn
    setTimeout(fn,5000);//5秒之后执行一次fn

    二、跳转页面
    window.location.href="http://www.baidu.com";
    函数自己调用自己成为“递归调用”

    案例:

    1、发送短信验证倒计时

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6     <style>
     7         .box{
     8             margin: 100px auto;
     9             text-align: center;
    10         }
    11         #btn{
    12 
    13         }
    14     </style>
    15     <script>
    16         window.onload=function(){
    17             var btn=document.getElementById("btn");
    18             var count=60;
    19             var timer=null;//定时器名称
    20             btn.onclick=function(){
    21                 clearInterval(timer);
    22                 this.disabled="true";//this指向btn
    23                 var that=this;//使用that存储当前this
    24                 timer=setInterval(sendTextMessage,1000);//开启定时器
    25                 function sendTextMessage(){
    26                     count--;
    27                     if(count>=0){
    28                         that.innerHTML="还剩余"+count+"";
    29                     }else{
    30                         that.innerHTML="重新发送短信";
    31                         that.disabled=false;
    32                         clearInterval(timer);
    33                         count=60;
    34                     }
    35 
    36                 }
    37             }
    38         }
    39     </script>
    40 </head>
    41 <body>
    42     <div class="box">
    43         <input type="text">
    44         <button id="btn">点击发送短信</button>
    45     </div>
    46 </body>
    47 </html>

    运行效果:

    2、5秒后跳转页面

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>跳转页面</title>
     6     <style>
     7         #demo{
     8             margin: 100px auto;
     9             color: #000;
    10             font-size: 30px;
    11             text-align: center;
    12         }
    13         #demo a{
    14             text-decoration: none;
    15             color: red;
    16         }
    17     </style>
    18 </head>
    19 <body>
    20     <div id="demo"></div>
    21 </body>
    22 <script>
    23     var demo=document.getElementById("demo");
    24     var count=5;
    25     var speed=1000;
    26     setTimeout(goIndexPage,speed);//1秒之后 执行goIndexPage函数
    27     function goIndexPage(){
    28         count--;
    29         demo.innerHTML="<a href='http://www.baidu.com'>本页面将在"+count+"秒之后跳转页面</a>";
    30         if(count<1){
    31             window.location.href="http://www.baidu.com";//跳转页面
    32 
    33         }else{
    34             setTimeout(goIndexPage,speed);//递归调用 setTimeout只执行一次
    35         }
    36     }
    37 </script>
    38 </html>

    运行效果:

    3、5秒后关闭广告

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>5s之后关闭广告</title>
     6     <style>
     7         *{
     8             margin: 0;
     9             padding: 0;
    10         }
    11         #left{
    12             float: left;
    13         }
    14         .box{
    15             float: left;
    16             margin: 100px;
    17         }
    18         #right{
    19             float: left;
    20         }
    21     </style>
    22 </head>
    23 <body>
    24     <div id="left"><img src="1.gif" alt=""></div>
    25     <div class="box">
    26         <p>山上有座庙,庙里有个和尚</p>
    27         <p>山上有座庙,庙里有个和尚</p>
    28         <p>山上有座庙,庙里有个和尚</p>
    29         <p>山上有座庙,庙里有个和尚</p>
    30         <p>山上有座庙,庙里有个和尚</p>
    31     </div>
    32 
    33     <div id="right"><img src="2.gif" alt=""></div>
    34     
    35 </body>
    36 <script>
    37     function $(id){return document.getElementById(id);}
    38     function hide(id){
    39         $(id).style.display="none";
    40     }
    41     function show(id){
    42         $(id).style.display="block";
    43     }
    44     setTimeout(closeAd,5000);
    45     function closeAd(){
    46         hide("right");
    47         hide("left");
    48     }
    49 </script>
    50 </html>

    运行效果:

  • 相关阅读:
    CSS学习笔记07 盒子模型
    [Android]AndFix使用说明
    [Android]自定义控件LoadMoreRecyclerView
    [算法]Plus One
    [Android]android Service后台防杀
    [Android]android studio预览视图时报错
    [算法]删除无序单链表中值重复出现的节点
    [算法] 将单链表的每K个节点之间逆序
    [Android]热修复框架AndFix测试说明
    [算法]单链表的选择排序
  • 原文地址:https://www.cnblogs.com/le220/p/7545918.html
Copyright © 2020-2023  润新知