<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>网页标题</title>
<script type="text/javascript">
/* 屏幕随机出现小星星,点击可以取消星星
位置随机,大小随机
*/
var i=0;
var j=0;
var imgObj;
var timer;
function play(){
//开启函数
timer = window.setInterval(start2,500);
document.body.style.backgroundColor="#000";
}
function start2(){
i++;
//创建标签
imgObj = document.createElement('img');
//将标签挂靠到body下
document.body.appendChild(imgObj);
//给图片添加路径
imgObj.src = "images/xingxing.gif";
//图片的大小随机,定义随机函数
imgObj.width = get_random(15,100);
//随机位置
var x = get_random(0,window.innerWidth ? window.innerWidth : document.documentElement.clientWidth)-100;
var y = get_random(0,window.innerHeight ? window.innerHeight : document.documentElement.clientHeight)-100;
imgObj.style = "position:absolute;left:"+x+"px;top:"+y+"px;";
//消灭星星
imgObj.onclick =clear_star;
}
function get_random(max,min){
//公式,取整
var random = Math.random()*(max-min)+min;
random = Math.floor(random);
return random;
}
function stop(){
window.clearInterval(timer);
alert("共出现了"+i+"个星星");
}
function clear_star(){
document.body.removeChild(this);
}
</script>
</head>
<body>
<input type="button" οnclick="play()" value="点击此处开始" />
<input type="button" οnclick="stop()" value="点击此处结束" />
</body>
</html>
网页上随机出现小星星,加以修改可以做成打地鼠小游戏
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>网页标题</title>
<script type="text/javascript">
var demo;
window.onload = function(){
//得到demo1,2
demo = document.getElementById("demo");
var demo1 = document.getElementById("demo1");
var demo2 = document.getElementById("demo2");
//给demo1和demo2设置高度
demo1.innerHeight = demo.offsetHeight + "px";
demo2.innerHeight = demo1.innerHeight;
//给demo2设置内容
demo2.innerHTML = demo1.innerHTML;
//定时器,一秒移动一个位置
window.setInterval('start2()',40);
}
function start2(){
if(demo.scrollTop == demo.offsetHeight){
demo.scrollTop=0;
}else{
demo.scrollTop++;
}
}
</script>
<style type="text/css">
body,div,ul,li{margin:0px;padding:0px;}
ul,li{list-style:none;}
#demo{
width:170px;
margin:20px auto;
background-color:green;
padding:0px 5px;
overflow:hidden;
}
</style>
</head>
<body>
<div id="demo">
<div id="demo1">
<ul>
<li>好好学习天天向上</li>
<li>好好学习天天向上<</li>
<li>多读书多看报.</li>
<li>好好学习天天向上<</li>
<li><font color="red">好好学习天天向上<</font></li>
<li>好好学习天天向上<</li>
<li>多读书多看报</li>
</ul>
</div>
<div id="demo2"></div>
</div>
</body>
</html>
定时器实现网页上的文字滑动效果
上面两种是js很基础的定时效果,在学习中不断进行更新吧!