【WordPress 教程】JS实现网站运行X天X小时X分X秒与倒计时时间特效

释放双眼,带上耳机,听听看~!

【网站运行时间统计】

  • 第一种
  • 显示格式:博客已运行:0 年 0 天 0 小时 0 分钟 00 秒(秒为跑秒)
  • 注意修改25行 //北京时间2016-12-1 00:00:00为你的时间
博客已运行:<span id="sitetime" style="color: #0196e3;"></span>
<script language=javascript>
function siteTime(){
 window.setTimeout("siteTime()", 1000);
var seconds = 1000;
var minutes = seconds * 60;
var hours = minutes * 60;
var days = hours * 24;
var years = days * 365;
var today = new Date();
var todayYear = today.getFullYear();
var todayMonth = today.getMonth()+1;
var todayDate = today.getDate();
var todayHour = today.getHours();
var todayMinute = today.getMinutes();
var todaySecond = today.getSeconds();
/* Date.UTC() -- 返回date对象距世界标准时间(UTC)1970年1月1日午夜之间的毫秒数(时间戳)
 year - 作为date对象的年份,为4位年份值
 month - 0-11之间的整数,做为date对象的月份
 day - 1-31之间的整数,做为date对象的天数
 hours - 0(午夜24点)-23之间的整数,做为date对象的小时数
 minutes - 0-59之间的整数,做为date对象的分钟数
 seconds - 0-59之间的整数,做为date对象的秒数
 microseconds - 0-999之间的整数,做为date对象的毫秒数 */
var t1 = Date.UTC(2016,1,1,00,00,00); //北京时间2016-12-1 00:00:00
var t2 = Date.UTC(todayYear,todayMonth,todayDate,todayHour,todayMinute,todaySecond);
var diff = t2-t1;
var diffYears = Math.floor(diff/years);
var diffDays = Math.floor((diff/days)-diffYears*365);
var diffHours = Math.floor((diff-(diffYears*365+diffDays)*days)/hours);
var diffMinutes = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours)/minutes);
var diffSeconds = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours-diffMinutes*minutes)/seconds);
 document.getElementById("sitetime").innerHTML=+diffYears+"年"+diffDays+"天"+diffHours+"时"+diffMinutes+"分钟"+diffSeconds+"秒";
}
 siteTime();
</script>
  • 第二种
  • 显示格式:本站勉强运行:  0 天 0 小时 0 分 00 秒(秒为跑秒)
  • 注意修改5行 //北京时间2016-12-1 00:00:00为你的时间
<span id="runtime_span"></span>
<script type="text/javascript">
function show_runtime(){
window.setTimeout("show_runtime()",1000);
X=new Date("12/1/2016 00:00:00");//北京时间2016-12-1 00:00:00
Y=new Date();
T=(Y.getTime()-X.getTime());
M=24*60*60*1000;
a=T/M;
A=Math.floor(a);
b=(a-A)*24;
B=Math.floor(b);
c=(b-B)*60;
C=Math.floor((b-B)*60);
D=Math.floor((c-C)*60);
runtime_span.innerHTML="本站勉强运行: "+A+"天"+B+"小时"+C+"分"+D+"秒"}show_runtime();
</script>
  • 第三种
  • 显示格式:本站已安全运行:  0 天 0 小时 0 分 00 秒(秒为跑秒)
  • 注意修改11行 (“2016-5-6”)为你的时间
  • css只是变颜色的可有可无,js自己找地方丢或一起放主题页脚文件即可
<span id="momk"></span><span id="momk" style="color: #ff0000;"></span>
<script type="text/javascript">
function NewDate(str) {
str = str.split('-');
var date = new Date();
date.setUTCFullYear(str[0], str[1] - 1, str[2]);
date.setUTCHours(0, 0, 0, 0);
return date;
}
function momxc() {
var birthDay =NewDate("2016-5-6");
var today=new Date();
var timeold=today.getTime()-birthDay.getTime();
var sectimeold=timeold/1000
var secondsold=Math.floor(sectimeold);
var msPerDay=24*60*60*1000; var e_daysold=timeold/msPerDay;
var daysold=Math.floor(e_daysold);
var e_hrsold=(daysold-e_daysold)*-24;
var hrsold=Math.floor(e_hrsold);
var e_minsold=(hrsold-e_hrsold)*-60;
var minsold=Math.floor((hrsold-e_hrsold)*-60); var seconds=Math.floor((minsold-e_minsold)*-60).toString();
document.getElementById("momk").innerHTML = "本站已安全运行"+daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒";
setTimeout(momxc, 1000);
}momxc();
</script>  
<style>
#momk{animation:change 10s infinite;font-weight:800; }
@keyframes change{0%{color:#5cb85c;}25%{color:#556bd8;}50%{color:#e40707;}75%{color:#66e616;}100% {color:#67bd31;}}
</style>

  • 第四种
  • 显示格式:本站已安全运行:  0 天 0 小时 0 分 00 秒(秒为跑秒)
  • 注意修改5行 (“05-06-2016 12:12:24”)为你的时间
  • css只是变颜色的可有可无,js自己找地方丢或一起放主题页脚文件即可
本站已安全运行:<span id="momk"></span>
<script language=javascript>
function show_date_time(){
window.setTimeout("show_date_time()", 1000);
BirthDay=new Date("05-06-2016 12:12:24");//建站日期
today=new Date();
timeold=(today.getTime()-BirthDay.getTime());
sectimeold=timeold/1000
secondsold=Math.floor(sectimeold);
msPerDay=24*60*60*1000
e_daysold=timeold/msPerDay
daysold=Math.floor(e_daysold);
e_hrsold=(daysold-e_daysold)*-24;
hrsold=Math.floor(e_hrsold);
e_minsold=(hrsold-e_hrsold)*-60;
minsold=Math.floor((hrsold-e_hrsold)*-60);
seconds=Math.floor((minsold-e_minsold)*-60);
momk.innerHTML=daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒" ;
}
show_date_time();
</script>
<style>
#momk{animation:change 10s infinite;font-weight:800; }
@keyframes change{0%{color:#5cb85c;}25%{color:#556bd8;}50%{color:#e40707;}75%{color:#66e616;}100% {color:#67bd31;}}
</style>

【网站倒计时功能】

  • 第一种jQuery.countdown插件实现,需要加载jQuery相关文件
  • 显示格式:倒计时:50 周 01 天 07 小时 18 分 41 秒(秒为跑秒)
  • 注意修改5行 (“05-06-2016 12:12:24”)为你的时间
  • 一个页面可以有多个倒计时实例,可以停止和开始,它没有提供太多的功能,但时间格式和输出的
  • 尺寸都可以自定义。
<div id="getting-started"></div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.countdown.js"></script>
<script type="text/javascript">
 $('#getting-started').countdown('2051/01/31 23:05', function(event) {
 $(this).html(event.strftime('倒计时:%w 周 %d 天 %H:%M:%S'));
});
</script>
  • 注意:如果需要一共还有多少天数用%D,参数说明:
  1. Y: “years”
  2. m: “months”
  3. w: “weeks”
  4. d: “days”
  5. D: “totalDays”
  6. H: “hours”
  7. M: “minutes”
  8. S: “seconds”
  • 第二种js实现倒计时功能
  • 显示格式:距离结束时间还有:00天05小时25分30秒(秒为跑秒)
  • 注意修改5行 为你的时间
  • 注意:表示月份的参数介于 0 到 11 之间。也就是说,如果希望把月设置为8月,则参数应该是7。
<div id="time" class="time"></div>
<script language=javascript>
function show_date_time(){
 window.setTimeout("show_date_time()", 1000);
 target=new Date(2014,0,15,17,0,0); //注意:表示月份的参数介于 0 到 11 之间。也就是说,如果希望把月设置为8月,则参数应该是7。
 today=new Date();
 
 timeold=(target.getTime()-today.getTime());
 
 sectimeold=timeold/1000
 secondsold=Math.floor(sectimeold);
 msPerDay=24*60*60*1000
 e_daysold=timeold/msPerDay
 daysold=Math.floor(e_daysold);
 e_hrsold=(e_daysold-daysold)*24;
 hrsold=Math.floor(e_hrsold);
 e_minsold=(e_hrsold-hrsold)*60;
 minsold=Math.floor((e_hrsold-hrsold)*60);
 seconds=Math.floor((e_minsold-minsold)*60);
 
if (daysold<0) {
 document.getElementById("time").innerHTML="逾期,倒计时已经失效";
}
else{
if (daysold<10) {daysold="0"+daysold}
if (hrsold<10) {hrsold="0"+hrsold}
if (minsold<10) {minsold="0"+minsold}
if (seconds<10) {seconds="0"+seconds}
if (daysold>0) {
 document.getElementById("time").innerHTML="距离结束时间还有:"+daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒";
}
else
 document.getElementById("time").innerHTML="<font color=red>距离结束时间还有:"+daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒</font>"; //结束时间小于1天,字体呈红色提醒
}
}
show_date_time();
</script>

给TA买糖
共{{data.count}}人
人已赞赏
WordPress插件

wordpress纯代码生成sitemap.xml网站地图

2021-1-13 18:35:55

WordPress插件默认

【WordPress 插件】独立下载页面插件 Xydown 美化版

2021-1-22 17:11:16

声明:本站上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。无意侵害您的权益,请发送邮件至 xutian@ahap.cn 或点击右侧 私信:许天娱乐 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
购物车
优惠劵
有新私信 私信列表
搜索