创建元素
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 }
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>