|
|
@@ -0,0 +1,48 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>Document</title>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <button id="btn1">按钮一</button>
|
|
|
+ <button id="btn2">按钮二</button>
|
|
|
+ <button id="btn4">停止</button>
|
|
|
+ <script>
|
|
|
+ // 根 document
|
|
|
+ // 获取id名字标签
|
|
|
+ var btn1 = document.getElementById("btn1");
|
|
|
+ var btn2 = document.getElementById("btn2");
|
|
|
+ var btn4 = document.getElementById("btn4");
|
|
|
+ var c = null;
|
|
|
+ // 点击按钮一 声明变量值每秒都加一
|
|
|
+ // 定时器：在规定的时间内执行...操作
|
|
|
+ // 格式：setInterval(function(){},1000)
|
|
|
+ // clearInter()
|
|
|
+ btn1.onclick = function(){
|
|
|
+ var a = 1;
|
|
|
+ var b = setInterval(function() {
|
|
|
+ a++;
|
|
|
+ console.log(a)
|
|
|
+ if(a >= 10) {
|
|
|
+ clearInterval(b);
|
|
|
+ }
|
|
|
+ },1000)
|
|
|
+ }
|
|
|
+ btn2.onclick = function() {
|
|
|
+ // 点击按钮二 五秒后弹出弹框
|
|
|
+ // 延时器
|
|
|
+ // 格式 setTimeout(function() {},1000);
|
|
|
+ // 清除延时器 clearTimeout
|
|
|
+ c = setTimeout(function() {
|
|
|
+ alert("出现了")
|
|
|
+ },5000)
|
|
|
+ }
|
|
|
+ btn4.onclick = function() {
|
|
|
+ clearTimeout(c);
|
|
|
+ console.log("清除了")
|
|
|
+ }
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+</html>
|
e