jsDate对象和倒计时图片案例

张哥编程

发布于 2024-12-19 09:44:22

15900

代码可运行

文章被收录于专栏：云计算linux云计算linux

运行总次数：0

代码可运行

BOM的补充

1.复习

BOM：文档对象模型

重点 Document

2.补充Date对象

Date：日期；

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>date案例</title>
  </head>
  <body>
    <script>
      //之前讲js的时候,定义一个变量，都是使用var;
      //如果大家是笔记本：F2+F12；台式机一般是F12；
      // var name="张晨光";
      // console.log(name);
      //格式变了：var 变量名=new Date(),这时候date就是一个新的日期对象;
      var date=new Date();
      //console.log("今天的是日期时间："+date);
      document.write("今天的是日期时间："+date);
      //这个时间格式：它是老外的认同的时间格式；
      //会在下面显示出来：今天的是日期时间：Sat May 09 2020 09:26:52 GMT+0800 (中国标准时间)
      //下面我们要想看到具体的年 月 日；
      //注意这时候得到年 √；月：
      //月少了1，月的取值：0-11 ；第1个月：对应的数字是0；第2个月对应的数字是1；
      //日：获取月中的某一天不是getDay(),getDay()它是获取一周的第几天；
      //获取一个月的第几天；叫：getDate()
      console.log("年："+date.getFullYear());
      console.log("月:"+(date.getMonth()+1));
      console.log("日:"+date.getDate());  
      console.log("时:"+date.getHours());
      console.log("分:"+date.getMinutes());
      console.log("秒:"+date.getSeconds());
      document.write("<br/>**********************************<br/>");
      document.write(date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日"+date.getHours()+"时"+
        date.getMinutes()+"分"+date.getSeconds()+"秒")
    </script>
  </body>
</html>

3.setTimeout()/setInterval()

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>date案例</title>
  </head>
  <body>
    <script>
      //2.案例目标：时间自动变化；
      //需要使用的系统函数setTimetout()/setInterval()
      //setInterval(参数1，参数2);参数1：要调用的函数；参数2：自动毫秒时间间隔;单位是毫秒;
      //setInterval('alert("KO")',1000);1秒=1000毫秒；
      //显示的效果：每隔一秒，蹦出来一个弹框，里面显示KO。

      //将目标分解；
      //2.1 每隔1秒，自动刷新时间;
      setInterval('refresh()',1000);
      //2.2 定义一个函数refresh()
      function refresh(){
        //2.3将之前的显示年月日时分秒的时间代码放过来即可。
        var date=new Date();
        //问题是document.write();每次都会在页面显示。
        //我们现在要让时间只显示一次；
        /* document.write(date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日"+date.getHours()+"时"+
          date.getMinutes()+"分"+date.getSeconds()+"秒") */
        //定义一个变量接受年月日时分秒等;
        var now=date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日"+date.getHours()+"时"+
          date.getMinutes()+"分"+date.getSeconds()+"秒";
        //设置span这个上面显示的是now；
        //这时候就需要先找到span;innerHTML:内部的内容
        //这样span每次得到都是最新的值；
        document.getElementById("clock").innerHTML=now;
      }
    </script>
    <!--增加一个span,id叫clock时钟； -->
    <span id="clock"></span>
  </body>
</html>

4.炸弹案例一：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>炸弹案例一</title>
    <style>
      img{width:400px;height: 350px;}
    </style>
    <script>
      //console.log(document.getElementById("bomb"));测试可以知道就是下面的img标签元素;
      //之前是炸弹，3秒之后变成了骷髅;图片变成了骷髅;
      function zha(){
        //还是需要用的下一章的一个知识点;document.getElementById();
        //通过id来找到某个文档的元素;
        document.getElementById("bomb").src="img/2aa.jpg";
      }
      //2.定时器;参数1：函数；参数2：时间间隔;3000钟;
      setInterval('zha()',3000);
    </script>
  </head>
  <body>
    <!-- 1.设计HTML页面 -->
    <h1>定时器炸弹案例</h1>

    <img src="img/boom.jpg" title="炸弹" id="bomb"/>
  </body>
</html>

效果图：

5.炸弹案例二

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>炸弹案例一</title>
    <style>
      img{width:400px;height: 350px;}
      span{font-size: 72px;font-weight: 400;color: red;}
    </style>
    <script>
      //console.log(document.getElementById("bomb"));测试可以知道就是下面的img标签元素;
      //之前是炸弹，3秒之后变成了骷髅;图片变成了骷髅;
      function zha(){
        //innerText:span里面的文本3可以显示出来；
        var miao=document.getElementById("time").innerText;
        miao=miao-1;
        //到这个时候需要测试，一直显示的是2，为什么？？？
        //console.log(miao); //结果是3-1=2，需要马上把这个2的值给span
        document.getElementById("time").innerText=miao;
        //这时候已经显示出来了
        if(miao==0){
          document.getElementById("bomb").src="img/2aa.jpg";
          //清空时钟计时器shizhong;就不再计时了,取消倒计时变为负数的情况；.
          clearInterval(shizhong);
        }

      }
      //2.定时器;参数1：函数；参数2：时间间隔;3000钟;
      var shizhong=setInterval('zha()',1000);
    </script>
  </head>
  <body>
    <!-- 1.设计HTML页面;之前不知道是3秒;可以看到3秒;3秒倒计时；如何办？？？
    1分钟的时间来想如何办？？？倒计时的时候，时间间隔是多少呢？？？
    要实现倒计时3 2 1，铁定时间间隔是1秒;

     -->
    <h1>定时器炸弹案例</h1>
    <span id="time">3</span><br/>
    <img src="img/boom.jpg" title="炸弹" id="bomb"/>
  </body>
</html>

效果：

总结：

1.第一个知识点是Date对象的学习；js系统内置的自带对象，一般叫内置对象，主要是它的一些方法的使用，这些方法不用记，不会的时候，直接百度或者查js帮助手册。

2.setTimeout()/setInterval()函数的使用，函数的第一个参数是函数名(),第二个参数是时钟的时间间隔。

3.使用到了一个DOM的方法，document.getElemntById(id名)，通过元素的id来找到网页上的某个元素。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-02-24，如有侵权请联系 cloudcommunity@tencent.com 删除

date