登录

Jquery之2017总结之新年倒计时

眼看着2017年即将过去,2018年即将到来。

转眼,2017只剩短短几十个小时,

连用来失恋的时间都不够。

也不知道你年初定下的目标完成了么?

#一首凉凉送给在座的各位

你羡慕别人的马甲线是否还在别人身上,

而你还是只有那个小肚腩。

想摆脱单身,找到另一半。

结果:汪汪!还是单身狗?

做梦都想脱单,然并卵,

还是被各种情侣的花式“秀恩爱”闪瞎眼,

单身20多年依旧无人认领,

说多了早已不是泪,而是血…

这个愿望也几乎是每年的愿望清单榜首啊~

从年初说到年尾的来一次说走就走的旅行,

结果:没钱!没时间!等等再说吧!

朋友圈里高逼格的旅游照、晒美食,

无时无刻不在召唤着你:“世界那么大,一定要去看看”

但是摸摸钱包,查查银行卡,

别说走就走的旅行了,

连下班都不行!世界那么大,我还是去静静!

想找一个高薪的好工作,但没有相应技能,

只能无奈摊手,临渊羡鱼。

一直在想升职加薪,做人生赢家,

但结果:只能在梦里实现了。

每天都在坐等领导的提拔和推荐,

事实却是你还在过着朝九晚五的生活年年都拿着几千块的工资,

这年头就是什么都涨唯独工资不涨的节奏,

过着不咸不淡的日子,

一年又要过去了,自己依然是一个小职员。

2017年最后几十个小时了,

你是不是依旧去坚持那些不该坚持的,

放下那些不该放下的。

看到他人转行成功,加薪升职,

除了羡慕嫉妒、愤恨不满,

是不是应该去反思为什么自己不是那个幸运儿?

2017年快要结束,2018年即将到来。

你将要用什么样的心情和过去告别,要用怎样的心态去迎接未来?

我们每个人的心中,都会憧憬一些美好的事情。

有所追求,是生而为人的福分。

2017即将过去,让我们一起来倒计时吧!!!

<!--
-Author:niceboy
-AuthorUrl:https://www.zbpnice.cn
-Date:2017.12.30
-->
<!DOCTYPE html>
<html>
<head>  
<meta charset="UTF-8">  
<title></title>  
<script type="text/javascript" src="https://www.zbpnice.cn/demo/1/js/jquery.min.js"></script>
</head>
<style type="text/css">    
*{      
margin:0px;      
padding: 0px;    
}    
body{      
background: #363f48;      
color: white;      
font: normal 12px 'Open Sans', sans-serif;    
}    
.container{      
width: 100%;      
height: 100%;      
position: relative;    
}    
.container p{      
font-size: 40px;      
top: 35%!important;      
left: 40%!important;    
}    
.container .timeBox,.container p{      
width: 80%;      
height: auto;      
text-align: center;      
position: absolute;      
top: 45%;      
left: 50%;      
right: 50%;      
margin-left: -40%;      
margin-right: -20%;    
}    
.container .timeBox span i{     
 padding: 5px 15px;      
 background: red;      
 color: white;      
 font-size: 60px;      
 display: inline-block;      
 font-style: normal;      
 border-radius: 5px;    
 }    
 .container .timeBox span em{      
 display: inline-block;      
 font-size: 20px;      
 margin:0 4px;    
 }  
 </style>
 <body>
 <div class="container">  
 <p>距离2018年还有:</p>  
 <div class="timeBox">    
 <span id="day" style="display: none;"></span>    
 <span id="hour" style="display: none;"></span>    
 <span id="minute" style="display: none;"></span>    
 <span id="seconds" style="display: none;"></span>  
 </div>
 </div>  
 <script type="text/javascript">    
 var dats =0,hour = 0, minute = 0, seconds = 0,tim = 0;    
 var screenHeight = $(document).height();    
 var Y = new Date();    
 $("title").html("2018倒计时");    
 $(".container").css({"height":screenHeight});    
 function Times(year,month,day,hour,minute,second){        
     var getDate = (new Date(year,month-1,day,hour,minute,second)) - (new Date());//获取剩余的毫秒数        
     days = intTime(parseInt(getDate/1000/60/60/24));//获取天数        
     hour = intTime(parseInt(getDate/1000/60/60%24));//获取小时        
     minute = intTime(parseInt(getDate/1000/60%60));//获取分钟        
     seconds = intTime(parseInt(getDate/1000%60));//获取秒        
     (days > 0)?($("#day").fadeIn()):($("#day").fadeOut());        
     (days > 0)?($("#hour").html("<i>"+hour+"</i><em>时</em>").show())
     :((hour > 0)?($("#hour").html("<i>"+hour+"</i><em>时</em>").show())
     :($("#hour").fadeOut()));        
     (hour>0)?($("#minute").html("<i>"+minute+"</i><em>分</em>").show())
     :((minute>=0)?($("#minute").html("<i>"+minute+"</i><em>分</em>").show())
     :((seconds>0)?($("#minute").html("<i>"+minute+"</i><em>分</em>").show())
     :($("#minute").fadeOut())));        
     if(seconds>=0){          
         (days > 0)?($("#day").html("<i>"+days+"</i><em>天</em>")):($("#day").fadeOut());          
         (days > 0)?($("#hour").html("<i>"+hour+"</i><em>时</em>").show())
         :((hour > 0)?($("#hour").html("<i>"+hour+"</i><em>时</em>").show())
         :($("#hour").fadeOut()));          
         (hour>0)?($("#minute").html("<i>"+minute+"</i><em>分</em>").show())
         :((minute>=0)?($("#minute").html("<i>"+minute+"</i><em>分</em>").show())
         :((seconds>0)?($("#minute").html("<i>"+minute+"</i><em>分</em>").show())
         :($("#minute").fadeOut())));          
          $("#seconds").html("<i>"+seconds+"</i><em>秒</em>").fadeIn();        
      }else{          
          $("p").fadeOut("fast");          
          $(".timeBox").html("HAPPY NEW YEAR").fadeIn("slow");          
          $(".timeBox").css({"fontSize":"100px","Top":"40%!important"});          
          window.clearInterval(tim);          
          tim = 0;        
          }    
      };    
      function intTime(t){      
      if(t<10){        
          t = "0" + t;      
      }      
          return t;    
      }     
      tim = setInterval("Times(2018,1,1,00,00,00)",1000);  
</script>
</body>
</html>

代码可读性差,有不足之处,还望大神们指点一二,感谢!感谢!

选择赏赐方式:

×

多少都是心意,感谢大家

选择分享方式:

×

扫一扫分享到微信朋友圈

本文标题:Jquery之2017总结之新年倒计时

本文地址:https://www.zbpnice.cn/post/151.html

温馨提示:文章内容系作者个人观点,不代表柏平博客对观点赞同或支持。

版权声明: 本文为原创文章,创建于4年前 (2017-12-31),版权归 柏平 所有,欢迎分享本文,转载请保留出处!

评论列表 :共有3人吐槽, 3458人围观

哦引力
哦引力  4年前 (2018-01-03)  板凳回复
多读书,多运动,健康最重要
哦引力
哦引力  4年前 (2018-01-03)  沙发回复
希望总是美好的,愿每天都过得充实就好
柏平
柏平  4年前 (2018-01-17) 1层回复
@哦引力 2018加油 face_36

发表评论: