小刘同学的第三十九篇博文

2018-06-24 01:28:20来源：未知阅读 ()

　　今天基本上一天都在理工那边的教室里自习，状态还是相当好的，貌似是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             width: 100%;
11         }
12         ul {
13             margin: 0;
14             padding: 0;
15             list-style: none;
16         }
17         .bg {
18             height: 100vh;
19             width: 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             width: 100%;
11         }
12         #box {
13             height: 200px;
14             width: 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输出来就是空的，不明白为什么。。。。。。。