JavaScript综述

最新推荐文章于 2021-04-07 22:52:07 发布

w_t_y_y

最新推荐文章于 2021-04-07 22:52:07 发布

阅读量428

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/w_t_y_y/article/details/78288962

版权

JS 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一、js有两种写法：

（1、）写在<script></script>标签中

（2、）写在外部文件中，通过<script type="text/javascript" src=" "></script>引用；

js除了函数和对象，其他的都是和htm、cssl脚本一起按顺序解析，所以一定要注意js代码的位置，只能使用该位置前面定义的元素而不能使用后面的；当然，函数和对象由于调用时才会执行，所以位置无所谓。

说明：js如遇字符串嵌套，应遵循“内双外单”原则。

二、js获取元素有很多种方法，常用的有三种方法：

（1、）document.getElementById() 获取元素唯一；

（2、）document.getElementsByClassName() 获取的为一个数组；

（3、） document.getElementsByTagName() 获取的为一个数组。

例1、连续变色，由绿-->红-->黄-->绿-->红。。。，每一秒钟变色一次，由此得setIntseval( changecolor，1000)；这个changecolor应该要实现变一次色：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.main{
				width: 100px;
				height: 100px;
				margin: auto;
				background-color: white;
			}
		</style>
		
	</head>
	<body>
		<div class="main" id="main"></div>
		<script type="text/javascript" >
	    var i=0;
            function change(){
            	var colors=["green","red","yellow"];
			var main=document.getElementById("main");
			if(i==2){
				i=0;
			}else{
				i++;
			}
		    main.style.backgroundColor=colors[i];
			
           }
			
           setInterval(change,1000);
		
		</script>
	</body>
</html>

例2、连续变大小，由15px依次变大再重复，每一秒钟变一次，由此得setIntseval( changesize，1000)；这个changesize应该要实现变一次大小：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		.main{
			font-size: 15px;
		}
	</style>
	<body>
		<p id="main" class="main">*</p>
		<script>
			var main=document.getElementById("main");
			var i=15;
			function fun(){
				if(i==50){
				i=15;
			  }else{
				i+=5;
			  }
			   main.style.fontSize=i+"px";
			}
			
			setInterval(fun,1000);
		</script>
	</body>
</html>

例3、星星变化：即大小和颜色一块变

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.div1{
				float: left;
			}
			.div2{
				float: left;
			}
			.div3{
				float: left;
			}
		</style>
	</head>
	<!-- xx1由小变大，由红变紫；xx2由大变小，由紫变红-->
	<body>
		<div class="div1">
		    <div class=""><p class="xx1">*</p></div>
		    <div class=""><p class="xx2">*</p></div>
		    <div class=""><p class="xx1">*</p></div>
		    <div class=""><p class="xx2">*</p></div>
		</div>
		<div class="div2">
		    <div class=""><p class="xx2">*</p></div>
		    <div class=""><p class="xx1">*</p></div>
		    <div class=""><p class="xx1">*</p></div>
		    <div class=""><p class="xx2">*</p></div>
		</div>
		<div class="div3">
		    <div class=""><p class="xx1">*</p></div>
		    <div class=""><p class="xx2">*</p></div>
		    <div class=""><p class="xx2">*</p></div>
		    <div class=""><p class="xx1">*</p></div>
		</div>
	</body>
	<script>
		var xx1=document.getElementsByClassName("xx1");//xx1
		var xx2=document.getElementsByClassName("xx2");//xx2
		var colors=["red","orangered","yellow","green","greenyellow","blue","purple"];
		var size1=15;//xx1初始大小
		var size2=50;//xx2初始大小
		var i=0;//xx1由红开始
		var j=colors.length-1;//xx2由紫开始
		function changesize(){
			if(size1==50){
				size1=15;
			}else{
				size1+=5;
			}
			for(var x=0;x<xx1.length;x++){
				xx1[x].style.fontSize=size1+"px";//由小变大
			}
			
			
			if(size2==15){
				size2=50;
			}else{
				size2-=5;
			}
			for(var x=0;x<xx1.length;x++){
			xx2[x].style.fontSize=size2+"px";//由大变小
			}
		}
		
		function changecolor(){
			if(i==colors.length-1){
				i==0;
			}else{
				i++;
			}
			for(var x=0;x<xx1.length;x++){
				xx1[x].style.color=colors[i];//由红变紫
			}
			
			if(j==0){
				j=colors.length-1;
			}else{
				j--;
			}
			for(var x=0;x<xx1.length;x++){
			xx2[x].style.color=colors[j];//由紫变红
			}
		}
		
		setInterval(changesize,500);
		setInterval(changecolor,500);
	</script>
</html>

效果：

例4、下雨，雨的颜色不同，速度不同，大小不同：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.div1{
				float: left;
				margin-left: 50px;
			}
			.rain1{
				width: 2px;
				height: 40px;
				background-color: green;
				position: relative;
			}
			.rain2{
				width: 2px;
				height: 30px;
				background-color: blue;
				position: relative;
			}
		</style>
	</head>
	<body>
		<div class="div1">
			<div class="rain1"></div>
			<div class="rain1"></div>
			<div class="rain2"></div>
			<div class="rain1"></div>
			<div class="rain1"></div>
			<div class="rain2"></div>
		</div>
		<div class="div1">
			<div class="rain2"></div>
			<div class="rain2"></div>
			<div class="rain1"></div>
			<div class="rain2"></div>
			<div class="rain1"></div>
			<div class="rain2"></div>
		</div>
		<script>
			function rain1(){
				var rain1=document.getElementsByClassName("rain1");
			    for(var i=0;i<rain1.length;i++){
			    	//rain1[i].style.top = Math.min(1050, rain1[i].offsetTop + 5) + "px";
			        var top=rain1[i].style.top;
			        var top=parseInt(top);//top本身是带单位的
			        if(top>=300){
			        	top=0;
			        }else{
			        	top=rain1[i].offsetTop+5;
			        }
			        rain1[i].style.top =top+"px";
			 
			    }
			}
			
			function rain2(){
				var rain2=document.getElementsByClassName("rain2");
			    for(var i=0;i<rain2.length;i++){
			    	var top=rain2[i].style.top;
			        var top=parseInt(top);//top本身是带单位的
			        if(top>=200){
			        	top=0;
			        }else{
			        	top=rain2[i].offsetTop+5;
			        }
			        rain2[i].style.top =top+"px";
			  }
			}
			setInterval(rain1,400);
			setInterval(rain2,600);
		</script>
	</body>
</html>

效果：

例5、一个简单的用户注册表单：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function check1(){
					var cusername=document.getElementById("cusername");
					var username=document.getElementById("username").value;
					if(username.length<4 || username.length>6){
						alert("4到6位之间");
						cusername.innerHTML="用户名不正确";
						return false;
					  }else{
					  	cusername.innerHTML="用户名正确";
						return true;
					  }
				}
				function check2(){
					var cpwd=document.getElementById("cpwd");
					var pwd=document.getElementById("pwd").value;
					//alert(pwd);
					if(isNaN(pwd)==true){
						alert("只能是数字");
						cpwd.innerHTML="密码不正确";
						return false;
					  }else{
					  	cpwd.innerHTML="密码正确";
						return true;
					  }
				}
				function check3(){
					var cpwd=document.getElementById("cpwd");
					var pwd=document.getElementById("pwd").value;
					var rpwd=document.getElementById("rpwd").value;
					if(pwd!=rpwd){
						alert("不相等")
					    crpwd.innerHTML="确认密码不正确";
						return false;
					  }else{
					  	crpwd.innerHTML="确认密码正确";
						return true;
					  }
				}
				function check4(){
					var cpnum=document.getElementById("cpnum");
					var pnum=document.getElementById("pnum").value;
					if(isNaN(pnum)==true){
						alert("只能是数字");
					    cpnum.innerHTML="手机号码不正确";
						return false;
					  }else{
					  	cpnum.innerHTML="手机号码正确";
						return true;
					  }
				
				}
				
				function check(){
					var a=check1();
					var b=check2();
					var c=check3();
					var d=check4();
					if(a&&b&&c&&d){
						return true;
					}else{
						return false;
					}
				}
			</script>
	</head>
	<body>
		<center>
			<h2>用户注册</h2>
			<form action="index.html"  οnsubmit="return check()">
				用户名：<input type="text" οnchange="check1()" id="username"/>
				<p id="cusername"></p><br>
				密码:<input type="password" οnchange="check2()" id="pwd"/>
				<p id="cpwd"></p><br>
				确认密码：<input type="password" οnchange="check3()" id="rpwd"/>
				<p id="crpwd"></p><br>
				手机号：<input type="text" οnchange="check4()" id="pnum"/>
				<p id="cpnum"></p><br>
				<input type="submit" value="提交" />
			</form>
			
		</center>
	</body>
</html>

w_t_y_y

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript综述

例一个简单的用户注册表单： function check1(){ var cusername=document.getElementById("cusername"); var username=document.getElementById("username").value; if(username.length6){
复制链接

扫一扫