JS | 易学教程

创建元素

const newImage = document.createElement('img');
newImage.setAttribute('src', "images/picxxx.jpg".replace('xxx',i));
thumbBar.appendChild(newImage);

获取元素：

const btn = document.querySelector('button');

//button,可以为p，h，等Css中的标签以及类、id，

元素属性：

name = btn.getAttribute('class');

btn.setAttribute('class', 'light');

btn.textContent = '变亮';// 显示在页面上的值

添加监听器：

timingBtn.addEventListener('click', Timing);

resetBtn.onclick = reset;

对数字取整的方法有四种：

1、parseInt（）丢弃小数部分，只保留整数

2、Math.ceil() 向上取整

3、Math.round() 四舍五入取整

4、Math.floor() 向下取整

数字与字符串互转：

a = “12”

b = Number(a)//转数字

c = b.toString() //转字符串

字符串长度：

a.length

实例1：

 1 const displayedImage = document.querySelector('.displayed-img');
 2 const thumbBar = document.querySelector('.thumb-bar');
 3 
 4 const btn = document.querySelector('button');
 5 const overlay = document.querySelector('.overlay');
 6 
 7 /*1 遍历图片并添加至缩略图区 */
 8 for (let i=1;i<6;i++){
 9     const newImage = document.createElement('img');
10     newImage.setAttribute('src', "images/picxxx.jpg".replace('xxx',i));
11     thumbBar.appendChild(newImage);
12     /*给每一个缩略图添加点击处理器*/
13     newImage.addEventListener('click', showBigImg);
14     //newImage.onclick = showBigImg;
15 }
16 
17 /*2 在图片被点击时相应的图片被显示到 displayed-img <img> 元素上。*/
18 function showBigImg(e){
19     const imgName = e.target.getAttribute('src');
20     displayedImage.setAttribute('src', imgName);
21 }
22 
23 /*3 编写 变亮/变暗 按钮 */
24 btn.onclick = function changeBrightness(){
25     const btName = btn.getAttribute('class');
26     if (btName === 'dark'){
27         btn.setAttribute('class', 'light');
28         btn.textContent = '变亮';
29         overlay.style.backgroundColor = "rgba(0,0,0,0.5)";
30     }else{
31         btn.setAttribute('class', 'dark');
32         btn.textContent = '变暗';
33         overlay.style.backgroundColor = "rgba(0,0,0,0)";
34     }
35 }

View Code

setTimeout(function, timeout, param)

clearTimeout()

function sayHi(who) {
alert('Hello ' + who + '!');
}
let myGreeting = setTimeout(sayHi, 2000, 'Mr. Universe');
clearTimeout(myGreeting);

setInterval(function ,interval)

clearInterval()

function displayTime() {
let date = new Date();
let time = date.toLocaleTimeString();
document.getElementById('demo').textContent = time;
}

const createClock = setInterval(displayTime, 1000);

clearInterval(createClock);

实例2-计时器：

 1 <!DOCTYPE html>
 2 <html lang="en-US">
 3   <head>
 4     <meta charset="utf-8">
 5     <title>Simple setInterval clock</title>
 6     <style>
 7       p {
 8         font-family: sans-serif;
 9         
10       }
11     </style>
12   </head>
13   <body>
14     
15     <button class="timing" name="start">开始</button>
16     <button class="reset">清零</button>
17     <p class="clock">00:00:00</p>
18     <script>
19     /*
20       function displayTime() {
21         let date = new Date();
22         let time = date.toLocaleTimeString();
23         document.querySelector('.clock').textContent = time;
24       }
25       displayTime();
26       const createClock = setInterval(displayTime, 1000);
27       */
28       const pEle = document.querySelector('.clock');
29       const timingBtn = document.querySelector('.timing');
30       const resetBtn = document.querySelector('.reset');
31       
32       let myInterval;
33       let startTime;
34       let count;
35       function Timing(){
36         let timingstatus = timingBtn.getAttribute('name');
37         if (timingstatus === 'start'){
38             startTime = new Date().getTime();
39             
40             timingBtn.setAttribute('name', 'stop');
41             timingBtn.textContent = "停止";
42             //计时
43             myInterval = setInterval(getTime, 1000);
44             
45         }else{
46             clearInterval(myInterval);
47             timingBtn.setAttribute('name', 'start');
48             timingBtn.textContent = "开始";
49 
50         }
51       }
52       timingBtn.addEventListener('click', Timing);
53       
54       function getTime(i){
55          let time = new Date().getTime();
56          count = time - startTime;
57          //pEle.textContent = Math.floor(count/1000);
58          pEle.textContent = showTime(Math.floor(count/1000))
59       }
60       function reset(){
61         let timingstatus = timingBtn.getAttribute('name');
62         if (timingstatus === 'start'){
63             pEle.textContent = "00:00:00";
64         }else{
65             alert("程序正在运行中，请先停止！！")
66         }
67       }
68       resetBtn.onclick = reset;
69       
70       function showTime(s){
71         h = Math.floor(s/3600);
72         m = Math.floor((s%3600)/60);
73         s = s%60;
74         let text =  fm(h) + ":" + fm(m) + ":" + fm(s);
75         //let text =  h + ":" + m + ":" + s;
76         return text;
77       }
78       function fm(a){
79         if (a.toString().length>1){
80          return a;
81         }else{
82             return "0"+a;
83         }
84       }
85     </script>
86   </body>
87 </html>

setinterval-clock

来源：https://www.cnblogs.com/yaner2018/p/12012124.html

标签

const

queryselector