web前端开发入门十个小项目（Hbuilder）

最新推荐文章于 2025-03-24 10:30:16 发布

rosie同学

最新推荐文章于 2025-03-24 10:30:16 发布

阅读量9.8k

点赞数 36

分类专栏： web开发文章标签： web开发小项目 hbuilder 前端开发网页开发

本文链接：https://blog.csdn.net/Johan666/article/details/97263620

版权

编译器：Hbuilder（读代码中详细注释可易懂）
项目导航：

项目名称	实现功能
鼠标点击事件	鼠标点击按钮“不好”，当点击触发时就会弹跳
强制勾选	一选中则不能取消
漂亮的跑马灯	文字加速滚动和图片滚动鼠标触摸暂停
点击按钮换颜色	点击不同的按钮，覆盖原来颜色，呈现新的颜色
简单的搜索框	获取光标后，框中提示消失；输入内容后不会消失
中英文变换	点击按钮切换中英文
网页字体颜色大小间距变换	四个经典的type，用下拉列表选择字体类型，字体大小，背景颜色和字体间距
盒子碰撞检测	在限定范围内碰到边框进行反弹
英雄点击投票	点击图片投票，票数增加
网页常用布局与超链接	套用常用的淘宝，京东网页布局

（1）鼠标点击事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>强制答应</title>
	</head>	
	<style>
		#div01{
			width: 250px;
			height: 50px;
			/*边框solid实线*/
			border: 1px solid;
			left: 300px;
			top:300px;
			position: absolute;
			/*相对绝对定位*/
		}
	</style>
	<body>
		<div id="div01">
			<center>
			hello！请我麦当劳好不好？
			<!--换行-->
			<br>
			<!--设置两个按钮。-->
			<!--onclick在鼠标点击弹起之后触发的事件-->
			<!--onmousedown在鼠标按键按下去的瞬间触发的-->
			<!--比如我们习惯按下鼠标托至另外一个地方松开时候，onclick并不能触发，只能用onmousedown-->
			<input type="button"value="好"onclick="fun()"/>
			<input type="button"value="不好"onmousedown="overs()"/>
			</center>
		</div>
	</body>	
</html>
<script type="text/javascript">
	function overs()
	{
		//随机数
		var x=Math.floor(Math.random()*600);
		var y=Math.floor(Math.random()*600);
		//获取div对象
		var div01=document.getElementById("div01");
		//div的位置发生变化
		div01.style.left=x+"px";
		div01.style.top=y+"px";	
	}
	function fun()
	{
		for(var i=0;i<=20;i++)
		{
			//打开网页
			//window.open("http://baidu.com");
			alert("真棒！下次继续！");
		}
	}
</script>

Math.random()：产生一个[0，1)之间的随机数；Math.random()*600即产生0-600的随机数。
(int)Math.random()*600即产生0-600的随机整数。
alert（“ ”）网页弹窗使用。document.getElementById(“div01”)是获取控件的ID值，获取对象。
onclick在鼠标点击弹起之后触发的事件；onmousedown在鼠标按键按下去的瞬间触发的事件。
window.open（）是执行函数体时跳转链接。
在这里插入图片描述
（2）强制勾选

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--checked="checked"为默认选中-->
		<input type="checkbox"id="ck01" checked="checked"onclick="fun01()"/>贪玩蓝月			
		<input type="checkbox"id="ck02" checked="checked"onclick="fun02()"/>热血传奇			
		<input type="checkbox"id="ck03" />吃鸡
		<!--按钮-->
		<input type="button"value="下载" />
	</body>
</html>
<!--脚本-->
<script type="text/javascript">
//javascript脚本
//function方法关键字
//该方法是使复选框选中后不能取消
function fun01()
{
	//获取当前的复选框
	var ck01=document.getElementById("ck01");
	//复选框对象被选中时
	ck01.checked="checked";
}
function fun02()
{
	//获取当前的复选框
	var ck02=document.getElementById("ck02");
	//复选框对象被选中时
	ck02.checked="checked";
}	
</script>

checked="checked"为默认选中。
但js例面的点击事件的函数中的ck01.checked="checked"即是无论是默认点中还是手动点中，一旦点中，则不可取消选择。
在这里插入图片描述
（3）漂亮的跑马灯

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		#na{
			width: 100%;
			height: 200%;
			border: 1px solid;
		}
	</style>
	<body>	
		<!--滚动标签(方向和速度)-->
		<marquee id="na"direction="left"scrollamount="80">
			<font id="f01"size="6"color="firebrick">渣渣辉在此！</font>
		</marquee>
		<input type="button" value="加速" onclick="adds()"/>
		<marquee id="na02"direction="left"scrollamount="10">
			<!--onmouseover鼠标放上去时-->
			<!--onmouseout鼠标离开时-->
			<img src="img/img1.jpg"width="80px"height="80px" onmouseover="fun()"onmouseout="ou

最低0.47元/天解锁文章