js实现灯泡特效并显示实时时间并记录

最新推荐文章于 2023-07-05 18:29:21 发布

社会人王某

最新推荐文章于 2023-07-05 18:29:21 发布

阅读量212

点赞数

本文链接：https://blog.csdn.net/key1haha_/article/details/102534275

版权

Js实现灯泡实时开关记录

设置按钮点击事件

准备两张图片点击按钮后进行跳转

插入链接与图片

链接: link. 在这里插入图片描述

去博客设置页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的 代码片.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>灯泡</title>
</head>
<body>

<div style="margin-left: 500px;float: left">
  <img src="0.jpg" id="image" width="600px";height="600px">
  <input type="button" value="开关" onclick="on()">

//设置显示div
  <div
    id="show"
    style="height:600px;
  width: 400px;
  background-color:#b3d4fc;
  float: right;
  overflow:auto;
  padding-left: 20px"
  ></div>
</div>

</div>
<script type="text/javascript">
  //获取时间

  function getDate() {
      var obj = new Date();
      var hour =obj.getHours();
      var Minute=obj.getMinutes();
      var Second =obj.getSeconds();
      //返回时间
      return hour+"时"+Minute+"分"+Second+"秒";
  }


  var imgs =["0.jpg","1.jpg"];
  var i =1;
  function on() {

      document.getElementById("image").src=imgs[i];

      if (i==0){
          i=1;
          //点击一次后 在div块中显示实时时间
        document.getElementById("show").innerHTML+=getDate()+'灯关了<br>';
      }else{
          i=0;
          //反复跳转 并重复记录 显示
          document.getElementById("show").innerHTML+=getDate()+'灯开了<br>';
      }

  }


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

社会人王某

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js实现灯泡特效并显示实时时间并记录

Js实现灯泡实时开关记录设置按钮点击事件准备两张图片点击按钮后进行跳转插入链接与图片链接: link.去博客设置页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的代码片.<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <tit...
复制链接

扫一扫