JavaScript实现的一些小案例

发布时间:2024年01月25日

小案例

灯开关案例

<body>
	<img id="light" src="img/off.jpg">
    <script>
    	var light = document.getElementById("light");
        var flag = false;
        if(flag){
            light.src = "img/on.jpg";
            flag = false;
        }else{
            light.src = "img/off.jpg";
            flag = true;
        }	
    </script>
</body>

轮播图案例

<body>
    <img src="../../../../imgs/banner_1.jpg" width="100%" id="img">

    <script>
        var number = 1;
        /*修改图片*/
        function fun(){
            number ++;
            if(number > 3){
                number = 1;
            }
            var img = document.getElementById("img");
            img.src = "../../../../imgs/banner_"+ number +".jpg";
        }
        setInterval(fun,3000);
    </script>
</body>

自动跳转案例

p{
    text-align: center;
    font-size: 20px;
}
#time{
    color: red;
}
<p>
    <span id="time">5</span>秒之后跳转到首页
</p>
<script>
    var time = document.getElementById("time");
    var number = 5;
    function fun(){
        number --;
        if(number <= 0){
            //跳转页面
            location.href="https://www.baidu.com";
        }
        //修改标签体里的内容
        time.innerHTML = number + "";
    }
    //设置定时器
    setInterval(fun,1000);
</script>

动态表格

  • 样式文件

    table{
        border: 1px solid;
        margin: auto;
        width: 500px;
    }
    td,th{
        text-align: center;
        border: 1px solid;
    }
    div{
        text-align: center;
        margin: 50px;
    }
    
  • html 页面

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>动态表格</title>
        <link rel="stylesheet" href="table.css">
    </head>
    <body>
        <div>
            <input type="text" id="id" placeholder="请输入编号">
            <input type="text" id="name" placeholder="请输入姓名">
            <input type="text" id="gender" placeholder="请输入性别">
            <input type="button" id="btn_ad" value="添加">
        </div>
        <table>
            <caption>学生信息表</caption>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>操作</th>
            </tr>
            <tr>
                <td>1</td>
                <td>令狐冲</td>
                <td></td>
                <td><a href="javascript:void(0)" onclick="delTr(this);">删除</a></td>
            </tr>
            <tr>
                <td>2</td>
                <td>任我行</td>
                <td></td>
                <td><a href="javascript:void(0)" onclick="delTr(this);">删除</a></td>
            </tr>
            <tr>
                <td>3</td>
                <td>岳不群</td>
                <td></td>
                <td><a href="javascript:void(0)" onclick="delTr(this);">删除</a></td>
            </tr>
        </table>
        <script rel="script" src="table.js"></script>
    </body>
    </html>
    
  • JS代码

    var btn_add = document.getElementById("btn_ad");
    btn_add.onclick = function (){
        var id = document.getElementById("id").value;
        var name = document.getElementById("name").value;
        var gender = document.getElementById("gender").value;
        var table = document.getElementsByTagName("table")[0];
        table.innerHTML += "<tr>\n" +
            "            <td>"+id+"</td>\n" +
            "            <td>"+name+"</td>\n" +
            "            <td>"+gender+"</td>\n" +
            "            <td><a href=\"javascript:void(0)\" οnclick=\"delTr(this);\">删除</a></td>\n" +
            "        </tr>";
    }
    
    
     function delTr(obj){
        var table = obj.parentNode.parentNode.parentNode;
        var tr = obj.parentNode.parentNode;
        table.removeChild(tr);
    }
    
文章来源:https://blog.csdn.net/weixin_45754463/article/details/135832735
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。