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

<!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. python使用pytest+pytest报告

    需要安装pytest和pytest-html pip3 install -U pytest pip3 install -U pytest-html

  2. java,wavToMP3格式转换

    这里须要用到一个jar包:jave-1.0.1.jar,下载地址的话自己百度吧. 废话不多说直接贴代码: import it.sauronsoftware.jave.AudioAttributes; ...

  3. GET，POST，PUT，DELETE的区别 和 用法

    Http定义了与服务器交互的不同方法,最基本的方法有4种,分别是GET,POST,PUT,DELETE.URL全称是资源描述符,我们可以这样认为:一个URL地址,它用于描述一个网络上的资源,而HTTP ...

  4. Huffman编码实现压缩解压缩

    这是我们的课程中布置的作业.找一些资料将作业完毕,顺便将其写到博客,以后看起来也方便. 原理介绍 什么是Huffman压缩 Huffman( 哈夫曼 ) 算法在上世纪五十年代初提出来了,它是一种无损压 ...

  5. 国外物联网平台初探（一） ——亚马逊AWS IoT

    平台定位 AWS IoT是一款托管的云平台,使互联设备可以轻松安全地与云应用程序及其他设备交互. AWS IoT可支持数十亿台设备和数万亿条消息,并且可以对这些消息进行处理并将其安全可靠地路由至 AW ...

  6. 框架-Eureka：初识 Eureka

    ylbtech-框架-Eureka:初识 Eureka 1.返回顶部 1. 1.1. http://localhost:2100/ 1.2. 2. Eureka - Last N events 3. ...

  7. php打马赛克

    本文实例讲述了php实现图片局部打马赛克的方法.分享给大家供大家参考.具体分析如下: 原理: 对图片中选定区域的每一像素,增加若干宽度及高度,生成矩型.而每一像素的矩型重叠在一起,就形成了马赛克效果. ...

  8. hihoCoder-1839 榶榶榶 数学

    题面 题意:给你一个500000长度的数字,然后环形的让每位做头,例如123,就有123,231,312三个,然后问这n个数字的和S,S的最小非1因子是多少 题解:每个数字在每个位置都会有一次,如果说 ...

  9. c语言system()介绍

    2013-09-0916:06:02 1. 头文件: #include <stdlib.h> 2. 定义函数: int system(const char * string); 3. 函数 ...

  10. jah老师中关于集合的总结

    --------概述:1.Java 集合就像一种容器,可以把多个对象的引用放入容器中 2.Java 集合类可以用于存储数量不等的多个对象,还可用于保存具有映射关系的关联数组3.Java 集合可分为 S ...