JS时间特效最常用的三款

 更新时间:2015年08月19日 16:11:23   投稿:lijiao  
这篇文章主要介绍了最常用的三款JS时间特效,推荐给大家,有需要的小伙伴可以参考下。

为大家分享的JS时间特效代码如下

<head>

<title>3个最常用的JS时间特效</title>
</head>

<body>
<table width="298" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td height="50" bgcolor="#f4f4f4">
<script language=JavaScript>
<!--
var enabled = 0; today = new Date();
var day; var date;
if(today.getDay()==0) day = " 星期日"
if(today.getDay()==1) day = " 星期一"
if(today.getDay()==2) day = " 星期二"
if(today.getDay()==3) day = " 星期三"
if(today.getDay()==4) day = " 星期四"
if(today.getDay()==5) day = " 星期五"
if(today.getDay()==6) day = " 星期六"
document.fgColor = "000000";
date = "今天是:" + (today.getYear()) + "年" + (today.getMonth() + 1 ) + "月" + today.getDate() + "日" + day +"";
document.write(date);
// -->
</script>
</td>
 </tr>
 <tr>
 <td height="50">
 <div id="webjx"></div>
 <script>setInterval("webjx.innerHTML=new Date().toLocaleString()+' 星期'+'日一二三四五六'.charAt(new Date().getDay());",1000);
 </script></td>
 </tr>
 <tr>
 <td height="50" bgcolor="#f4f4f4">
 <span id=nowDate></span>
 <span id=nowTime></span>
 <script><!--
var ns4up1 = (document.layers) ? 1 : 0; // browser sniffer

var ie4up1 = (document.all&&(navigator.appVersion.indexOf("MSIE 4") == -1)) ? 1 : 0;

var ns6up1 = (document.getElementById&&!document.all) ? 1 : 0;

function nowclock() {
if (!ns4up1 && !ie4up1 && !ns6up1) return false;
var digital = new Date();
var hours = digital.getHours();
var minutes = digital.getMinutes();
var seconds = digital.getSeconds();
var day = digital.getDate();
var month = digital.getMonth() + 1;
var year = digital.getYear();
var amOrPm = "AM";
if (hours > 11) amOrPm = "PM";
if (hours > 12) hours = hours - 12;
if (hours == 0) hours = 12;
if (minutes < 10) minutes = "0" + minutes;
if (seconds < 10) seconds = "0" + seconds;
if (day < 10) day = "0" + day;
if (month < 10) month = "0" + month;
dispTime = hours + ":" + minutes + ":" + seconds + " " + amOrPm;
dispDate = year + "年" + month + "月" + day+ "日, " ;
if (ns4up1) {
document.layers.nowTime.document.write(dispTime);
document.layers.nowTime.document.close();
document.layers.nowDate.document.write(dispDate);
document.layers.nowDate.document.close();
} else if (ns6up1){
document.getElementById("nowTime").innerHTML = dispTime;
document.getElementById("nowDate").innerHTML = dispDate;
} else if (ie4up1){
nowTime.innerHTML = dispTime;
nowDate.innerHTML = dispDate;
} setTimeout("nowclock()", 1000);
} nowclock();
//-->
 </script>

</td>
 </tr>
</table>

</body>
</html>

复制上面代码,直接运行即可得到下面的效果:

以上就是为大家分享的JavaScript时间特效代码,希望大家可以喜欢。

相关文章

  • JavaScript中ahooks 处理 DOM 的方法

    JavaScript中ahooks 处理 DOM 的方法

    这篇文章主要介绍了JavaScript中ahooks处理DOM的方法,主要通过ahooks对DOM类Hooks使用规范,以及源码中是如何去做处理的,具体详细介绍需要的小伙伴可以参考一下下面文章内容
    2022-06-06
  • JS插件amCharts实现绘制柱形图默认显示数值功能示例

    JS插件amCharts实现绘制柱形图默认显示数值功能示例

    这篇文章主要介绍了JS插件amCharts实现绘制柱形图默认显示数值功能,结合实例形式分析了amCharts插件绘制柱形图并显示数值的相关操作技巧,需要的朋友可以参考下
    2019-11-11
  • js实现音频控制进度条功能

    js实现音频控制进度条功能

    本文主要介绍了js实现音频控制进度条功能的示例代码。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-04-04
  • Javascript迭代、递推、穷举、递归常用算法实例讲解

    Javascript迭代、递推、穷举、递归常用算法实例讲解

    今天小编就为大家分享一篇关于Javascript迭代、递推、穷举、递归常用算法实例讲解,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-02-02
  • D3.js实现饼图,环图,玫瑰图的绘制

    D3.js实现饼图,环图,玫瑰图的绘制

    这篇文章主要为大家介绍了如何利用D3.js中的d3.pie和d3.arc实现饼图、环图和玫瑰图的绘制,文中的实现方法讲解详细,感兴趣的可以尝试一下
    2022-11-11
  • 微信小程序新手入门之自定义组件的使用

    微信小程序新手入门之自定义组件的使用

    最近在用自定义组件搭建小程序,简单记录下步骤,所以这篇文章主要给大家介绍了关于微信小程序新手入门之自定义组件使用的相关资料,需要的朋友可以参考下
    2021-05-05
  • JavaScript入门系列之知识点总结

    JavaScript入门系列之知识点总结

    JavaScript 是属于网络的脚本语言。本文是小编日常收集整理些javascript入门基础知识,对js新手朋友非常有帮助,对js入门知识点感兴趣的朋友一起学习吧
    2016-03-03
  • 利用JS判断客户端类型你应该知道的四种方法

    利用JS判断客户端类型你应该知道的四种方法

    这篇文章主要给大家总结介绍了关于利用JS判断客户端类型的四种方法,比如通过通过判断浏览器的userAgent、检查是否是移动端(Mobile)、ipad、iphone、微信、QQ等的方法,需要的朋友可以参考借鉴,下面
    2017-12-12
  • javascript showModalDialog 内跳转页面的问题

    javascript showModalDialog 内跳转页面的问题

    在页面中使用了showModalDialog,但是在跳转链接时,不会在当前页执行,而是弹出一个新的页面。
    2010-11-11
  • JS实现数组去重及数组内对象去重功能示例

    JS实现数组去重及数组内对象去重功能示例

    这篇文章主要介绍了JS实现数组去重及数组内对象去重功能,结合实例形式分析了ES5与ES6两种版本针对数组去重的相关操作技巧,需要的朋友可以参考下
    2019-02-02

最新评论