當前位置:
首頁 >
前端技术
> javascript
>内容正文
javascript
【JavaScript】Js定时器综合应用大全
生活随笔
收集整理的這篇文章主要介紹了
【JavaScript】Js定时器综合应用大全
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
| var timer=setInterval('date_2();', 3000); | 每隔3秒循環執行過程函數! |
| clearInterval(timer) ;? ? ? ? | 可以關閉一個定時器 |
一、基礎實例
<script language="JavaScript"> function date_1(){alert('打開網頁只執行一次過程函數!');}function date_2() {alert('每隔3秒循環執行過程函數!');}// settimeout(date_1(), 3000); //打開網頁只執行一次過程函數!setInterval('date_2();', 3000); //每隔3秒循環執行過程函數!//setTimeout("alert('這是進入網頁執行,只執行一次!')", 3000)//setInterval("alert('這是進入網頁執行,每隔3秒執行一次!')", 3000) </script>?二、輪播圖定時器效果
?
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>主頁</title><link rel="stylesheet" href="css/body.css" /></head><style>.logo {width: 300px;height: 300px;background-color: #999999;border: 5px rgb(204, 201, 201) solid;overflow: hidden;}.logo img {width: 100%;height: 100%;}button {width: 150px;height: 60px;font-size: 25px;margin-right: 20px;}</style><body><div class="logo"><img src="images/logo.jpg" /></div><br /><br /><button id="stop">停止定時器</button><button id="btn_2">下一張</button></body><script type="text/javascript">var img = document.getElementsByTagName("img")[0];var img_now=0;var imgs=["tb1.jpg","tb2.jpg","tb3.jpg","tb4.jpg","tb5.jpg"];var stop = document.getElementById("stop");stop.onclick = function () {clearInterval(lunbo);};var btn_2 = document.getElementById("btn_2");btn_2.onclick = function () {img_now=img_now+1;if(img_now==5){img_now=0};img.src="images/"+imgs[img_now];}/* 每一秒切換一張圖片 */var lunbo=setInterval(btn_2.onclick,1000);</script> </html>總結
以上是生活随笔為你收集整理的【JavaScript】Js定时器综合应用大全的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: i5系列的服务器cpu,i5 系列 CP
- 下一篇: vue 得到当月的天数getDate()