1.练习Date和鼠标事件的使用
题目：
解答：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form>
<p>
<span id = "me">上午好! </span><input id="time" type="text" name="time">
</p>
</form>
</body>
<script type="text/javascript">
var me = document.getElementById('me');
var time = document.getElementById('time');
var nowDate;
var nowTime;
function setNowDate() {
let date = new Date();
if(date.getHours()>12)me.innerHTML="下午好! ";
else me.innerHTML="上午好! ";
time.value = date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日";
}
function setNowTime() {
let date = new Date();
let hour = date.getHours();
let min = date.getMinutes();
let sec = date.getSeconds();
if(hour>12)me.innerHTML="下午好! ";
else me.innerHTML="上午好! ";
let s = "AM";
if(hour>12){
s = "PM";
hour -= 12;
}
let newTime =
(hour < 10? '0' + hour : hour) + ':' +
(min < 10? '0' + min : min) + ':' +
(sec < 10? '0' + sec : sec) + " " + s;
time.value = newTime;
}
onload = function () {
nowDate = setInterval(setNowDate,10);
}
time.onmouseover = function () {
console.log("over");
nowTime = setInterval(setNowTime,10);
clearInterval(nowDate);
}
time.onmouseout = function () {
console.log("out");
nowDate = setInterval(setNowDate,10);
clearInterval(nowTime);
}
</script>
</html>
知识点：
- span不换行，因此可以与input框一起
坑点：
- setInterval(function,time)函数感觉是开一个新的进程，并返回该进程的id，当执行nowDate = setInterval(setNowDate,10);时，实际上是nowDate指向了另一个新进程的id，而原先的进程仍在进行，因此代码中如果初始时让
var nowDate = setInterval(setNowDate,10);，那么在onload函数中需要改成这样：
onload = function () {
clearInterval(nowDate); // 清除初始化的setNowDate进程
nowDate = setInterval(setNowDate,10); // 如果没有前面一行的话此时就创建了两个setNowDate进程，而此时变量nowDate就是第二个进程的id，而第一个进程已经失去跟踪了，这样在后面执行clearInterval(nowDate)后，仍然会有一个setNowDate进程在运行，导致time和date交替显示
}
2.菜单栏切换显示不同的登录页面
题目：
成果：
知识点：
- 验证码
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#code1{
width: 40px;
height: 40px;
font-size: 18px;
line-height: 30px;
text-align: center;
color: #333;
border: 1px solid red;
}
#code2{
width: 40px;
height: 40px;
font-size: 18px;
line-height: 30px;
text-align: center;
color: #333;
border: 1px solid red;
}
#code3{
width: 40px;
height: 40px;
font-size: 18px;
line-height: 30px;
text-align: center;
color: #333;
border: 1px solid red;
}
</style>
</head>
<body>
<div>
<table border=1>
<th style="width: 190px;height: 40px"><button id="alpa-btn" style="width: 190px;height: 40px;font-size: large;color: cornflowerblue;cursor: pointer">注册字母邮箱</button></th>
<th style="width: 190px;height: 40px"><button id="phone-btn" style="width: 190px;height: 40px;font-size: large;color: cornflowerblue;cursor: pointer">注册手机号邮箱</button></th>
<th style="width: 190px;height: 40px"><button id="vip-btn" style="width: 190px;height: 40px;font-size: large;color: cornflowerblue;cursor: pointer">注册VIP邮箱</button></th>
</table>
<div id="alpa" style="margin-top: 20px;display: none">
<form>
<div>
<label>邮件地址</label>
<span><input type="email" style="width: 297px" placeholder="建议用手机号注册"> @ <select>
<option value="163"><b>163.com</b></option>
<option value="163"><b>qq.com</b></option>
<option value="163"><b>126.com</b></option>
</select></span>
<p style="font-size: xx-small;margin-top: 2px;color: gray">                    6~18个字符，仅可使用字母</p>
</div>
<div>
<label>      密码</label>
<input type="password" style="width: 400px">
<p style="font-size: xx-small;margin-top: 2px;color: gray">                    6~16个字符，区分大小写</p>
</div>
<div>
<label>确认密码</label>
<input type="password" style="width: 400px">
<p style="font-size: xx-small;margin-top: 2px;color: gray">                    请再次填写密码</p>
</div>
<div>
<label>   验证码</label>
<span><input type="text" style="width: 197px"> <span id="code1"></span><span id="change1" style="color: red;cursor: pointer;">  看不清楚？换张图片</span></span>
<p style="font-size: xx-small;margin-top: 2px;color: gray">                    请填写图片中的字符，不区分大小写</p>
</div>
<div>
             <input type="checkbox"><span>同意"<span style="color: blue">服务条款</span>"和“<span style="color: blue">隐私相关政策</span>"</span>
</div>
<div>
              <button style="background-color:green;color: white;width: 120px;height: 43px;margin-top: 12px;font-size: large;cursor: pointer">立即注册</button>
</div>
</form>
</div>
<div id="phone" style="margin-top: 20px;display: none">
<form>
<div>
<label>邮件地址</label>
<span><input type="email" style="width: 297px" placeholder="建议用手机号注册"> @ <select>
<option value="163"><b>163.com</b></option>
<option value="163"><b>qq.com</b></option>
<option value="163"><b>126.com</b></option>
</select></span>
<p style="font-size: xx-small;margin-top: 2px;color: gray">                    6~18个字符，可使用字幕、数字、下划线、需以字母开头</p>
</div>
<div>
<label>   手机号</label>
<span><input type="number" style="width: 400px"></span>
<p style="font-size: xx-small;margin-top: 2px;color: gray">                    11位数字</p>
</div>
<div>
<label>      密码</label>
<input type="password" style="width: 400px">
<p style="font-size: xx-small;margin-top: 2px;color: gray">                    6~16个字符，区分大小写</p>
</div>
<div>
<label>确认密码</label>
<input type="password" style="width: 400px">
<p style="font-size: xx-small;margin-top: 2px;color: gray">                    请再次填写密码</p>
</div>
<div>
<label>   验证码</label>
<span><input type="text" style="width: 197px"> <span id="code2"></span><span id="change2" style="color: red;cursor: pointer;">  看不清楚？换张图片</span></span>
<p style="font-size: xx-small;margin-top: 2px;color: gray">                    请填写图片中的字符，不区分大小写</p>
</div>
<div>
             <input type="checkbox"><span>同意"<span style="color: blue">服务条款</span>"和“<span style="color: blue">隐私相关政策</span>"</span>
</div>
<div>
              <button style="background-color:green;color: white;width: 120px;height: 43px;margin-top: 12px;font-size: large;cursor: pointer">立即注册</button>
</div>
</form>
</div>
<div id="vip" style="margin-top: 20px">
<form>
<div>
<label>邮件地址</label>
<span><input type="email" style="width: 297px" placeholder="建议用手机号注册"> @ <select>
<option value="163"><b>163.com</b></option>
<option value="163"><b>qq.com</b></option>
<option value="163"><b>126.com</b></option>
</select></span>
<p style="font-size: xx-small;margin-top: 2px;color: gray">                    6~18个字符，可使用字幕、数字、下划线、需以字母开头</p>
</div>
<div>
<label>      密码</label>
<input type="password" style="width: 400px">
<p style="font-size: xx-small;margin-top: 2px;color: gray">                    6~16个字符，区分大小写</p>
</div>
<div>
<label>确认密码</label>
<input type="password" style="width: 400px">
<p style="font-size: xx-small;margin-top: 2px;color: gray">                    请再次填写密码</p>
</div>
<div>
<label>   验证码</label>
<span><input type="text" style="width: 197px"> <span id="code3"></span><span id="change3" style="color: red;cursor: pointer;">  看不清楚？换张图片</span></span>
<p style="font-size: xx-small;margin-top: 2px;color: gray">                    请填写图片中的字符，不区分大小写</p>
</div>
<div>
             <input type="checkbox"><span>同意"<span style="color: blue">服务条款</span>"和“<span style="color: blue">隐私相关政策</span>"</span>
</div>
<div>
              <button style="background-color:green;color: white;width: 120px;height: 43px;margin-top: 12px;font-size: large;cursor: pointer">立即注册</button>
</div>
</form>
</div>
</div>
</body>
<script>
var vipBtn = document.getElementById('vip-btn');
var vip = document.getElementById('vip');
var alpaBtn = document.getElementById('alpa-btn');
var alpa = document.getElementById('alpa');
var phoneBtn = document.getElementById('phone-btn');
var phone = document.getElementById('phone');
vipBtn.onclick = function () {
alpa.style.display = "none";
vip.style.display = "block";
phone.style.display = "none";
vipBtn.style.backgroundColor = "orange";
alpaBtn.style.backgroundColor = "white";
phoneBtn.style.backgroundColor = "white";
}
alpaBtn.onclick = function (){
alpa.style.display = "block";
vip.style.display = "none";
phone.style.display = "none";
vipBtn.style.backgroundColor = "white";
alpaBtn.style.backgroundColor = "orange";
phoneBtn.style.backgroundColor = "white";
}
phoneBtn.onclick = function (){
alpa.style.display = "none";
vip.style.display = "none";
phone.style.display = "block";
vipBtn.style.backgroundColor = "white";
alpaBtn.style.backgroundColor = "white";
phoneBtn.style.backgroundColor = "orange";
}
//二维码
var codeStr = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
var oDiv1 = document.getElementById('code1');
var change1 = document.getElementById('change1');
var oDiv2 = document.getElementById('code2');
var change2 = document.getElementById('change2');
var oDiv3 = document.getElementById('code3');
var change3 = document.getElementById('change3');
// 用来生成随机整数
function getRandom(n, m) { // param: (Number, Number)
n = Number(n);
m = Number(m);
// 确保 m 始终大于 n
if (n > m) {
var temp = n;
n = m;
m = temp;
}
// 下有详细说明
return Math.floor(Math.random()*(m - n) + n);
}
// 将随机生成的整数下标对应的字母放入div中
function getCode() {
var str = '';
// 验证码有几位就循环几次
for (var i = 0;i < 4;i ++) {
var ran = getRandom(0, 62);
str += codeStr.charAt(ran);
}
oDiv1.innerHTML = str;
oDiv2.innerHTML = str;
oDiv3.innerHTML = str;
}
getCode();// 调用函数，页面刷新也会刷新验证码
// 点击刷新验证码
change1.onclick = function(){
getCode();
}
change2.onclick = function(){
getCode();
}
change3.onclick = function(){
getCode();
}
</script>
</html>
3.实现日历功能，鼠标移动到某月，显示计划内容
题目：
成果：
知识点：
- 多个div在同一行：display: inline-block，每三个div之间用< br >隔开就行
- 用循环为getElementsByClassName获得的元素添加事件
- mouse[i].onclidk=function(){}中的this就是mouse[i]
- 获取某个标签中的子节点可以用this.getElementsByTagName('标签类型（如div，p......)')[2]，用getElementsByName等应该也行
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.font{
text-align: center;
color: white;
font-size: 27px;
padding-top: 6px;
font-weight: bolder;
}
.bottom-block{
background-color: beige;
width: 345px;
height: 160px;
}
.font-bottom{
text-align: center;
color: white;
font-size: 20px;
}
.block{
background-color: #333333;
}
.text-block{
background-color: azure;
margin: 20px;
border: 3px solid white;
height: 120px;
}
.text-block-top-text{
font-weight: bolder;
margin-top: 13px;
margin-left: 14px;
color: #333333;
font-size: larger;
}
.text-block-bottom-text{
margin-top: 13px;
margin-left: 15px;
margin-right: 15px;
color: #333333;
}
</style>
</head>
<body>
<div style="background-color: beige;width: 345px;height: 430px">
<div class="month block" id="1" style="border: 1px solid black;width: 80px;height: 80px;margin-top: 20px;margin-left: 20px;display: inline-block">
<div class="font">1</div>
<div class="font-bottom">JAN</div>
</div>
<div class="month block" id="2" style="border: 1px solid black;width: 80px;height: 80px;margin-top: 20px;margin-left: 20px;display: inline-block">
<div class="font">2</div>
<div class="font-bottom">FER</div>
</div>
<div class="month block" id="3" style="border: 1px solid black;width: 80px;height: 80px;margin-top: 20px;margin-left: 20px;display: inline-block">
<div class="font">3</div>
<div class="font-bottom">MAR</div>
</div>
<br>
<div class="month block" id="4" style="border: 1px solid black;width: 80px;height: 80px;margin-top: 20px;margin-left: 20px;display: inline-block">
<div class="font">4</div>
<div class="font-bottom">APR</div>
</div>
<div class="month block" id="5" style="border: 1px solid black;width: 80px;height: 80px;margin-top: 20px;margin-left: 20px;display: inline-block">
<div class="font">5</div>
<div class="font-bottom">MAY</div>
</div>
<div class="month block" id="6" style="border: 1px solid black;width: 80px;height: 80px;margin-top: 20px;margin-left: 20px;display: inline-block">
<div class="font">6</div>
<div class="font-bottom">JUN</div>
</div>
<br>
<div class="month block" id="7" style="border: 1px solid black;width: 80px;height: 80px;margin-top: 20px;margin-left: 20px;display: inline-block">
<div class="font">7</div>
<div class="font-bottom">JUL</div>
</div>
<div class="month block" id="8" style="border: 1px solid black;width: 80px;height: 80px;margin-top: 20px;margin-left: 20px;display: inline-block">
<div class="font">8</div>
<div class="font-bottom">AUG</div>
</div>
<div class="month block" id="9" style="border: 1px solid black;width: 80px;height: 80px;margin-top: 20px;margin-left: 20px;display: inline-block">
<div class="font">9</div>
<div class="font-bottom">SEP</div>
</div>
<br>
<div class="month block" id="10" style="border: 1px solid black;width: 80px;height: 80px;margin-top: 20px;margin-left: 20px;display: inline-block">
<div class="font">10</div>
<div class="font-bottom">OCT</div>
</div>
<div class="month block" id="11" style="border: 1px solid black;width: 80px;height: 80px;margin-top: 20px;margin-left: 20px;display: inline-block">
<div class="font">11</div>
<div class="font-bottom">NOV</div>
</div>
<div class="month block" id="12" style="border: 1px solid black;width: 80px;height: 80px;margin-top: 20px;margin-left: 20px;display: inline-block">
<div class="font">12</div>
<div class="font-bottom">DEC</div>
</div>
<br>
<div class="bottom-block">
<div class="text-block">
<div id="top_text" class="text-block-top-text">10月活动</div>
<div id="bottom_text" class="text-block-bottom-text">十月假期要内卷起来了，2023还有90天</div>
</div>
</div>
</div>
</body>
<script>
var months = document.getElementsByClassName('month');
var top_text = document.getElementById('top_text');
var bottom_text = document.getElementById('bottom_text');
for (let i = 0; i < months.length; i++) {
months[i].onmouseover = function () {
let msg1 = this.id + "月活动";
let mth = new Array("一","二","三","四","五","六","七","八","九","十","十一","十二");
let day = (13-this.id)*30;
let msg2 = mth[this.id-1] + "月假期要内卷起来了，2023还有" + day + "天";
top_text.innerHTML=msg1;
bottom_text.innerHTML=msg2;
this.style.backgroundColor="white";
this.getElementsByTagName('div')[0].style.color="deeppink";
this.getElementsByTagName('div')[1].style.color="deeppink";
}
months[i].onmouseout = function () {
this.style.backgroundColor="#333333";
this.getElementsByTagName('div')[0].style.color="white";
this.getElementsByTagName('div')[1].style.color="white";
}
}
</script>
</html>
Comments