一、数码时钟，滚动切换时间。

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<style>

ul,li{list-style: none;padding: 0;margin: 0}

#clock {

    height: 172px;

    overflow: hidden;

}

#clock ul{

    overflow: hidden;

}

#clock li{

    float: left;

    position: relative;

}

#clock ul li img{

    display: block;

    height: 172px;

}

</style>

</head>

<body>

<div id="clock"></div>

</body>

<script>

window.onload  =function(){

    var clock = document.getElementById("clock")

    clockFn(clock)

}

function clockFn(obj){

    var dataArr = clock(); //获取时间

    var maxArr = [3,4,0,6,10,0,6,10] //保存每一组最大的值

    console.log(dataArr)

    obj.innerHTML += '<ul></ul>'

    var oUl = obj.getElementsByTagName('ul')[0]

    for(var i=0; i<dataArr.length;i++){

        oUl.innerHTML+='<li></li>'

    }

    var oLi = oUl.getElementsByTagName('li')

    //插入图片

    function getImg(){

        for(var i=0; i<maxArr.length;i++){

            if(maxArr[i]==0){

                oLi[i].innerHTML+='<img src="img/colon.JPG"/>'

            }else{

                for(var j=0; j<maxArr[i];j++){

                    oLi[i].innerHTML+='<img src="img/'+j+'.JPG"/>'

                }

            }

        }

    }

    getImg()  

    //获取图片的高度来计算滚动

    var oImgHeight = oLi[0].getElementsByTagName('img')[0].offsetHeight

    //每隔1秒调用一下函数来更新视图

    setInterval(autoPlay,1000)

    function autoPlay(){

        dataArr = clock()

        for(var i=0; i<oLi.length; i++){

            if(maxArr[i]!=0){

                var tt = -(dataArr.charAt(i) * oImgHeight)

                console.log(tt)

                startMove(oLi[i], {top: tt})

            }

        }

    }

}

//获取时间

function clock(){

    var myTime = new Date();

    var iHours = myTime.getHours();

    var iMin = myTime.getMinutes();

    var iSce = myTime.getSeconds();

    var str = checkTime(iHours)+":"+checkTime(iMin)+":"+checkTime(iSce)

    return str

}

//不齐补0

function checkTime(n){

    return n<10?"0"+n:""+n

}

function getStyle(obj, name)

{

	if(obj.currentStyle)

	{

		return obj.currentStyle[name];

	}

	else

	{

		return getComputedStyle(obj, false)[name];

	}

}

//startMove(oDiv, {width: 400, height: 400})

function startMove(obj, json, fnEnd)

{

	clearInterval(obj.MoveTimer);

	obj.MoveTimer=setInterval(function (){

		var bStop=true;		//假设：所有值都已经到了

		for(var attr in json)

		{

			var cur=0;

			if(attr=='opacity')

			{

				cur=Math.round(parseFloat(getStyle(obj, attr))*100);

			}

			else

			{

				cur=parseInt(getStyle(obj, attr));

			}

			var speed=(json[attr]-cur)/6;

			speed=speed>0?Math.ceil(speed):Math.floor(speed);

			if(cur!=json[attr])

				bStop=false;

			if(attr=='opacity')

			{

				obj.style.filter='alpha(opacity:'+(cur+speed)+')';

				obj.style.opacity=(cur+speed)/100;

			}

			else

			{

				obj.style[attr]=cur+speed+'px';

			}

		}

		if(bStop)

		{

			clearInterval(obj.MoveTimer);

			if(fnEnd)fnEnd();

		}

	}, 30);

}

</script>

</html>

　　

原生js，时间日期简单应用。的更多相关文章

  1. 原生 JS实现一个简单分页插件

    最近做的一个 PC端的需求,这个需求中有一个小点,页面底部有一块列表区域,这个列表的数据量比较大,需要进行分页控制,切换页码的时候,发送一个 ajax请求,在页面无刷新的情况下,实现列表数据的刷新,所 ...

  2. 原生js实现一个简单的轮播图

    想锻炼一下自己的原生js能力可以从写一个轮播图开始,轮播图的运用想必大家都知道吧,好了废话不多说,开始记笔记了,一些需要注意的点,我都在代码中标注了 首先是构造html: <div id=&qu ...

  3. JS时间日期

    JS获取当前时间 var myDate = new Date(); myDate.get[UTC]FullYear();    //获取完整的年份(4位,1970-????)myDate.get[UT ...

  4. 原生js实现一个简单的倒计时功能

    大家好,我是云中君!欢迎大家来观看我的博客 之前那,在群里看到很多人问,关于电商网站中的倒计时功能怎么实现,很多人说在网上找了很多插件,但是不是很会用,所以今天就在这里分享一下我封装的一个小的倒计时功 ...

  5. 一款好用的JS时间日期插件layDate

    觉得这个插件很不错,使用起来也很方便,推荐使用 1.插件截图 2.插件配置 选择很多,配置也很简单,插件官网:https://www.layui.com/laydate/配置说得很明确,基本操作就是: ...

  6. 如何用原生JS实现一个简单的promise

    我又又又回来了,最近真是累的跟狗一样,急需一个大保健回复一下子精力 我现在是一边喝着红牛一边写着博客,好了好了,不扯了,回归整体好吧 先简单来说一下啥是promise吧 它是什么?Promise是一个 ...

  7. js 时间日期函数小结

    Date.prototype.format = function(format){ var o = { "M+" : this.getMonth()+1, //month &quo ...

  8. python、js 时间日期模块time

    python 参考链接:https://www.runoob.com/python/python-date-time.html 时间戳 >>> print(time.time())# ...

  9. JS——时间日期控件

    原文:http://blog.sina.com.cn/s/blog_621768f30100qmfz.html 今天找到一个还不错的日历控件 下载地址:http://www.my97.net/dp/d ...

随机推荐

  1. APP漏洞自动化扫描专业评测报告（下篇）

    上篇.中篇回顾:通过收费情况.样本测试后的扫描时间.漏洞项对比以及扫描能力这几个方面对阿里聚安全[1].360App漏洞扫描[2].腾讯金刚审计系统[3].百度移动云测试中心[4]以及AppRisk ...

  2. ZOJ 1654--Place the Robots【二分匹配 &amp;&amp; 经典建图】

    Place the Robots Time Limit: 5 Seconds      Memory Limit: 32768 KB Robert is a famous engineer. One ...

  3. oracle 数据库中数据导出到excel

    确保安装了PLSQL Developer工具.连接数据库. FIle--new--SQL window 运行查询,选中要导出的数据,右键--copy to excel. 或者 运行查询后.右键--se ...

  4. oc20--继承2

    // // Phone.h #import <Foundation/Foundation.h> // 被继承的这个类我们称之为父类/ 超类 @interface Phone : NSObj ...

  5. oc18--self1

    // // Iphone.h // day13 #import <Foundation/Foundation.h> typedef enum { kFlahlightStatusOpen, ...

  6. 委托delegate,Action,Func,Predicate

    C#委托的介绍(delegate.Action.Func.predicate) 委托是一个类,它定义了方法的类型,使得可以将方法当作另一个方法的参数来进行传递.事件是一种特殊的委托. 1.委托的声明 ...

  7. [ASPX] DotLiquid-Asp.net模板引擎

    以前用过一段时间的PHP,感觉非常不错,其中最让我难忘的就是Smarty模板引擎,当时就微微地想Asp.net里有没有像这样的模板引擎呢?不过由于之后的工作内容都用不到,或者说没有想到用模板,这想法也 ...

  8. Selenium等待某个元素出现之隐式等待

    找不到元素这个问题困扰了两天了,一直怀疑是页面div层次太多,定位不准确.于是就从table开始到最后一层精确定位,仍然找不元素.怎么办,在网上搜索答案,说是可以加个隐式试试,于是在执行前加了一句等待 ...

  9. linux下恢复被删除的文件

    https://cloud.tencent.com/developer/article/1028317

  10. Android Drawable之getIntrinsicWidth()和getIntrinsicHeight()

              在Android的开发中,凡是需要画图的地方大都离不开类Drawable.Android的官方文档中介绍这个类就是被设计用来表示可以被画的东西.A Drawable is a ge ...