hooyantsing's Blog

第57次课程

字数统计: 2.2k阅读时长: 12 min
2019/09/12

源辰74班

第57次课程

09.12.2019

内容

DOM技术[廖彦]

1.[案例]美女时钟

**1d94820fdffe1f859c660160b5c818fb.png

**

Time.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
#girltime{
    position:relative;
    display:inline-block;
    font-size:20px;
    color:white;
    font-family: 微软雅黑;
    /*left:-620px;
    top:-280px;
    transform:rotate(-90deg);*/
}
</style>
</head>
<body>
    <!-- 标题时间表 -->
    <div id="time"  style="text-align:center;"></div>
    <!-- 下拉菜单 -->
    <div>
       <select onchange="yearChange()"  id="year">
           <option value="2019">2019年</option>
           <option value="2018">2018年</option>
           <option value="2017">2017年</option>
       </select>
    </div>
    
    <div >
       <!-- 图片 -->
       <img id="girlImg"/><!--  src="girltime1.jpg" -->
       <!-- 时间板 -->
       <label id="girltime"></label>
    </div>
    
<script type="text/javascript">
    function Demo1(){
       //创建日期
       var date = new Date();
       var txt = "";
       
       //获取年    
       //.getYear() 获取从1900年开始至今已过年总计  
       //.getFullYear() 获取当前年份
       txt += date.getFullYear() + "年";
       //获取月
       txt += date.getMonth() + "月";
       //获取日
       txt += date.getDate() + "日";
       //获取星期
       txt += "星期"+date.getDay() + " ";
       //获取小时
       txt += date.getHours() + "时";
       //获取分钟
       txt += date.getMinutes() + "分";
       //获取秒
       txt += date.getSeconds() + "秒";
       
       /*
       innerText 与  innerHTML 区别:
       例如,遇到
(HTML换行符)时,
           innerText直接将其打印出来"
";
           innerHTML则执行换行。
       */
       time.innerText = txt;
       /*
       不推荐直接写id,存在不同浏览器兼容系问题,指向不明的风险。
       应使用document将HTML文档读进内存,创建对象,通过此对象的方法获取子结点。
       推荐写为:document.getElementById("time");
       */
    }
    
    function Demo2(){
       /*
       与Demo2区别在于,新增了每1秒自动刷新时间
       通过setTimeout()方法实现。
       */
       var date = new Date();
       var txt = "";
       var weeks = ["日","一","二","三","四","五","六"];
       txt += date.getFullYear() + "年";
       txt += date.getMonth() + "月";
       txt += date.getDate() + "日";
       txt += "星期"+weeks[date.getDay()] +  " ";
       txt += date.getHours() + "时";
       txt += date.getMinutes() + "分";
       txt += date.getSeconds() + "秒";
       time.innerText = txt;
       //实现自动刷新
       setTimeout("Demo1()",1000);
    }
    
    function setGirlTime(){
       var date = new Date();
       var txt = "";
       var weeks = ["日","一","二","三","四","五","六"];
       txt += "星期"+weeks[date.getDay()] +  "
";
       txt += date.getHours() + ":";
       txt += date.getMinutes() + ":";
       txt += date.getSeconds();
       /*
       document对象及其方法的使用:
       */
       var girltime =  document.getElementById("girltime");
       
       girltime.innerHTML = txt;
       setTimeout(setGirlTime,1000);
    }
    
    function yearChange(){
       /*
       通过js设置css参数
       */
       var yearSelect =  document.getElementById("year");
       //获取下拉菜单所有选项,放入数组
       var options = yearSelect.options;
       //通过获取下拉菜单的索引值,从数组中找到对应的选项
       var selectOption =  options[yearSelect.selectedIndex];
       
       //获取HTML里的图片对象
       var girlImg =  document.getElementById("girlImg");
       //获取HTML里的时间板对象
       var girltime =  document.getElementById("girltime");
       
       //2019
       if(yearSelect.selectedIndex==0){
           //设置图片对象的src路径
           girlImg.src = "girltime1.jpg";
           girltime.style.top = "-280px";
           girltime.style.left = "-620px";
           //设置旋转角度
           girltime.style.transform =  "rotate(-6deg)";
       }
       //2018
       else  if(yearSelect.selectedIndex==1){
           girlImg.src = "girltime.png";
           girltime.style.top = "-174px";
           girltime.style.left = "-336px";
           girltime.style.transform =  "rotate(20deg)";      
       }
       //2017
       else  if(yearSelect.selectedIndex==2){
           girlImg.src = "girltime.jpg";
           girltime.style.top = "-430px";
           girltime.style.left = "-400px";
           girltime.style.transform =  "rotate(36deg)";
       }
    }
    
    /*=================================================*/
    /*  美女时钟的完整实现  */
    //偏移量
    var offsetTime;
    /*
    不同年份设置不同的图片和时间板的位置
    更改时间
    */
    function yearChange(){
       /*
       不同年份设置不同的图片和时间板的位置
       通过js设置css参数
       */
       var yearSelect =  document.getElementById("year");
       var options = yearSelect.options;
       var girlImg =  document.getElementById("girlImg");
       var girltime =  document.getElementById("girltime");
       if(yearSelect.selectedIndex==0){
           girlImg.src = "girltime1.jpg";
           girltime.style.top = "-280px";
           girltime.style.left = "-620px";
           girltime.style.transform =  "rotate(-6deg)";
       }else  if(yearSelect.selectedIndex==1){
           girlImg.src = "girltime.png";
           girltime.style.top = "-174px";
           girltime.style.left = "-336px";
           girltime.style.transform =  "rotate(20deg)";
       }else  if(yearSelect.selectedIndex==2){
           girlImg.src = "girltime.jpg";
           girltime.style.top = "-430px";
           girltime.style.left = "-400px";
           girltime.style.transform =  "rotate(36deg)";
       }
       
       /*
       更改时间
       */
       var date = new Date();
       //[1]获取现在时间戳 (毫秒)
       var nowTime = date.getTime();
       var selectOption =  options[yearSelect.selectedIndex];
       //获取想要查询的年份
       var intYear =  parseInt(selectOption.value);
       //将获取到的年份设置到date里
       date.setFullYear(intYear);
       //[2]获取修改后的时间戳
       var changeTime = date.getTime();
       //计算时间偏移量
       offsetTime = changeTime - nowTime;   
    }
    
    function setGirlTime(){
       var date = new Date();
       if(offsetTime){
           var nowTime = date.getTime();
           //重新计算时间戳
           var curTime = nowTime +  offsetTime;
           //重写设置到日期对象中
           date.setTime(curTime);
       }
       var txt = "";
       var weeks = ["日","一","二","三","四","五","六"];
       txt += "星期"+weeks[date.getDay()] +  "
";
       txt += date.getHours() + ":";
       txt += date.getMinutes() + ":";
       txt += date.getSeconds();
       var girltime =  document.getElementById("girltime");
       girltime.innerHTML = txt;
       setTimeout(setGirlTime,1000);
    }
    
    //控制台
    Demo1();
    yearChange();
    setGirlTime();
    
</script>
</body>
</html>

2.[作业]

**a4a16ac5dd3b245f9892dbf415c74145.png

**

TimeTask.html    version:20190915

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
    body{
       text-align:center;
    }
    img{
       margin-top:20px;
    }
    #girltime{
       position:relative;
       display:inline-block;
       font-size:20px;
       color:white;
       font-family: 微软雅黑;
    }
</style>
</head>
<body>
    <h3>美女时钟 version:20190915</h3>
    <div>
       <select id="year">
           <option  value="2019">2019</option>
           <option  value="2018">2018</option>
           <option  value="2017">2017</option>
       </select>
       <span>年</span>
       <select id="month"  onchange="dayList()">
           <!-- monthList()自动生成 -->
       </select>
       <span>月</span>
       <select id="day">
           <!-- monthList()自动生成 -->
       </select>
       <span>日</span>
       <select id="hour">
           <!-- monthList()自动生成 -->
       </select>
       <span>时</span>
       <select id="minute">
           <!-- monthList()自动生成 -->
       </select>
       <span>分</span>
       <select id="second">
           <!-- monthList()自动生成 -->
       </select>
       <span>秒</span>
       <button onclick = "yearChange()">查询</button>
    </div>
    <div >
       <img id="girlImg"/>
       <label id="girltime"></label>
    </div>
    
    
    <script>
    
    function monthList(){
       var monthSelect =  document.getElementById("month");
       var monthOptions =  monthSelect.options;
       for(var i=1;i<=12;i++){   
           monthOptions.add(new  Option(i,i));
       }
    }
    function dayList(){
       var monthSelect =  document.getElementById("month");
       var monthoptions =  monthSelect.options;
       var monthselectOption =  monthoptions[monthSelect.selectedIndex];
       var intMonth =  parseInt(monthselectOption.value);
       
       var daySelect =  document.getElementById("day");
       var dayOptions = daySelect.options;
       
       if(intMonth==2){
           for(var i=1;i<=28;i++){   
               dayOptions.add(new  Option(i,i));
           }
       }else  if(intMonth==1||intMonth==3||intMonth==5||intMonth==7
               ||intMonth==8||intMonth==10||intMonth==12){
           for(var i=1;i<=31;i++){   
               dayOptions.add(new  Option(i,i));
           }
       }else {
           for(var i=1;i<=30;i++){   
               dayOptions.add(new  Option(i,i));
           }
       }
       
    }
    
    function hourList(){
       var hourSelect =  document.getElementById("hour");
       var hourOptions =  hourSelect.options;
       for(var i=1;i<=24;i++){   
           hourOptions.add(new Option(i,i));
       }
    }
    
    function minuteList(){
       var minuteSelect =  document.getElementById("minute");
       var minuteOptions =  minuteSelect.options;
       for(var i=1;i<=60;i++){   
           minuteOptions.add(new  Option(i,i));
       }
    }
    function secondList(){
       var minuteSelect =  document.getElementById("second");
       var minuteOptions =  minuteSelect.options;
       for(var i=1;i<=60;i++){   
           minuteOptions.add(new  Option(i,i));
       }
    }
    
    var offsetTime;
    function yearChange(){
       var yearSelect =  document.getElementById("year");
       var options = yearSelect.options;
       
       var girlImg =  document.getElementById("girlImg");
       var girltime =  document.getElementById("girltime");
       if(yearSelect.selectedIndex==0){
           girlImg.src = "girltime1.jpg";
           girltime.style.top = "-280px";
           girltime.style.left = "-620px";
           girltime.style.transform =  "rotate(-6deg)";
       }else  if(yearSelect.selectedIndex==1){
           girlImg.src = "girltime.png";
           girltime.style.top = "-174px";
           girltime.style.left = "-336px";
           girltime.style.transform =  "rotate(20deg)";
       }else  if(yearSelect.selectedIndex==2){
           girlImg.src = "girltime.jpg";
           girltime.style.top = "-430px";
           girltime.style.left = "-400px";
           girltime.style.transform =  "rotate(36deg)";
       }
       //Year
       var selectOption =  options[yearSelect.selectedIndex];
       var intYear =  parseInt(selectOption.value);
       //Month
       var monthSelect =  document.getElementById("month");
       var monthoptions =  monthSelect.options;
       var monthselectOption =  monthoptions[monthSelect.selectedIndex];
       var intMonth =  parseInt(monthselectOption.value);
       //Day
       var daySelect =  document.getElementById("day");
       var dayoptions = daySelect.options;
       var dayselectOption =  dayoptions[daySelect.selectedIndex];
       var intDay =  parseInt(dayselectOption.value);
       //Hour
       var hourSelect =  document.getElementById("hour");
       var houroptions =  hourSelect.options;
       var hourselectOption =  houroptions[hourSelect.selectedIndex];
       var intHour =  parseInt(hourselectOption.value);
       //Minute
       var minuteSelect =  document.getElementById("minute");
       var minuteoptions =  minuteSelect.options;
       var minuteselectOption =  minuteoptions[minuteSelect.selectedIndex];
       var intMinute =  parseInt(minuteselectOption.value);
       //Second
       var secondSelect =  document.getElementById("second");
       var secondoptions =  secondSelect.options;
       var secondselectOption =  secondoptions[secondSelect.selectedIndex];
       var intSecond =  parseInt(secondselectOption.value);
       
       var date = new Date();
       var nowTime = date.getTime();
       
       date.setFullYear(intYear);
       date.setMonth(intMonth-1);
       date.setDate(intDay);
       date.setHours(intHour);
       date.setMinutes(intMinute);
       date.setSeconds(intSecond);
       
       var changeTime = date.getTime();
       offsetTime = changeTime - nowTime;   
    }
    
    function setGirlTime(){
       var date = new Date();
       if(offsetTime){
           var nowTime = date.getTime();
           var curTime = nowTime +  offsetTime;
           date.setTime(curTime);
       }
       var txt = "";
       var weeks = ["日","一","二","三","四","五","六"];
       var doubleTime =  ["00","01","02","03","04","05","06","07","08","09"];
       txt += "星期"+weeks[date.getDay()] +  "
";
       if(date.getHours()<10){
           txt +=  doubleTime[date.getHours()] + ":";
       }else{
           txt += date.getHours() + ":";
       }
       if(date.getMinutes()<10){
           txt +=  doubleTime[date.getMinutes()] + ":";
       }else{
           txt += date.getMinutes() + ":";
       }
       if(date.getSeconds()<10){
           txt +=  doubleTime[date.getSeconds()];
       }else{
           txt += date.getSeconds();
       }
       var girltime =  document.getElementById("girltime");
       girltime.innerHTML = txt;
       setTimeout(setGirlTime,1000);
    }
    
    
    //控制台
    monthList();
    hourList();
    minuteList();
    secondList();
    setGirlTime();
    
    
    </script>
</body>
</html>
CATALOG