JavaScript 2021-01-23

最新推荐文章于 2024-08-19 10:59:54 发布

最强猛犸象

最新推荐文章于 2024-08-19 10:59:54 发布

阅读量82

点赞数

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_43817549/article/details/113062119

版权

js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

这篇博客通过HTML、CSS和JavaScript实现了网页上的交互功能，包括电灯开关的点击切换效果，轮播图的自动播放以及页面的自动跳转倒计时。通过事件监听、定时器以及DOM操作，展示了前端动态效果的创建方法。

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

电灯开关

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>电灯开关</title>
</head>
<body>
<img src="img/off.gif" id="light">
<script>
   /* 事件：对某些元素做的某些动作，产生某些行为
    点击图片，换图片
     获取对象*/
    var light = document.getElementById("light");
    //绑定点击事件
    var flag = false;
    light.onclick = function () {
        if (flag) {
    //改变图片的src属性
            light.src = "img/off.gif";
            flag = false;
        } else {
            light.src = "img/on.gif";
            flag = true;
        }
    }

</script>
</body>
</html>

轮播图

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
</head>
<body>
<img src="img/banner_1.jpg" id="b1" width="100%">
<input type="button" id="back" value="后退">
<script>
    /*
            分析：
                1.在页面上使用img标签展示图片
                2.定义一个方法，修改图片对象的src属性
                3.定义一个定时器，每隔3秒调用方法一次。


         */
   var number=1;
   //定义换图片的方法
   function fun() {
       number++;
   //如果number>3变为
       if (number>3) {
           number=1;
       }
   // //获取img对象并修改src属性
 document.getElementById("b1").src="img/banner_"+number+".jpg";
   }
   //设置定时器格式： setInterval(方法对象,毫秒值);
    setInterval(fun,2000);
   }
</script>
</body>
</html>

自动跳转首页

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
p{
    float: right;
}
   p span{
       color: red;
   }
    </style>

    <meta charset="UTF-8">
    <title>自动跳转首页</title>
</head>
<body>
<p><span id="span">5</span>秒后,自动跳转首页</p>
<script>
 /*
            分析：
               1.显示页面效果  <p>
               2.倒计时读秒效果实现
                   2.1 定义一个方法，获取span标签，修改span标签体内容，时间--
                   2.2.在方法中判断时间如果<= 0 ，则跳转到首页
               3.定义一个定时器，1秒执行一次该方法

         */
    var number=5;
    var span = document.getElementById("span");
    //设置fun方法
    function fun() {
        number--;
        if(number<=0){
            location.href="http://www.baidu.com";
        }
      //修改标签体内容
        span.innerHTML=number;
    }
      //设置定时器，参数为fun方法
    setInterval(fun,1000);
</script>
</body>
</html>

最强猛犸象

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 2021-01-23

电灯开关代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>电灯开关</title></head><body><img src="img/off.gif" id="light"><script> /* 事件：对某些元素做的某些动作，产生某些行为点击
复制链接

扫一扫

专栏目录