js时钟

最新推荐文章于 2022-10-01 23:19:21 发布
最新推荐文章于 2022-10-01 23:19:21 发布
阅读量369 收藏 2
点赞数
分类专栏： JavaScript积跬步至千里 文章标签： js时钟 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wstpa/article/details/45556255
版权

1、获取当前时间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

</head>
<body>
    <div id="box"></div>
    <script type="text/javascript">
    var oBox=document.getElementById('box');
    setInterval(function(){
        var oDate=new Date();
        var iYear=oDate.getFullYear();  //年
        var iMon=oDate.getMonth()+1; //月
        var iDate=oDate.getDate(); //日
        var iH=oDate.getHours(); //时
        var iM=oDate.getMinutes(); //分
        var iS=oDate.getSeconds(); //秒
        oBox.innerHTML=iYear+'年'+iMon+'月'+iDate+'日'+toZero(iH)+'时'+toZero(iM)+'分'+toZero(iS)+'秒'
    },1000)
    function toZero(num){
        if ( num < 10 ) {
            return '0'+num;  //str类型
        }else{
            return ''+num; //为了保持一致，str
        };
    }
    </script>
</body>
</html>

2、图片版时钟

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
    window.onload=function(){
        var aImg=document.getElementsByTagName('img');
        getDate();
        setInterval(getDate,1000);

        function getDate(){
            var oDate=new Date();
            var iYear=oDate.getFullYear();
            var iMon=oDate.getMonth()+1;
            var iDate=oDate.getDate();
            var iH=oDate.getHours();
            var iMin=oDate.getMinutes();
            var iS=oDate.getSeconds();

            var str=String(iYear)+toZero(iMon)+toZero(iDate)+toZero(iH)+':'+toZero(iMin)+':'+toZero(iS);
            console.log(str)
            for (var i = 0; i < aImg.length; i++) {

                aImg[i].src='img/'+ str.charAt(i) +'.png';

            };
        }
    }

    function toZero(num){
        if ( num < 10 ) {
            return '0'+num;  //str类型
        }else{
            return ''+num; //为了保持一致，str
        };
    }
    </script>
</head>
<body>
    <img src="img/0.png">
    <img src="img/0.png">
    <img src="img/0.png">
    <img src="img/0.png">
     年
    <img src="img/0.png">
    <img src="img/0.png">
    月
    <img src="img/0.png">
    <img src="img/0.png">
    日
    <img src="img/0.png">
    <img src="img/0.png">
    <img src="img/second.png">
    <img src="img/0.png">
    <img src="img/0.png">
    <img src="img/second.png">
    <img src="img/0.png">
    <img src="img/0.png">


</body>
</html>

3、抖动的图片时钟

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    * {margin: 0;padding: 0}
    #box {width: 1040px;height: 172px;position: relative;margin: 170px auto}
    img {border:none;outline: none;display: block;position: absolute;top: 0}
    </style>
    <script type="text/javascript">
    window.onload=function(){
        var aImg=document.getElementsByTagName('img');
        var oldTime='';
        ini();
        setInterval(ini,1000)
        function ini(){
            var oDate=new Date();
            var str=toZero(oDate.getHours())+':'+toZero(oDate.getMinutes())+':'+toZero(oDate.getSeconds());
            for (var i = 0; i < aImg.length; i++) {
                aImg[i].style.left=i*130+'px';

                    aImg[i].src='img/'+ str.charAt(i)+'.jpg';


            };
            //比如第一次str是12：12：12，和oldTime.charAt(i)都不等，所以整体跳一下。
            //然后将12：12：12赋值给oldTime，然后str=12：12：13;在与oldTime.charAt(i)(此时oldtime等于12：12：12)；
            //所以最后一个数动。
            for (var i = 0; i < str.length; i++) {
                if (str.charAt(i) != oldTime.charAt(i)) {
                    toShake(aImg[i]);
                };
            };
            oldTime=str;
        }
    }
    function toZero(num){
        if (num<10) {
            return "0"+num;
        }else{
            return ''+num;
        };
    }
    function toShake(obj){
        var arr=[];
        var iNow=0;

        for (var i = 10; i >0; i-=2) {
            arr.push(i,-i);   //不会添加到0；所以for后补个0
        };
        arr.push(0);

        var timer=setInterval(function(){
            obj.style.top=arr[iNow]+'px';
            iNow++;
            if (iNow==0) {
                clearInterval(timer)
            };
        },30)
    }
    </script>
</head>
<body>
    <p id="text"></p>
    <div id="box">
        <img src="img/0.jpg">
        <img src="img/0.jpg">
        <img src="img/colon.jpg">
        <img src="img/0.jpg">
        <img src="img/0.jpg">
        <img src="img/colon.jpg">
        <img src="img/0.jpg">
        <img src="img/0.jpg">
    </div>
</body>
</html>

4、向上滚动的图片时钟

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    * {margin: 0;padding: 0}
    img {border:none;outline: none;display: block;}
    #box {width: 1080px;height: 172px;margin: 170px auto;overflow: hidden;}
    #box ul {list-style: none;width: 1600px;height: 172px;background: red}
    #box ul li {width: 122px;height: 354px;float: left;padding-left: 10px;position: relative;left:0;-border: 1px solid #000 }

    </style>
    <script type="text/javascript" src="doMove.js"></script>
    <script type="text/javascript">
    window.onload=function(){
        var oList=document.getElementById('list');
        var aLi=oList.getElementsByTagName('li');
        var aUp=getClassName(oList,'up');
        var aDown=getClassName(oList,'down');
        var aCenter=getClassName(oList,'center');
        var oldTime='';
        ini();

        setInterval(ini,1000)
        function ini(){
            var oDate=new Date();
            var str=toZero(oDate.getHours())+':'+toZero(oDate.getMinutes())+':'+toZero(oDate.getSeconds());
            for (var i = 0; i < aUp.length; i++) {
                aUp[i].src="img/"+str.charAt(i)+".jpg";
                aCenter[i].src="img/"+str.charAt(i)+".jpg";
                aDown[i].src="img/"+str.charAt(i)+".jpg";

            };
            for (var i = 0; i < aLi.length; i++) {
                //console.log(aLi[i].style.top)
                var arr=[-172,0,172];
                if (str.charAt(i) != oldTime.charAt(i)) {

                    doMove(aLi[i],'top',arr[1]);
                    //console.log(aLi[i].style.top)
                    if (aLi[i].style.top=0+'px') {
                        doMove(aLi[i],'top',arr[0]);

                    };

                };
            };
            oldTime=str;
        }
    }

    function toZero(num){
        if (num<10) {
            return "0"+num;
        }else{
            return ''+num;
        };
    }
    function getClassName(oParent,sClassName){
        var elems=oParent.getElementsByTagName('*');
        var result=[];
        for (var i = 0; i < elems.length; i++) {
            if(elems[i].className==sClassName){
                result.push(elems[i])
            }
        };
        return result;
    }
    function getStyle(obj,attr){
        return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj,false)[attr];
    }
    </script>
</head>
<body>
    <p id="text"></p>
    <div id="box">
        <ul id="list">
            <li><img src="img/0.jpg" class="up">
                <img src="img/0.jpg" class="center">
                <img src="img/0.jpg" class="down">
            </li>
            <li><img src="img/0.jpg" class="up">
                <img src="img/0.jpg" class="center">
                <img src="img/0.jpg" class="down">
            </li>

            <li><img src="img/colon.jpg" class="up">
                <img src="img/colon.jpg" class="center">
                <img src="img/colon.jpg" class="down">
            </li>

            <li><img src="img/0.jpg" class="up">
                <img src="img/0.jpg" class="center">
                <img src="img/0.jpg" class="down">
            </li>
            <li><img src="img/0.jpg" class="up">
                <img src="img/0.jpg" class="center">
                <img src="img/0.jpg" class="down">
            </li>

            <li><img src="img/colon.jpg" class="up">
                <img src="img/colon.jpg" class="center">
                <img src="img/colon.jpg" class="down">
            </li>

            <li><img src="img/0.jpg" class="up">
                <img src="img/0.jpg" class="center">
                <img src="img/0.jpg" class="down">
            </li>
            <li><img src="img/0.jpg" class="up">
                <img src="img/0.jpg" class="center">
                <img src="img/0.jpg" class="down">
            </li>
        </ul>

    </div>
</body>
</html>

这里写图片描述

见面时的呼吸都曾反复练习
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS时钟
qq_42886373的博客
06-19 246
<script language="JavaScript"> // 显示时间 function myTimer() { var date = new Date(); // var month = date.getMonth(); var time = date.toLocaleTimeString(); var year = date.getFullYear(); .
python学习笔记
热门推荐
鸟窝
09-14 7万+
官网http://www.python.org/ 官网library http://docs.python.org/library/ 中文手册，适合快速入门 http://download.csdn.net/detail/xiarendeniao/4236870 python cook book中文版 http://download.csdn.net/detail/XIAREND
javascript时钟的开发制作
最新发布
月影WEB的博客
10-01 862
javascript时钟的开发制作
js实现时钟
m0_69745415的博客
05-09 396
// console.log(“number=” + number, “index=” + index); var rad = 2 * pi / 12 * index; var x = Math.cos(rad) * (r - 30); var y = Math.sin(rad) * (r - 30); ctx.textAlign = ‘center’; // 让数字落在坐标的中心 ctx.textBaseline = ‘middle’; ctx.fillStyle = “black”; // 在坐标为(x
node.js时钟案例
04-13
总结来说，"node.js时钟案例"是一个综合性的项目，涉及到Node.js服务器端编程、HTML和CSS的处理、JavaScript的执行以及前端交互设计。通过学习和实践这个案例，开发者可以加深对Node.js、前端技术和动态Web页面构建...
Javascript时钟
03-19
JavaScript时钟是一种常见的网页动态效果，它通过JavaScript编程语言实现，可以实时显示当前时间或日期。在本篇文章中，我们将深入探讨如何利用JavaScript创建一个功能齐全的时钟，并理解其背后的原理。 首先，我们...
JavaScript时钟
11-01
JavaScript时钟是一个基于JavaScript编程语言实现的实时时间显示功能，它可以动态更新页面上的时间，为用户提供当前日期和时间。在网页开发中，JavaScript时钟常用于创建动态用户体验，例如显示实时倒计时、日程提醒...
让网页背景图片 固定，不随缩小放大而变化
道路是曲折的，前途是光明的
09-12 1万+
最近在百度首页，缩小放大时，发现背景图片一直保持不变，只是内容在变化，看看了源码，才知道怎么回事。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * {margin: 0;padding: 0}
js中offsetParent，offsetLeft的兼容问题
道路是曲折的，前途是光明的
08-11 2878
一、offsetParent 先简单的来个结构,三个嵌套的div，主要是找div3的offsetParent<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * {margin: 0;paddin
firstChild与firstElementChild的兼容处理
道路是曲折的，前途是光明的
11-24 2871
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> window.onload=function(){ var oUl=document.getElementById(
简单的图片轮播（重要的是思想）
道路是曲折的，前途是光明的
05-18 1692
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>轮播</title> <style type="text/css"> * {margin:0;padding: 0} ul {list-style: none;} img {border: none;} #
拍平多维数组
道路是曲折的，前途是光明的
04-26 1308
//上次参加阿里web前端笔试（本人小白，只是为了看看自己距离web前端还有多远距离），结果很悲伤。里面有个题是说拍平数组。当初没做出来。          Document          var arr=[1,2,3,4,5,3,2,1]     function show(arr){         var json={};         var
js闭包总结
道路是曲折的，前途是光明的
08-09 991
学了，也看了一些关于闭包的东西，做个总结，以备不时之需，可能有不足的地方，我对闭包也不是很了解。一、什么是闭包？ 闭包百度一搜，会有太多的解释。 闭包就是嵌套在函数里面的内部函数，并且该内部函数可以访问外部函数声明的所有局部变量、参数、和其它内部函数。当该内部函数在外部函数被调用时就生成了闭包。说了一堆，举例说明：function wai(){ var num=1; functi
数组去重-两个for
道路是曲折的，前途是光明的
04-26 903
//要点：1、新建一个空数组，result //2、将原数组每项与result中的每项做比较，不相等就push到result中，反之则不添加。          Document          var arr=[48,13,25,1,32,15,41,3,5,1,25,48]          function doWeight(arr){       
getBoundingClientRect（）
道路是曲折的，前途是光明的
09-08 854
一、getBoundingClientRect（），元素到可视区的距离 主要是在ie下有个2像素的差别。可以封装一个函数：function GetRect(element){ var rect=element.getBoundingClientRect(); var top=document.documentElement.clientTop; //非ie是0，ie是2；
小效果：商品抢购（多个）
道路是曲折的，前途是光明的
05-08 854
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * {margin: 0;padding: 0} ul {list-style: none;} img {border: none;
利用JSON-数组去重
道路是曲折的，前途是光明的
04-26 835
Document          var arr=[1,2,3,4,5,3,2,1]     function show(arr){         var json={};         var result=[];         for (var i = 0; i             //json.arr[i]) json.1 undefind     
多图片滚动
道路是曲折的，前途是光明的
05-03 803
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * {margin:0;padding: 0} ul {list-style: none;} img {border: none;o
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值