HTML 之 定时器
定时器
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定时器title>
<style type="text/css">
#first{
width: 100px;
height: 100px;
background: red;
position: absolute;
left: 0px;
}
style>
head>
<body>
<div id="first">div>
body>
<script type="text/javascript">
// 一次性定时器/延时器
// 第一种写法
setTimeout(function(){
}, 1000);
// 第二种写法
setTimeout(f, 1000);
function f(){
console.log("执行 f");
}
// 循环定时器
var timer = setInterval(function(){
console.log("循环定时器");
}, 2000);
setTimeout(function(){
// 清除定时器
clearInterval(timer);
// clearTimeout()
}, 8000);
var first = document.getElementById("first");
first.onclick = function(){
var move = setInterval(function(){
first.style.left = first.offsetLeft + 5 + "px";
if (first.offsetLeft >= 500) {
clearInterval(move);
}
}, 20)
}
script>
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图title>
<style type="text/css">
.box{
margin: 50px auto;
height: 400px;
width: 600px;
border: 5px green solid;
overflow: hidden;
position: relative;
}
.hidebox{
position: absolute;
width: 3600px;
height: 400px;
z-index: 1;
}
.hidebox div{
height: 400px;
width: 600px;
float: left;
font-size: 50px;
line-height: 400px;
text-align: center;
background-size:600px 400px;
}
.one{
background: url("images/8.png");
}
.two{
background: url("images/5.jpg");
}
.three{
background: url("images/4.jpg");
}
.four{
background: url("images/3.jpg");
}
input{
/*-webkit-appearance: button;*/
position: relative;
z-index: 100;
top: 185px;
width: 30px;
height: 30px;
background-color: #03030355;
border: 0;
color: white;
display: none;
}
.box:hover input{
display: inline-block;
}
.left{
border-radius: 0 15px 15px 0;
margin-left: -5px;
float: left;
}
.left:hover, .right:hover{
background-color: #03030399;
}
.right{
border-radius: 15px 0 0 15px;
margin-right: -5px;
float: right;
}
.list{
height:20px;
width:100px;
position: absolute;
left:200px;
bottom: 0px;
opacity: 0.8;
filter: alpha(opacity=80);
z-index: 100;
}
.list li{
height:20px;
width:20px;
background: #ccc;
border-radius: 50%;
float: left;
margin-right:5px;
cursor: pointer;
list-style: none;
}
style>
head>
<body>
<div class="box">
<input type="button" value="<" class="left">
<div class="hidebox">
<div class="four">div>
<div class="one">div>
<div class="two">div>
<div class="three">div>
<div class="four">div>
<div class="one">div>
div>
<input type="button" value=">" class="right">
<ul class="list">
<li>li>
<li>li>
<li>li>
<li>li>
ul>
div>
body>
<script type="text/javascript">
var hidebox = document.getElementsByClassName("hidebox")[0];
var left = document.getElementsByClassName("left")[0];
var right = document.getElementsByClassName("right")[0];
var box = document.getElementsByClassName("box")[0];
var list = document.getElementsByTagName("li");
hidebox.style.left = hidebox.offsetLeft - 600 + "px";
var temptimer;
function play(){
temptimer = setInterval(function(){
var timer = setInterval(function(){
hidebox.style.left = hidebox.offsetLeft - 50 + "px";
}, 10);
setTimeout(function(){
clearInterval(timer);
}, 120);
if (hidebox.offsetLeft <= -2400) {
hidebox.style.left = 0;
}
for (var i = 0; i < list.length; i++) {
list[i].style.backgroundColor = "grey";
}
var num = hidebox.offsetLeft / -600;
list[num].style.backgroundColor = "black";
}, 2000);
}
play();
function stop(){
setTimeout(function(){
clearInterval(temptimer);
});
}
box.onmouseover = stop;
box.onmouseout = play;
list[0].style.backgroundColor = "black";
for (var i = 0; i < list.length; i++) {
list[i].temp = i;
var width = -600;
list[i].onmouseover = function(){
hidebox.style.left = width * (this.temp + 1) + "px";
for (var i = 0; i < list.length; i++) {
list[i].style.backgroundColor = "grey";
}
list[this.temp].style.backgroundColor = "black";
}
}
left.onclick = function(){
var timers = setInterval(function(){
hidebox.style.left = hidebox.offsetLeft + 50 + "px";
}, 10);
setTimeout(function(){
clearInterval(timers);
}, 120);
if (hidebox.offsetLeft == -600) {
hidebox.style.left = -3000 + "px";
}
for (var i = 0; i < list.length; i++) {
list[i].style.backgroundColor = "grey";
}
var num = hidebox.offsetLeft / -600 - 2;
list[num].style.backgroundColor = "black";
};
right.onclick = function(){
var timers = setInterval(function(){
hidebox.style.left = hidebox.offsetLeft - 50 + "px";
}, 10);
setTimeout(function(){
clearInterval(timers);
}, 120);
if (hidebox.offsetLeft == -2400) {
hidebox.style.left = 0 + "px";
}
for (var i = 0; i < list.length; i++) {
list[i].style.backgroundColor = "grey";
}
var num = hidebox.offsetLeft / -600;
list[num].style.backgroundColor = "black";
};
script>
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style type="text/css">
.item{
width: 60px;
border-radius: 50px;
position: absolute;
left: 10px;
top: 0
}
style>
head>
<body>
<input type="button" value="开始" id="start">
<input type="button" value="停止" id="stop">
body>
<script type="text/javascript">
var start = document.getElementById("start");
var stop = document.getElementById("stop");
var createTimer;
stop.onclick = function(){
clearInterval(createTimer);
};
start.onclick = function(){
createTimer = setInterval(function(){
var gold = document.createElement("img");
gold.src = "images/金币.jpg";
gold.className = "item";
gold.style.left = Math.random() * 960 + 100 + "px";
document.getElementsByTagName("body")[0].appendChild(gold);
var downTimer = setInterval(function(){
gold.style.top = gold.offsetTop + 5 + "px";
if (gold.offsetTop >= 500) {
gold.remove();
clearInterval(downTimer);
}
}, 20);
}, 200);
};
script>
html>
http://blog.csdn.net/huzongnan/article/list