结婚倒计时......

结婚,几乎是每个女人的必经之路。很多女人在经过漫长的恋爱过程之后,终于修成正果,步入婚礼的殿堂。这,是令人羡慕的。同样的,期待心砰砰砰,,只希望婚姻并不是坟墓,以轻松、快乐的心情去迎接属于自己的幸福。

倒计时 303天.....

作为一个职业的码农,怎么样用js去编写一个倒计时呢?时时刻刻提醒让男朋友知道如何面对那一天的来临,做到时刻提醒!!

2.png
首先在html的body里写上内容!
        <form>目的日期:
          <input type="text" id="year"><span>年</span>
          <input type="text" id="month"><span>月</span>
          <input type="text" id="day"><span>日</span>
          <input type="text" id="hour"><span>时</span>
          <input type="text" id="minute"><span>分</span>
          <input type="text" id="second"><span>秒</span>
          <input type="button" value="确定" onclick="show()">
        </form>
        <div class="time1">还剩时间:
          <span id="1"></span>天
          <span id="2"></span>时
          <span id="3"></span>分
          <span id="4"></span>秒
        </div>
然后在html的head里写上内容!
       <style>
        input {
          width: 50px;
          height: 20px;
          border: 1px solid black;
        }

        .time1 span {
          display: inline-block;
          width: 40px;
          height: 20px;
        }
      </style>

看一下实现的效果吧!

image.png
怎么样能够让他实现倒计时的效果呢!就可以在html的body里开始编写上script内容!
            function show(){

//获取目的日期

              var myyear=document.getElementById("year").value;
              var mymonth=document.getElementById("month").value-1;
              var myday=document.getElementById("day").value;
              var myhour=document.getElementById("hour").value;
              var myminute=document.getElementById("minute").value;
              var mysecond=document.getElementById("second").value;
              var time=Number(newDate(myyear,mymonth,myday,myhour,myminute,mysecond));

//获取当前时间

              var nowTime=Date.now();

//获取时间差

              var timediff=Math.round((time-nowTime)/1000);

//获取还剩多少天

              var day=Math.floor(difference / 1000 / 60 / 60 / 24);

//获取还剩多少小时

              var hour=Math.floor(difference / 1000 / 60 /60 % 24);

//获取还剩多少分钟

              var minute=Math.floor(difference / 1000 /60 % 60);

//获取还剩多少秒

              var second=Math.floor(difference / 1000 % 60);

//输出还剩多少时间

              document.getElementById("1").innerHTML=day;
              document.getElementById("2").innerHTML=hour;
              document.getElementById("3").innerHTML=minute;
              document.getElementById("4").innerHTML=second;

//定时器循环

              setTimeout(show,1000);

一起看下结果吧!


image.png

ps:希望又个办法插入到 男朋友手机屏幕,时时刻刻提醒他,是时候踏着七彩祥云来娶
我啦!!!!!!!!!!!!

9180e329f8d1ac3d27fd4219d49004ea.jpg
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。