网页动态效果与文本滑动实现-优快云博客

本文介绍了如何使用JavaScript创建网页动态效果，包括随机出现小星星和文字滑动，并提供了实现代码。通过实例展示了定时器的应用，为前端开发者提供实践参考。


<!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" onclick="play()" value="点击此处开始"   />
<input type="button" onclick="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很基础的定时效果，在学习中不断进行更新吧！