1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 list-style: none; 11 } 12 13 body{ 14 background-color: #000; 15 } 16 17 #box{ 18 750px; 19 height: 400px; 20 border: 10px solid red; 21 margin: 100px auto; 22 overflow: hidden; 23 position: relative; 24 } 25 26 #pic{ 27 position: absolute; 28 left: 0; 29 top: 0; 30 } 31 32 #to_top, #to_bottom{ 33 100%; 34 height: 50%; 35 /* background-color: #fff;*/ 36 position: absolute; 37 left: 0; 38 cursor: pointer; 39 } 40 41 #to_top{ 42 top: 0; 43 } 44 45 #to_bottom{ 46 bottom: 0; 47 } 48 </style> 49 </head> 50 <body> 51 <div id="box"> 52 <img id="pic" src="images/timg.jpg" alt=""> 53 <span id="to_top"></span> 54 <span id="to_bottom"></span> 55 </div> 56 57 <script> 58 window.onload = function (ev) { 59 // 1. 获取标签 60 var box = document.getElementById('box'); 61 var pic = document.getElementById('pic'); 62 var to_top = document.getElementById('to_top'); 63 var to_bottom = document.getElementById('to_bottom'); 64 var intervalId, num = 0; 65 // 2. 监听鼠标进入事件 66 // 向上 67 to_top.onmouseover = function (ev1) { 68 // 2.1 清除定时器 69 clearInterval(intervalId); 70 // 2.2 设置定时器 71 intervalId = setInterval(function () { 72 // 步长 73 num -= 10; 74 // 判断 75 if(num > -2466){ 76 pic.style.top = num + 'px'; 77 }else { 78 clearInterval(intervalId) 79 } 80 81 },20); 82 83 }; 84 85 // 向下 86 to_bottom.onmouseover = function (ev1) { 87 // 2.1 清除定时器 88 clearInterval(intervalId); 89 90 // 2.2 设置定时器 91 intervalId = setInterval(function () { 92 // 步长 93 num += 10; 94 95 // 判断 96 if(num <= 0){ 97 pic.style.top = num + 'px'; 98 }else { 99 clearInterval(intervalId) 100 } 101 102 },20); 103 }; 104 105 // 鼠标离开 106 box.onmouseout = function (ev1) { 107 // 清除定时器 108 clearInterval(intervalId) 109 } 110 } 111 </script> 112 </body> 113 </html>
window.onload = function (ev) { // 1. 获取标签 var begin = document.getElementById('begin'); var end = document.getElementById('end'); var name = document.getElementById('name'); // 2. 定义变量 var intervalID = null; var nameArr = ['霍建华', '周杰伦', '刘德华', '宋小宝', '杨幂', '十一郎']; name.innerText = nameArr[0]; // 3. 监听点击 begin.onclick = function (ev1) { clearInterval(intervalID); intervalID = setInterval(function () { // 3.1 随机数 var s_index = parseInt( Math.random()* nameArr.length); console.log(s_index) name.innerText = nameArr[s_index]; }, 1000) }; end.onclick = function (ev1) { clearInterval(intervalID); } }