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

<!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. ASP怎样检測某目录是否存在,不存在则自己主动创建

    ASP怎样检測某目录是否存在,不存在则自己主动创建 folder=server.mappath("/imagess")  Set fso = CreateObject(" ...

  2. DataGridView导出数据到Excel及单元格格式的改动

    在软件开发过程中,时常会遇到把一些数据信息从DataGridView中导出到Excel表格中的情况.假设写的多了就会发现挺简单的,我们最好还是来写一写,留作备用,毕竟有时候Ctrl+C和Ctrl+V还 ...

  3. 关于move_uploaded_file()出错的问题

    move_upload0ed_file()函数返回參数较少.可是引起出错的原因却有非常多,所以对于刚開始学习的人难免会遇到问题. 出错原因大概有下面三点: 1．假设检測到文件不是来自post上传.这个 ...

  4. graphviz.js的图形及属性简单用法

    digraph A { graph[bgcolor="cadetblue" label="图的标题" fontsize=48 fontcolor="g ...

  5. oc21--super

    // // Phone.h #import <Foundation/Foundation.h> typedef enum { kFlahlightStatusOpen, kFlahligh ...

  6. angular2 使用swiper

    欢迎加入前端交流群交流知识&&获取视频资料:749539640 第一步: npm install swiper --save 第二步:下载swiper ts支持(http://micr ...

  7. 9.13[XJOI] NOIP训练32

    今日9.13 洛谷打卡:小吉(今天心情不错,决定取消密码) (日常记流水账) 上午 今天听说是鏼鏼的题目,题面非常的清真啊,也没有当初以为的爆零啊 T1 排排坐 非常非常清真的模拟或是结论题,再次将难 ...

  8. .net中的母版页中使用FindControl的使用

    前几天,遇到一个字段比较多的用户填写的页面(数据库表中就将近100个字段),怎么讲这些input的标签的值,保存数据库了?(使用的是母版页下面的aspx,不包括前段获取input的值,传给后台) 作为 ...

  9. Gitlab smtp 设置

    地址: https://blog.csdn.net/yongche_shi/article/details/78677163 # 腾讯云限制25发信端口,修改为465,并开启. https://doc ...

  10. JavaScript Cookies使用

    Cookie 是个存储在客户端(浏览器)记录信息确定用户身份的小文本文件,可以用来跟踪用户当前登陆状态和用户浏览页面的次数,记录用户输入的文本信息,也可以在页面间传递变量,记录用户一些行为. 当浏览器 ...