javascript经典案例这本书,javascript基础入门案例-优快云博客

本文链接：https://blog.youkuaiyun.com/chatgpt002/article/details/134380607

本文介绍了JavaScript的基础案例，包括下拉框转换文本、登录界面密码验证、数字加密、素数和最大公约数判断，适合初学者学习和参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本篇文章给大家谈谈javascript经典案例这本书，以及javascript基础入门案例，希望对各位有所帮助，不要忘了收藏本站喔。

1、通过下拉框的转换实现基本的文本的转换

代码如下：


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="作业4样式.css"/>
	</head>
	<body>
		< type="text/java">
			function choose(){
				var taici =document.getElementById("check").value;

				document.getElementById("txt").value =taici;
			}
		</>
		<div  class="box">
			<div class="left">
			<select id="check" onchange="choose()">
				<option value="一个字，干他">程咬金</option>
				<option value="与其受制于人，不如听命于己">杨戬</option>
				<option value="天上地下，为朕独尊">嬴政</option>
				<option value="从此刻开始，战场由我一人主宰">吕布</option>
				<option value="心怀不惧，方能翱翔于天际">赵云</option>
				<option value="不会击败我的，只会让我更强大">哪吒</option>
				</select>
			</div>
			<div class="right">
				<input type="text"    id="txt">
			</div>
		</div>
	</body>
</html>

2、制作一个登录界面，密码不对会进行弹出框的警告。

效果图：

页面功能代码实现：


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="4样式.css"/>
	</head>
	<body>
		<div class="max">
		<div  class="box" >
			<div class="input">
				
			
			<div class="input2">
				<input type="text" id="password" >
			</div>
			<br>
			<div class="input1">
				<input type="text" id="code"  >
			</div>
			</div>
			<br>
			<br>
			<span class="button">
				<input type="button"  class="btn" id="register" value="登录" / onclick="registerfun()">
				<input type="button"  class="btn" id="cancel" value="取消" /  onclick="cancelfun()">
			</span>
		</div>
		</div>
		< type="text/java">
			function cancelfun(){
				var txt=String( );
				/* 一定要进行变量的声明，要不然一定会出现错误 */
				/* 在这里运用了关于类型的一种声明，通过声明可以将字符变成你想要的字符形式 */
				document.getElementById("password").value =txt;
				document.getElementById("code").value =txt;	
			}
			/* 实现消除的效果的功能 */
			</>
			
			
			< type="text/java">
			function  registerfun(){
				var success="登录成功";
				var defeat="登录失败"
				var pass=String(document.getElementById("password").value);
				var cod=String(document.getElementById("code").value);

				if(pass=="bakabaka"&&cod=="jiushimima")  
				alert(success);
				else
				alert(defeat); 
				
			}
		</>
	</body>
</html>

样式表代码：

*{
	padding: 0px;
	margin:0px;
	border:0px;
}

	
.max{
	width: auto;
	height: 800px;
}
.box{
	width: 300px;
	height: 200px; 
	border: 1px #000000 solid;
	margin:auto;
	
}
	
/* .input{
	width: 150px;
	height:50px;
	border-radius: 5px;
	border: #CCCCCC 1px solid;
	margin:40px;
	
} */
	
.input{
	width: 150px;
	height:50px;
	border-radius: 5px;
	
	margin-top:40px;
	margin-left: 70px;
}
	

.input1,.input2{
	padding: 0px;
	margin:0px;
	border:0px;
	margin-top: 5px;
	border: #000000 1px solid;
	placeholder:请输入
}

	
.button{
	margin-top:50px ;
	margin-left: 100px;
}
.btn{
	margin: auto;
	width: 40px;
	height: 20px;
	border: 2px;
	border-radius: 5px;
	background-color: #CCCCCC;
	color: #ffffff;
}
.right,.left{
	display: inline-block;
	margin-top: 20px;
}
.right{
	border: 1px #000000 solid;
	
	
}
.left{
	border: 1px #000000 solid;
	margin-left:20px ;
}
	
/* .box21,.box22{
	border: 1px #000000 solid;
	margin-left:20px ;
	display: inline-block;
}
.box21{
	width: 70%;
}
.box22{
	width: 30%;
}
 */

3、加密游戏，通过将输入的六个数字分别+5来实现原来的数字加密

代码实现：


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		< type="text/java">
			function action(){
			var num111 =parseInt(document.getElementById("num1").vaule;);  
			var num211 =parseInt(document.getElementById("num2").vaule;);  
			var num311 =parseInt(document.getElementById("num3").vaule;);  
			var num411 =parseInt(document.getElementById("num4").vaule;);  
			var num511 =parseInt(document.getElementById("num5").vaule;);  
			var num611 =parseInt(document.getElementById("num6").vaule;);  
			
			var num11=parseInt(num111) +5;
			if(  num11>9 )	
			{ var num11= parseInt(num11-10);
			}
			
			var num21=parseInt(num211) +5;
			if( num11>9 )
			{ var num21= parseInt(num21-10);
			}
			
			var num31=parseInt(num311) +5;
			if(  num31>9 )
			{ var num31= parseInt(num31-10);
			}
			
			var num41=parseInt(num411) +5;
			if(  num41>9 )
			{ var num41= parseInt(num41-10);
			}
			
			var num51=parseInt(num511) +5;
			if(  num51>9 )
			{ var num51=parseInt( num51-10);
			}
			
			var num61=parseInt(num611) +5;
			if(  num61>9)
			{ var num61= parseInt(num61-10);
			}
			
			document.getElementById("result").vaule=num11+num21+num31+num41+ num51+ num61;
			
			
			}
			
		</>
		<div id="max">
			<div id="">
				输入6位数密码：
				<span><input type="text" class="num" id="num1"></span>
				<span><input type="text" class="num" id="num2"></span>
				<span><input type="text" class="num" id="num3"></span>
				<span><input type="text" class="num" id="num4"></span>
				<span><input type="text" class="num" id="num5"></span>
				<span><input type="text" class="num" id="num6"></span>
				<input type="button" name="" id="btn" value="加密"  onclick="action()"/>	
			</div>
			<div >
				加密结果：<input type="text" id="result">

			</div>
		</div>
	</body>
</html>

4、判断输入框的数是素数还是和数

代码实现：


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="">
			输入一个数：<input type="text" name="" id="iput"  />
			<input type="button"   value="计算" onclick="calcur()" />
		</div>
		<div>
			<input type="text"  id="result" placeholder="结果为" />
		</div>
		< type="text/java">
				
			function calcur(){
				var num=parseInt(document.getElementById("iput").value);
				for(var i=2;i <num-1;i++)
				{
				if(num % i == 0)
				
				{  document.getElementById("result").value="和数";
				break;
				
				 }
				 
				 else
				document.getElementById("result").value="质数";
				}
			}
		</>
	</body>
</html>

5、判断输入框中，两个数的最大公约数python for语句用法。

代码实现：


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div>
			<input type="text"  id="num1" placeholder="请输入数字" />
		</div>
		<div>
			<input type="text"  id="num2" placeholder="请输入数字" />
		</div>
		<div>
			<input type="button"   value="计算" onclick="done()" />
		</div>
		<div>
			最大公约数为：<input type="text"  id="result"  />
		</div>
		< type="text/java">
				
			function done(){
				var nu1 =document.getElementById("num1").value;
				var nu2 =document.getElementById("num2").value;
			
			if( nu1 >= nu2)
			{
				var temp=nu1;
				nu1=nu2;
				nu2=temp;
			}
			
			for(var i=2;i <= nu1;i++)
				
			{ 
				if(nu1 % i == 0 && nu2 % i==0)
				{
					document.getElementById("result").value=i;
					
					break;
				}
			
			else document.getElementById("result").value="最大公约数为1";
			}
			}
		</>
	</body>
	
</html>