JavaScript实现的一些小案例

小哼快跑

已于 2024-02-03 16:58:38 修改

阅读量980

点赞数 23

分类专栏： Java Web专栏文章标签： javascript 开发语言 ecmascript

于 2024-01-24 22:13:54 首次发布

本文链接：https://blog.csdn.net/weixin_45754463/article/details/135832735

版权

Java Web专栏专栏收录该内容

20 篇文章 0 订阅

订阅专栏

本文详细介绍了四个JavaScript在HTML中的应用实例：灯开关控制图片切换、轮播图自动切换、页面跳转计时器以及动态表格的添加和删除功能。每个例子都展示了基础的前端技术运用。

摘要由CSDN通过智能技术生成

文章目录

- 小案例

小案例

灯开关案例

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