第一个事件动画和总结

摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>第一个事件动画</title> <style type="text/css"> input{height:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>第一个事件动画</title>
	<style type="text/css">
		input{height: 6px;width: 256px;border: 2px solid #ccc;margin-top:20px; padding: 20px; }
		button{height: 50px;width: 300px;margin-top:20px; background: #04BAFB; border: none; color:#fff; }
		div{width: 100px;height: 100px;border: 1px solid #ccc; background: pink;}
	</style>
</head>
<body>

	<script type="text/javascript">
	function myonmouseover(a){
		a.style.background="#1FC8FD"
	}
	function myonmouseout(b){
		b.style.background="#04BAFB"
	}
	function myonclick(c){
		c.style.background="#C0C0C0"
	}
	function myonkeydown(d){
		d.style.background="#FFFFE0"
	}

	</script>

	<form method="get/post" action="url地址">
		<input type="text" name="username" placeholder="QQ号码/手机/邮箱" onclick="myonclick(this)"><br>
		<input type="password" name="pwd" placeholder="密码" onkeydown="myonkeydown(this)"><br>
		<button onmouseover="myonmouseover(this)" onmouseout="myonmouseout(this)">登录</button>
	</form>

</body>
</html>

JavaScript语言中有多种类似于C语言的语句,如if语句、for循环、while循环、do-while循环等等,这些语句可以在<script>标签中使用,构成相应的逻辑从而更方便于网页的制作。还可以使用length、charAt等属性可以对字符串进行操作，可以再JS中实现字符串和数字的相应转换。若想用一个变量存储一组值还可以使用数组，变量多的时候还能使用二维数组甚至多维数组。若需要多次使用同一段代码，可以把它们封装成一个函数，函数不仅可以封装任意多条语句，还能用于任何地方，可以再任何地方调用。在JS内部还存在全局变量和局部变量以及生存周期的概念。在HTML中通过键盘鼠标的动作会触发种种事件，而这些事件的控制就在JS之中。

在上述所给的代码是通过事件动画模仿qq登陆界面的HTML页面，鼠标移到登录框点击后离开，登陆框内部的颜色会变深，在密码框部分，当在内部输入密码时，框内部的颜色会产生变化有提示的效果。鼠标移到登陆上时，颜色会变浅，离开后颜色会恢复。

批改老师：灭绝师太批改时间：2018-11-16 09:09:57
老师总结：作业完成的不错！还是蛮用心的，继续保持！

第一个事件动画和总结

热门词条