1.test
<input type="button" value="后退" id="btn1">
<script src="common.js"></script>
<script>
//点击跳转到指定的页面
my$("btn1").onclick = function () {
// 历史对象 history.back() 返回上一个历史记录
//window.history.back();
window.history.go(-1);
}
</script>
2.定时器
<input type="button" value="前进" id="btn">
<script src="common.js"></script>
<script>
/*
* 设置定时器 setInterval(函数, 时间) 每过多少秒更新一次 时间--->毫秒 1000毫秒 = 1秒
* 清除定时器 clearInterval(要清除定时器的id值)
* */
var timer = setInterval(function () {
console.log("halo")
},1000)
console.log(timer);//1
my$("btn").onclick = function () {
//清除定时器
clearInterval(timer)
}
</script>
3.一起摇起来
<style>
#dv{
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
}
</style>
</head>
<body>
<input type="button" value="摇起来" id="btn1">
<input type="button" value="停止" id="btn2">
<div id="dv"></div>
<script src="common.js"></script>
<script>
var timer;
my$("btn1").onclick = function () {
//先清除,再添加定时器
clearInterval(timer);
timer = setInterval(function () {
//设置随机数
var x = parseInt(Math.random()*100 + 1);// 1-100的区间
//设置元素的top的值和left的值
my$("dv").style.left = x +"px";
my$("dv").style.top = x +"px";
var arr = ["red","green","blue","pink","orange","black","yellow","purple","cyan","gold","grey","hotpink","white"];
var color = parseInt(Math.random()*13);// 1-100的区间
my$("dv").style.backgroundColor = arr[color];
}, 100)
}
my$("btn2").onclick = function () {
clearInterval(timer);
}
</script>
4.一闪一闪亮晶晶
<style>
#dv{
width: 500px;
height: 500px;
background-color: #000;
position: relative;
}
span{
font-size: 30px;
color:pink;
position: absolute;
}
</style>
</head>
<body>
<input type="button" value="点我" id="btn">
<div id="dv"></div>
<script src="common.js"></script>
<script>
//注册点击事件
my$("btn").onclick = function () {
setInterval(function () {
my$("dv").innerHTML = "<span>★</span>"
var x = parseInt(Math.random()*500 +1);
var y = parseInt(Math.random()*500 +1);
my$("dv").firstElementChild.style.left = x+"px";
my$("dv").firstElementChild.style.top = y+"px";
},10)
}
</script>
230
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
