您的位置：首页 > 其它

实现倒计时

2016-05-18 15:11 134 查看

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

</head>

<style>

*{margin: 0;padding: 0;}

html,body{width:100%;height: 100%; background:black;}

.tmieMachine{

//设置字体的颜色

color:white;

width:100px;

height: 100px;

//设置字体居中

text-align: center;

//设置字体离上面的距离为100px

line-height: 100px;

//设置字体的大小50px

font-size: 50px;

//设置为绝对定位

position: absolute;

margin: auto;

left: 0;

top: 0;

right: 0;

bottom:0;

}

//设置动画效果

@keyframes change{

//开始时的大小为0，透明度为0

from{transform: scale(0);opacity: 0;}

//结束时的大小为原来的3倍完全不透明

to{transform: scale(3);opacity: 1;}

}

//设置一个class 属性使其拥有这属性的元素可以调用这个动画

.change{

//执行动画的名称执行时间线性执行重复执行

animation: change 1s linear infinite;

</style>

<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>

<script>

// $(document).ready(function(){})

$(function(){

var time =10;//初始化计时的时间

// document.getElementsByClassName("tmieMachine")[0].innerHTML=time;

$(".tmieMachine").html(time);//动态添加到那div上面去

//开启一个定时器它的执行时间是每隔1s

setInterval(function(){

//如果时间大于0

if(time-->0){

$(".tmieMachine").html(time);

}else{

//如果时间小与或等于0显示放学并移去class属性为change

$(".tmieMachine").html("放学");

$(".tmieMachine").removeClass("change");

}

},1000);

});

</script>

<body>



<div class="tmieMachine change"></div>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航