JavaScript实现的一些小案例

小哼快跑

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

阅读量1k

点赞数 23

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

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

本文链接：https://blog.youkuaiyun.com/weixin_45754463/article/details/135832735

版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

- 小案例

小案例

灯开关案例

<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>