今天基本上一天都在理工那边的教室里自习，状态还是相当好的，貌似是9点半关门。要是像我们学校一样10点关门就好了。。
上午的时间基本上都在优化homework5，下午稍微用了点时间调homework4。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>homework4</title> 6 <style> 7 html, body{ 8 margin: 0; 9 padding: 0; 10 100%; 11 } 12 ul { 13 margin: 0; 14 padding: 0; 15 list-style: none; 16 } 17 .bg { 18 height: 100vh; 19 100%; 20 display: none; 21 } 22 </style> 23 </head> 24 <body> 25 <!-- 26 /** 27 * 28 * @author: xiaoliu 29 * @type: NO.17-homework4 30 * @data: 2018-01-27 31 * @finished: 2018-01-29 32 * @optimized: 2018-01-31 33 */ 34 --> 35 <ul id="main"> 36 <li class="bg" id="one"></li> 37 <li class="bg" id="two"></li> 38 <li class="bg" id="three"></li> 39 <li class="bg" id="four"></li> 40 <li class="bg" id="five"></li> 41 <li class="bg" id="six"></li> 42 <li class="bg" id="seven"></li> 43 </ul> 44 <script> 45 window.onload = function () { 46 // count用来存放当前显示的li标签 47 var count = 0; 48 var bg = document.getElementsByTagName("li"); 49 // 初始化bgColor 50 bg[0].style.backgroundColor = "red"; 51 bg[1].style.backgroundColor = "orange"; 52 bg[2].style.backgroundColor = "yellow"; 53 bg[3].style.backgroundColor = "green"; 54 bg[4].style.backgroundColor = "cyan"; 55 bg[5].style.backgroundColor = "blue"; 56 bg[6].style.backgroundColor = "purple"; 57 // 显示默认标签 58 // propertypropertyproperty property 59 bg[count].style.display = "block"; 60 window.onmousewheel = function (event) { 61 if (event.wheelDelta < 0 && count < bg.length-1) { 62 // 如果滚轮的值为-120，就把标志往后移1位 63 count++; 64 // console.log("count :" + count) 65 } else if (event.wheelDelta > 0 &&count > 0) { 66 // 如果滚轮的值为120，就把标志往前移1位 67 count--; 68 } 69 70 bg[count].style.display = "block"; 71 for (var i = 0; i < bg.length; i++) { 72 //跳过当前count标志位，不让其none掉 73 //而且i不能超过7，i∈[0, 6] 74 if (i === count) { 75 i++; 76 // console.log("i :" + i) 77 } 78 // 等于7的时候前0~6总共的7个背景已经 79 if (i!= bg.length) { 80 bg[i].style.display = "none"; 81 } 82 } 83 } 84 } 85 </script> 86 </body> 87 </html>
关于这个count和i最后能取到7。。。其实下午卡住了很久，我本想的是不要那么多if的，然而最后还是没办法，i总是能取到7，后面的bg[i].style.display = "none";就总是报错，说越界了第8个元素没有定义。。。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>homewrok5</title> 6 <style> 7 html, body{ 8 margin: 0; 9 padding: 0; 10 100%; 11 } 12 #box { 13 height: 200px; 14 200px; 15 background-color: purple; 16 position: absolute; 17 } 18 </style> 19 </head> 20 <body> 21 <!-- 22 /** 23 * 24 * @author: xiaoliu 25 * @type: NO.17-homework5 26 * @data: 2018-01-29 27 * @finished: 2018-01-30 28 * @optimized: 2018-01-31 29 */ 30 --> 31 <div id="box"></div> 32 <script> 33 window.onload = function () { 34 var box = document.getElementById("box"); 35 box.onmouseover = function () { 36 box.style.backgroundColor = "#210038"; 37 } 38 // MX,MY用来存放鼠标初始值 39 var MX = 0; 40 var MY = 0; 41 // flag用来控制MX,MY只被记录一次 42 var flag = true; 43 // 鼠标被按下 44 box.onmousedown = function (event) { 45 // 源坐标 注意返回0的时候，返回的依然是string 0，而不是number 0， 46 var SL = parseInt(box.style.left == 0? 0: box.style.left); 47 var ST = parseInt(box.style.top == 0? 0: box.style.top); 48 console.log("SL :" + SL + " ST :" + ST) 49 // var SX = event.clientX + "px"; 50 // var SY = event.clientY + "px"; 51 // 首先记录鼠标在box上的相对位置 52 if (flag) { 53 MX = (event.clientX - SL) + "px"; 54 MY = (event.clientY - ST) + "px"; 55 flag = false; 56 } 57 // console.log(SL) 58 // console.log(ST) 59 // console.log(SX) 60 // console.log(SY) 61 box.onmousemove = function (event) { 62 // 目的坐标 63 var DX = event.clientX - parseInt(MX); 64 var DY = event.clientY - parseInt(MY); 65 box.style.left = DX + "px"; 66 box.style.top = DY + "px"; 67 /*console.log("MX = " + MX + " MY = " + MY) 68 console.log("DX = " + DX + " DY = " + DY)*/ 69 // 鼠标被抬起 70 box.onmouseup = function () { 71 flag = true; //改回true，以便下一次移动鼠标时重新定位MX,MY 72 // 鼠标抬起后，把box的坐标写死，不再随鼠标移动 73 box.onmousemove = function (event) { 74 box.style.left = DX + "px"; 75 box.style.top = DY + "px"; 76 } 77 } 78 } 79 } 80 box.onmouseout = function () { 81 box.style.backgroundColor = "purple"; 82 } 83 } 84 </script> 85 </body> 86 </html>
其实这里是没有搞懂的，不过为了做这个动画效果，用js真的相当复杂，应该是可以用canvas来做一个动画的，但是无奈才疏学浅，用js来写，特别是这个.left非常麻烦，强转的时候总是报NaN，不明白为什么，其实自己写了一段调试程序也是这个box.style.left第一次输出来就是空的，就算是CSS给它设定了left值，最后你用js输出来就是空的，不明白为什么。。。。。。。
总之就是非常坎坷的一天，终于是实现了这个鼠标拖拽移动，尽管有相当多的细节bug，比如鼠标移动快一点就会出现脱离box的情况，鼠标比box移动的更快，就跟不上box了，小毛病特别多。。。
相比于昨天好了很多，今天起码上午、下午、晚上都去自习室了，不过希望明天晚上回家的时候，能先先写完博客再去哔哩哔哩上看相声的。。。无奈自己总是抓不住最要紧的事儿。。。。。