1.上下切换图片
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>上下切换图片</title> </head> <body> <img name="icon" src="image/icon_01.png"> <p></p> <button>上一张</button> <button>下一张</button> <script> // 1.全局的变量 var maxIndex = 9; var minIndex = 1; var currentIndex = minIndex; // 2.拿到要操作的标签 var img = document.getElementsByName('icon')[0]; var pre = document.getElementsByTagName('button')[0]; var next = document.getElementsByTagName('button')[1]; // 3.监听按钮的点击 // 3.1 上一张 pre.onclick = function () { if (currentIndex == minIndex){ // 边界处理 currentIndex = maxIndex; }else{ // 正常情况 currentIndex -=1; } // 改变src img.src = 'image/icon_0' + currentIndex + '.png'; console.log(img.src); }; // 3.2 下一张 next.onclick = function () { if (currentIndex == maxIndex) { currentIndex = minIndex; }else { currentIndex +=1; } // 改变src img.src = 'image/icon_0' + currentIndex + '.png'; console.log(img.src); } </script> </body> </html>
2.定时器操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>定时器</title> <style> body{ background-color: black; text-align: center; margin-top: 100px; } div{ color: red; font-size: 150px; } img{ display: none; } p{ display: none; color: red; font-size: 100px; } </style> </head> <body> <img id="icon" src="./image/flower.gif" alt=""> <p id="word">我对你的爱滔滔不绝..</p> <div id="number">4</div> <script type="text/javascript" > //1.拿到要操作的标签 var img = document.getElementById('icon'); var word = document.getElementById('word'); var number = document.getElementById('number'); //2.设置定时器 var timer = setInterval(function () { //改变倒计时数字 number.innerText -=1; //判断 if (number.innerText == 0){ // 清除定时器 clearInterval(this.timer); //显示 word.style.display = 'block'; img.style.display = 'inline-block'; //隐藏number number.style.display = 'none'; } },1000) </script> </body> </html>