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

<!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. Thread和ThreadGroup

    Thread和ThreadGroup 学习了:https://www.cnblogs.com/yiwangzhibujian/p/6212104.html  这个里面有Thread的基本内容: htt ...

  2. 多版本号并发控制(MVCC)在实际项目中的应用

    近期项目中遇到了一个分布式系统的并发控制问题.该问题能够抽象为:某分布式系统由一个数据中心D和若干业务处理中心L1,L2 - Ln组成:D本质上是一个key-value存储,它对外提供基于HTTP协议 ...

  3. 黑马day07 登录注冊案例(一)

    简单介绍:依据三层架构的思想设计本案例. 1.搭建好开发环境 准备好须要的包和模拟数据库配置文件users.xml -->cn.itheima.dao -->cn.itheima.serv ...

  4. 如何让 ssh 允许以 root 身份登录

    默认情况下,Pack 上的 root 用户不能用通过密码来远程登录,可以用一下命令来做:(注意要在 root 权限下) sed -i 's/PermitRootLogin\swithout-passw ...

  5. vim设置solarized配色

    最近在学习使用VIM.我选择Solarized配色.相信很多人也都在用. 官网地址: http://ethanschoonover.com/solarized 看这配色:八卦乾坤,赏心悦目,高端大气上 ...

  6. Linux如何把以下文件夹修改为root权限?

    inux 修改文件目录所有者例:要将当前目录下名 title 的文件夹及其子文件的所有者改为geust组的su用户,方法如下:#chown -R su.geust title-R 递归式地改变指定目录 ...

  7. Android进程回收机制LMK(Low Memory Killer)【转】

    本文转载自:http://www.cnblogs.com/wytiger/p/5744752.html 熟悉Android系统的童鞋都知道,系统出于体验和性能上的考虑,app在退到后台时系统并不会真正 ...

  8. hdoj---Rescue

    Rescue Time Limit : 2000/1000ms (Java/Other)   Memory Limit : 65536/32768K (Java/Other) Total Submis ...

  9. java.sql.SQLException: Field 'id' doesn't have a default value解决方案

    转自:https://blog.csdn.net/xinghuo0007/article/details/51810867 自增长:java.sql.SQLException: Field 'id' ...

  10. BZOJ 2140 Tarjan

    思路: 跟POJ有一道时限挺长的题一模一样  哦 POJ 1904 题解可以看这个(捂脸) http://blog.csdn.net/qq_31785871/article/details/52963 ...