html计时器使用案例

最新推荐文章于 2024-11-15 14:20:21 发布

原创最新推荐文章于 2024-11-15 14:20:21 发布 · 336 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

HTML

本文介绍了三种实用的网页编程技巧：实现倒计时功能、广告图片自动切换及页面自动跳转的方法。通过JavaScript代码，展示了如何设置倒计时并在倒计时结束后跳转页面，以及如何实现图片轮播效果。

倒数器

<script>

  let time ;

  window.onload = function (){
      time =  setInterval("changeNumber()" , 1000);
  }

  function  changeNumber(){
      //修改 标题中的数字
      //获得 数字的标签对象
      let h = document.getElementsByTagName("h1")[0];
      //let h =  document.getElementById("v1");
      console.log("我在运行中")

      // 修改标签中的 数字  num--
      let num = h.innerText;
      //let num = h.valueOf();
      num--;
      if(num >= 0){
          h.innerText = num;
      }else{
          //清空定时器
          clearInterval(time);
      }

  }

</script>
</head>

<body>
<h1 id="v1">10</h1>
</body>

广告图片切换

<script>
 let arr = ["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg"];
let img = document.getElementsByTagName("img")[0];
let index = 0;
fun();

function fun(){
img.setAttribute("src" , arr[++index % arr.length]);
setTimeout("fun()",1000);
 }

</script>

页面跳转

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>location地址栏对象</title>
<style>
 p{
   text-align: center;
  }
   span{
   color: red;
 }
 </style>
</head>
<body>
<p>
  注册成功！<span id="time">5</span>秒之后自动跳转到首页...
</p>
</body>
<script>
  //获得 数字的 标签
  let count = document.getElementById("time");

 change();

function change(){
 //获得 count 的值 并--

 count.innerText--;

   if(count.innerText <= 0){
     //开始进行页面的跳转
	  location.href="https://www.baidu.com";
	}else{
	  //一秒启动一次
    setTimeout("change()",1000);
  }

 }

</script>

</body>