结婚倒计时......

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

倒计时 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

最后编辑于：2019.07.08 00:33:20