Hello friend, I'm Ritchie|
收藏闪存小组博问

Ritchie里其

园龄：2年6个月粉丝：4关注：7

练习题13-JS

1. 登录验证

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <form action="08-登录成功界面.html" method="get" onsubmit="return login()">
        <div id="tv_msg"></div>
        <p>用户<input type="text" name="" id="tv_uname"></p>
        <p>密码<input type="text" name="" id="tv_upwd"></p>
        <p>
            <input type="submit" name="" id="" value="登录">
        </p>
    </form>
    <script>
        function login(){
            //根据标签获取节点对象 根据节点获取值
            var uname = document.getElementById("tv_uname").value;
            if(uname == null || uname == "") {
                document.getElementById("tv_msg").innerHTML="请输入用户名";
                return false;
            }
            var upwd = document.getElementById("tv_upwd").value;
            if(upwd == null || upwd == "") {
                document.getElementById("tv+msg").innerHTML="请输入密码";
                return false;
            }
            return true;
        }
    </script>
</body>
</html>

2. 全选反选全不选

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        td{
            text-align: center;
        }
    </style>
</head>
<body>
    <div>
        <input type="button" name="" id="" value="全选" onclick="selectAll()"/>
        <input type="button" name="" id="" value="全不选" onclick="selectNot()"/>
        <input type="button" name="" id="" value="反选" onclick="reverse()"/>
    </div>
 
    <table border="1px" width="70%" align="center" cellpadding="1px" cellspacing="1px">
        <tr>
            <th>选择</th>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td><input type="checkbox" name="" id="" class="tv_class"></td>
            <td>0001</td>
            <td>张三</td>
            <td>18</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="" id="" class="tv_class"></td>
            <td>0002</td>
            <td>李四</td>
            <td>19</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="" id="" class="tv_class"></td>
            <td>0003</td>
            <td>王五</td>
            <td>20</td>
        </tr>
    </table>
 
    <script>
        function selectAll() {
            var arrays = document.getElementsByClassName("tv_class");
            for(var i = 0; i< arrays.length; i++) {
                arrays[i].checked=true;
            }
        }
 
        function selectNot() {
            var arrays = document.getElementsByClassName("tv_class");
            for(var i = 0; i< arrays.length; i++) {
                arrays[i].checked=false;
            }
        }
 
        function reverse() {
            var arrays = document.getElementsByClassName("tv_class");
            for(var i = 0; i< arrays.length; i++) {
                arrays[i].checked=!arrays[i].checked;
            }
        }
    </script>
</body>
</html>
3. 轮播图
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <img src="img/xxx_01.jpg" id="tv_img"/>
    <script>
        //定义一个变量记录序号
        var v = 1;
        function changeImg() {
            if(v < 3){
                v++;
            }else {
                v=1;
            }
            document.getElementById("tv_img").src="img/xxx_0"+v+".jpg";
        }
        setInterval("changeImg()",1000);
    </script>
</body>
</html>
4. 时钟
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="tv_div"></div>
    <script>
        window.onload = showTime();
        function showTime() {
            //实例化Date对象
            var d = new Date();
            //获取时分秒
            var h = d.getHours();
            var m = d.getMinutes();
            var s = d.getSeconds();
 
            if(s<10){
                s="0"+ s;
            }
            var t = h+":"+m+":"+s;
            document.getElementById("tv_div").innerHTML=t;
        }
        setInterval("showTime()",1000);
    </script>
</body>
</html>

5. 请认真阅读60秒

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
    <input type="button" name="" id="btn" value="点击开始阅读"/>
    <script>
        var time = 60;
        $("#btn").click(function(){
            var t = setInterval(function(){
                if(time > 0) {
                    $("#btn").prop("disabled",true) // 禁用输入
                    time--;
                    $("#btn").val("请认真阅读" + "(" + time + ")秒");
                } else {
                    clearInterval(t); //清除定时
                    $("#btn").val("确认阅读完成");
                    $("#btn").prop("disabled",false);
                    time = 0;
                }
            },1000); //每隔1秒执行一次showInfo方法
        });
    </script>
</body>
</html>

6. 隔行变色

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style> 
        td{
            text-align: center;
        }
    </style>
</head>
<body>
    <table border="1px" width="70%" align="center" cellpadding="1px" cellspacing="0px" id="t_col">
        <tr>
            <th>商品编号</th>
            <th>商品名称</th>
            <th>商品价格</th>
            <th>商品描述</th>
        </tr>
        <tr>
            <td>01</td>
            <td>猪脚饭</td>
            <td>15</td>
            <td>吃不完</td>
        </tr>
        <tr>
            <td>02</td>
            <td>猪肉面</td>
            <td>17</td>
            <td>猪肉贵了</td>
        </tr>
        <tr>
            <td>03</td>
            <td>茄子豆角饭</td>
            <td>15</td>
            <td>味道可以</td>
        </tr>
    </table>
 
    <script>
        var tColor = document.all['t_col'];
        for(var i = 0; tColor.rows.length;i++){
            tColor.rows[i].bgColor = (i%2==0) ? 'white' : 'red';
        }
    </script>
</body>
</html>

7. 鼠标移入展开列表

<body>
    <div id="menu" class="pos"> <a href="#">我的当当</a>
        <ul id="menu-ul" style="display:none;">
            <li><a href="#">我的订单</a></li>
            <li><a href="#">我的收藏</a></li>
            <li><a href="#">我的礼品卡</a></li>
            <li><a href="#">我的积分</a></li>
            <li><a href="#">我的余额</a></li>
        </ul>
    </div>
    <script>
        document.getElementById("menu").onmouseover = function () { document.getElementById("menu-ul").style.display = "block" }; 			          				document.getElementById("menu").onmouseout = function () { document.getElementById("menu-ul").style.display = "none" };
    </script>
</body>

本文作者：Ritchie里其

本文链接：https://www.cnblogs.com/wang-zeyu/p/16860524.html

版权声明：本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。

posted @   Ritchie里其  阅读(27)  评论(0)  编辑  收藏  举报
点击右上角即可分享
微信分享提示
AI IDE Trae
✨欢迎你~🍻
评论
收藏
关注
推荐
深色
回顶
收起
  1. 1 遥か Aimer
遥か - Aimer
00:00 / 00:00
An audio error has occurred.

作词 : aimerrhythm/田中ユウスケ

作曲 : 田中ユウスケ

编曲 : 玉井健二/百田留衣

海岸線の雨に ちらばった君の影

思い出が交差する 海辺の街

君はあの日のまま いまも夢を見てた

君はあの日のまま いまも夢を見てた

遥か記憶の空 2人照らす光

遥か記憶の空 2人照らす光

膝までの浅瀬で 見つけた星

君まで届くなんてさ ありえないような

浅い眠りの中で 深い夢から覚めて

浅い眠りの中で 深い夢から覚めて

裸足のまま駆けてく まばゆい星

君はあの日のまま どんな夢を見てた？

君はあの日のまま どんな夢を見てた？

遥か記憶の空 2人照らす光

遥か記憶の空 2人照らす光

いつまでもこうして 笑っててほしい

夜空に舞い上がる 幾千の花びら

でたらめな誓いで 生きてく日々

君から届くなんてさ ありえないような