18168733823 在线客服 意见反馈 返回顶部
行业动态 技术分享

企业建站之数字时钟

2020-01-07 分享

jQuery调用版本:1.11.3

效果图

苏州网站建设

页面

<nav>
    <ul style="left: 0;">
        <li>0</li>
        <li>1</li>
        <li>2</li>
    </ul>
    <ul style="left: 36px;">
        <li>0</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
    </ul>
    <div style="left: 72px;">
        <p>:</p>
    </div>
    <ul style="left: 108px;">
        <li>0</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <ul style="left: 144px;">
        <li>0</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
    </ul>
    <div style="left: 180px;">
        <p>:</p>
    </div>
    <ul style="left: 216px;">
        <li>0</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <ul style="left: 252px;">
        <li>0</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
    </ul>
</nav>

CSS

* {
	padding:0;
	margin:0;
	list-style:none;
	vertical-align:middle;
}
body {
	background:#000;
	color:#333;
	font-size:36px;
}
ul {
	width:36px;
	position:absolute;
	transition:all .75s;
}
div {
	width:36px;
	position:absolute;
	color:#FFFFFF;
	top:36px;
}
nav {
	width:290px;
	margin:100px auto;
	position:relative;
	height:108px;
	overflow:hidden;
}
li {
	height:36px;
}
li.active {
	color:#fff;
}

JS

 time();
 setInterval(time, 1000)

 function time() {
     var Nowtime = new Date();
     var h = Nowtime.getHours();
     if (h < 10) h = '0' + h;
     var m = Nowtime.getMinutes();
     if (m < 10) m = '0' + m;
     var s = Nowtime.getSeconds();
     if (s < 10) s = '0' + s;
     //获得字符串时间
     var str = '' + h + m + s;
     var ul = document.getElementsByTagName('ul');
     var li = document.getElementsByTagName('li');
     //灰掉所有li
     for (var i = 0; i < li.length; i++) {
         li[i].className = ''
     }
     //字符串时间与每个ul关联
     for (var i = 0; i < ul.length; i++) {
         //
         ul[i].style.top = (parseInt(str[i]) - 1) * (-36) + 'px';
         //当前li样式激活
         ul[i].getElementsByTagName('li')[str[i]].className = 'active'

     }
     // console.log(str)
 }
在线咨询
Copyright © 2019 江苏如斯镁科技有限公司 版权所有 苏ICP备19052370号-3   友情链接: 在线商城 网站地图