详情页

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="建议用手机号注册">&nbsp@&nbsp<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">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp6~18个字符，仅可使用字母</p>
            </div>
            <div>
                <label>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp密码</label>
                <input type="password" style="width: 400px">
                <p style="font-size: xx-small;margin-top: 2px;color: gray">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp6~16个字符，区分大小写</p>
            </div>
            <div>
                <label>确认密码</label>
                <input type="password" style="width: 400px">
                <p style="font-size: xx-small;margin-top: 2px;color: gray">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp请再次填写密码</p>
            </div>
            <div>
                <label>&nbsp&nbsp&nbsp验证码</label>
                <span><input type="text" style="width: 197px">&nbsp<span id="code1"></span><span id="change1" style="color: red;cursor: pointer;">&nbsp&nbsp看不清楚？换张图片</span></span>
                <p style="font-size: xx-small;margin-top: 2px;color: gray">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp请填写图片中的字符，不区分大小写</p>
            </div>
            <div>
                &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<input type="checkbox"><span>同意"<span style="color: blue">服务条款</span>"和“<span style="color: blue">隐私相关政策</span>"</span>
            </div>
            <div>
                &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<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="建议用手机号注册">&nbsp@&nbsp<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">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp6~18个字符，可使用字幕、数字、下划线、需以字母开头</p>
            </div>
            <div>
                <label>&nbsp&nbsp&nbsp手机号</label>
                <span><input type="number" style="width: 400px"></span>
                <p style="font-size: xx-small;margin-top: 2px;color: gray">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp11位数字</p>
            </div>
            <div>
                <label>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp密码</label>
                <input type="password" style="width: 400px">
                <p style="font-size: xx-small;margin-top: 2px;color: gray">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp6~16个字符，区分大小写</p>
            </div>
            <div>
                <label>确认密码</label>
                <input type="password" style="width: 400px">
                <p style="font-size: xx-small;margin-top: 2px;color: gray">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp请再次填写密码</p>
            </div>
            <div>
                <label>&nbsp&nbsp&nbsp验证码</label>
                <span><input type="text" style="width: 197px">&nbsp<span id="code2"></span><span id="change2" style="color: red;cursor: pointer;">&nbsp&nbsp看不清楚？换张图片</span></span>
                <p style="font-size: xx-small;margin-top: 2px;color: gray">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp请填写图片中的字符，不区分大小写</p>
            </div>
            <div>
                &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<input type="checkbox"><span>同意"<span style="color: blue">服务条款</span>"和“<span style="color: blue">隐私相关政策</span>"</span>
            </div>
            <div>
                &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<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="建议用手机号注册">&nbsp@&nbsp<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">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp6~18个字符，可使用字幕、数字、下划线、需以字母开头</p>
            </div>
            <div>
                <label>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp密码</label>
                <input type="password" style="width: 400px">
                <p style="font-size: xx-small;margin-top: 2px;color: gray">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp6~16个字符，区分大小写</p>
            </div>
            <div>
                <label>确认密码</label>
                <input type="password" style="width: 400px">
                <p style="font-size: xx-small;margin-top: 2px;color: gray">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp请再次填写密码</p>
            </div>
            <div>
                <label>&nbsp&nbsp&nbsp验证码</label>
                <span><input type="text" style="width: 197px">&nbsp<span id="code3"></span><span id="change3" style="color: red;cursor: pointer;">&nbsp&nbsp看不清楚？换张图片</span></span>
                <p style="font-size: xx-small;margin-top: 2px;color: gray">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp请填写图片中的字符，不区分大小写</p>
            </div>
            <div>
                &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<input type="checkbox"><span>同意"<span style="color: blue">服务条款</span>"和“<span style="color: blue">隐私相关政策</span>"</span>
            </div>
            <div>
                &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<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>

JS作业

1.练习Date和鼠标事件的使用

2.菜单栏切换显示不同的登录页面

3.实现日历功能，鼠标移动到某月，显示计划内容

Comments