欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

jQuery实现的电子时钟效果完整示例

程序员文章站 2022-05-28 12:55:06
本文实例讲述了jquery实现的电子时钟效果。分享给大家供大家参考，具体如下： &l...

本文实例讲述了jquery实现的电子时钟效果。分享给大家供大家参考，具体如下：

<!doctype html>
<html>
  <head>
    <title>www.jb51.net jquery电子时钟</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  </head>
  <body>
    <span id="time">haha</span>
    <script type="text/javascript">
    window.onload = function(){
      showtime();
    }
    function showtime(){
    var mydate = new date();
    var year = mydate.getfullyear();
    var month = mydate.getmonth() + 1;
    var date = mydate.getdate();
    var dayarray = new array(7);
    dayarray[0] = "星期日";
    dayarray[1] = "星期一";
    dayarray[2] = "星期二";
    dayarray[3] = "星期三";
    dayarray[4] = "星期四";
    dayarray[5] = "星期五";
    dayarray[6] = "星期六";
    var day1 = mydate.getday();
    var day = dayarray[day1];
    var hour = mydate.gethours();
    var minute = mydate.getminutes();
    var second = mydate.getseconds();
    var min = checktime(minute);
    var sec = checktime(second);
    var time1 = year + "年" + month + "月" + date + "日";
    var time2 = hour + "：" + min + "：" + sec;
    // document.write(time1+day+time2);
    //用js方法
    // document.getelementbyid("time").innerhtml = time1+day+time2;
    //用jquery方法
    $('#time').text(time1+day+time2);
    settimeout("showtime()",500);
    }
    function checktime(i){
      if(i<10){
        i = "0" + i;
      }
      return i;
    }
    </script>
  </body>
</html>

运行效果：

jQuery实现的电子时钟效果完整示例

实例小结：

1、注意js文件引用，要在head中声明，在body中展开时，无需重新申明引用信息等；
2、注意date有关函数，获取时候不要忘记了get和括号；
3、注意window.onload = function(){}的写法；
4、月份要注意数组开始顺序，从一月份开始，下标是0，以此类增；
5、注意时、分、秒函数为复数；
6、day表示获取星期几，但是获取的是数字，可以用数组转换（0表示周日，其它一一对应）
7、settimeout函数：settimeout(a,b),注意settimeout中out为小写
a:函数体 b:函数执行间隔
8、settimeout执行过程中，不要使用document.write,否则递归调用未实现；
9、jquery选择器中使用单引号还是双引号？
理论上单双都可以，在嵌套情况下视具体情况而定。
10、关于jquery获取标签文本内容：方法1：text（）；方法2：html（）；
注意，需要改变文本内容时，正确格式为：$('#time').text("content") 错误格式为：$('#time').text() = "content"

ps:这里再为大家推荐几款相关的在线工具供大家参考：

在线秒表工具：

unix时间戳(timestamp)转换工具：

在线世界各地时间查询：

更多关于jquery相关内容感兴趣的读者可查看本站专题：《jquery日期与时间操作技巧总结》、《jquery扩展技巧总结》、《jquery常见经典特效汇总》、《jquery选择器用法总结》及《jquery常用插件及用法总结》

希望本文所述对大家jquery程序设计有所帮助。

上一篇： JS定时器和单线程异步特性

下一篇： react create-react-app 怎么添加sass

推荐阅读