Blogger Information
Blog 24
fans 1
comment 0
visits 21766
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
jq倒计时--2019年4月1日
王先生的博客
Original
892 people have browsed it

使用parse() 方法获取目标时间到时间戳的毫秒数 new Date();  获取当前时间  .getTime获取当前时间到时间戳的毫秒数,然后相减再使用取余的方法转换成天,小时,分钟等

实例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script type="text/javascript"src="jquery-3.3.1.min.js">

  </script>
  <style type="text/css">
  *{
    margin: 0;
    padding: 0;
  }
    div{
      font-size: 36px;
      width: 1200px;
      height: 180px;
      margin: 100px auto;
      background: #82d743;
      line-height: 180px;
      text-align: center;
      color: #fff;
    }
  </style>
  <title>倒计时</title>
</head>
<body>
  <div>
    <p>距离春节倒计时 <span></span> </p>
  </div>
  <script type="text/javascript">
    $(document).ready(function(){
      function RO(){
        //parse() 方法可解析一个日期时间字符串,并返回1970/1/1午夜距离该日期时间的毫秒数;时间戳
        //返回目标日期与时间戳之间的毫秒数
        var d=Date.parse("2020/01/24");
        var date= new Date();
        //返回当前时间到时间戳的毫秒
        var dd=date.getTime();
        //取秒
        var rd=Math.floor((d-dd)/1000);
        var days=Math.floor(rd/86400);
        var hours=Math.floor(rd%86400/3600);
        var minus=Math.floor(rd%3600/60);
        var secos=Math.floor(rd%60);
        $('span').text(days+'天'+hours+'小时'+minus+'分'+secos+'秒');
      }
      setInterval(RO,1);
    })
  </script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


总结:

1:学习了jquery的两种引入方法

2:if(typeof $=='undefined')来测试jq有没有引入成功

3:入口就绪函数: $(document).ready(function(){})  或  $(function(){})

4:选择器: 元素选择器$('body')   id选择器$('#box') class选择器$('.box')  匹配多个选择器$('#box,.box')  类型选择器$('li.list')

   属性选择器$('[href]')   $("a[target='_blank']")     层级选择器 $('父级元素>子级元素')  $('祖先元素  后代元素')  比较选择器     大于$(':gt(x)')    小于$(':lt(x)')    等于$(':eq(x)')

5:事件的使用    例:$('button').click(function() 点击事件

6:实例: 倒计时

parse() 返回指定日期到时间戳的毫秒数   具体的取时间的实现,就是逻辑算数问题了  也是固定不变的.

Date.parse("Apr 05,2019")   也可以Date.parse("2019/4/5")  或2019/04/05   

这节课程不难 在琢磨文本框输入时间 然后页面显示倒计时    要是琢磨出来了 我会更新代码的  

感谢老师


Correction status:Uncorrected

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post