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

<!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. [Cypress] Find and Test Focused Input with Chrome’s DevTools in Cypress

    In this lesson, we’ll add tests that finds a focused input. We’ll use Chrome’s dev tools from inside ...

  2. [React] Forward a DOM reference to another Component using forwardRef in React 16.3

    The function forwardRef allows us to extract a ref and pass it to its descendants. This is a powerfu ...

  3. libyuv库的使用

    libyuv是Google开源的实现各种YUV与RGB之间相互转换.旋转.缩放的库.它是跨平台的,可在Windows.Linux.Mac.Android等操作系统.x86.x64.arm架构上进行编译 ...

  4. android小技巧:在activity中实现与绑定的fragment的回调

    看到标题你可能会想是一个多么高大上的技巧呢?事实上非常一般就是自己定义回调函数. 首先我们知道activity之间的数据传递有几种方式: 一是startActivityForResut()启动一个ac ...

  5. Libgdx: android单机斗地主支持局域网wifi联网的网络模块核心代码

    这个作品是我近期写的,结合我的毕业设计的通信模块和之前的单机版斗地主.我已经上架到豌豆荚了,贴了点广告,看看能不能赚点茶钱. 但是一点也不乐观.因此我想分享给大家源代码. 仅仅要不用于商业. 以下先贴 ...

  6. ps -aux ,ps aux ,ps -ef 的区别

    Linux中的ps命令是Process Status的缩写.ps命令用来列出系统中当前运行的那些进程.ps命令列出的是当前那些进程的快照,就是执行ps命令的那个时刻的那些进程,如果想要动态的显示进程信 ...

  7. js与jquery基础知识对比（一）---2017-05-06

    用表格做的,想要对比的内容一目了然,红色部分为重点   js jquery 取元素 id: document.getElementById("aa"); 取到的是dom对象 cla ...

  8. mysql 强制修改密码

    mysql忘记密码时强制修改步骤如下: 1.用命令编辑配置文件/etc/my.cnf 2.添加一条语句使其变为不用密码就能进入的状态 skip-grant-tables 3.保存并退出,然后再命令行输 ...

  9. LVS十种调度算法介绍

    1.轮叫调度(Round Robin)(简称rr) 轮叫调度(Round Robin Scheduling)算法就是以轮叫的方式依次将请求调度不同的服务器,即每次调度执行i = (i + 1) mod ...

  10. Centos7 docker nginx容器搭建

    一.安装docker http://www.cnblogs.com/WJ--NET/p/8553807.html 二.创建Dockerfile #创建文件夹 mkdir centos_nginx cd ...