JavaScript实现的一些小案例

发布于：2024-01-25 ⋅ 阅读:(47) ⋅ 点赞:(0)

小案例

灯开关案例

<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);
}

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布