Javascript 学习之路6 第六章综合案例

最新推荐文章于 2024-07-19 12:58:53 发布

God shen

最新推荐文章于 2024-07-19 12:58:53 发布

阅读量122

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_53655745/article/details/118943347

版权

每天记得学习。。。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<!--正则表达式-->
		<form action="" method="" name="cform" onsubmit="return checkform()">
			<h3>用户登录界面</h3>
			用户账号<input type="text" name="user" id="_name" value="" /><br>
			用户密码<input type="password" name="pass" id="_pass" value="" /><br>
			<input type="submit" value="验证"">
		</form>
		
		<script type="text/javascript">
			function checkform(){
				var user = cform.user.value;
				var pass = cform.pass.value;
				if(!(/^[a-zA-Z]\w{3,15}$/.test(user))){
					alert("用户账号以字母数字下划线组成，字母开头，4-16位");
					cform.user.select();
					return false;
				}
				var s = 0;
				if(pass.length < 6){
					alert("用户密码太短了，至少6位")
					cform.pass.select();
					return false;
				}
				if(pass.match(/[a-z]/)){s++}
				if(pass.match(/[0-9]/)){s++}
				if(pass.match(/[A-Z]/)){s++}
				if(s!=3){
					alert("用户密码必须都包含大写小写和数字");
					cform.pass.select();
					return false
				}
				return true
			}
		</script>
		
		<!--计算器功能-->
		<form action="" >
			<div id="_show" style="width:170px; height:60px;overflow:hidden;border:1px solid;"></div>
			<input type="text" id="input_box"><br>
			<input type="button" onclick="s('')" value="C">
			<input type="button" onclick="operate('opposite')" value="+/-">
			<input type="button" onclick= "operate('percent')"value="%">
			<input type="button" onclick="operate('backspace')" value="<-"><br>
			<input type="button" onclick="a('7')" value="7">
			<input type="button" onclick="a('8')" value="8">
			<input type="button" onclick="a('9')" value="9">
			<input type="button" onclick="a('+')" value="+">
			<input type="button" onclick="a('-')" value="-"><br>
			<input type="button" onclick="a('4')" value="4">
			<input type="button" onclick="a('5')" value="5">
			<input type="button" onclick="a('6')" value="6">
			<input type="button" onclick="a('*')" value="×">
			<input type="button" onclick="a('/')" value="÷"><br>
			<input type="button" onclick="a('1')" value="1">
			<input type="button" onclick="a('2')" value="2">
			<input type="button" onclick="a('3')" value="3">
			<input type="button" onclick="operate('power')" value="x2">
			<input type="button" onclick="operate('sqrt')"value="√"><br>
			<input type="button" onclick="a('0')" value="0">
			<input type="button" onclick="a('.')" value=".">
			<input type="button" onclick="e()" value="=">
			
		</form>
		<script>
			var input = document.getElementById("input_box");
			var show = document.getElementById("_show");
			function s(v){
				input.value = v;
			}
			function a(v){
				if(input.value == "0" && v == "0"){
					input.value = "0";
				}else if(input.value == '0' && v != '.'){
						input.value == v;
				}else{
					input.value += v;
				}
			}
				 
			function e(){
				try{
					if(show.offsetHeight > 50){
						var t = show.innerHTML.indexOf("=<br/>");
						var str = show.innerHTML;
						str = str.substr(t+5,str.length);
						show.innerHTML = str;
					}
					show.innerHTML += input.value + '=<br/>';
					s(eval(input.value));
				}catch(e){
					s('Error');
				}
			}
			function operate(type){
				switch(type){
					case "backspace":
						var str = input.value;
						str = (str!="0")?str:"";
						str = str.substr(0, str.length-1);
						str = (str!="")?str:"0";
						input.value = str;
						break;
					case "power":
						input.value = Math.pow(input.value, 2);
						break;
					case "opposite":
						input.value = -input.value;
						break;
					case "percent":
						input.value /= 100;
						break;
					case "sqrt":
						input.value = Math.sqrt(input.value);
						break;				
				}
			}
		</script>
		<!--体彩11选5-->
		<input type="button" onclick="choose()" value="随机出5个数字">
		<script>
		//随机输出5个数字范围是1-12之间
			function choose(){
				for(var i=0; i<5; i++){
					var n = Math.floor(Math.random()*11 + 1);
					if(n<10){
						document.write('0'+n," ");
					}else{
						document.write(n," ")
					}
					
				}
			}
		</script>
		<!--列表的影藏-->
		<h2 id="_h2_">菜单栏</h2>
		<ul id="_ul_">
			<li>111</li>
			<li>222</li>
			<li>333</li>
			<li>444</li>
			<li>555</li>
		</ul>
		<script>
			var ul = document.getElementById("_ul_");
			var h2 = document.getElementById("_h2_");
			h2.onclick = function(){
				var style = ul.style;
				style.display = style.display == "none"?"block":"none";
			}
		</script>
	</body>
</html>

God shen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Javascript 学习之路6 第六章综合案例

每天记得学习。。。<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <body>  <form action="" method="" name="cform" onsubmit="return checkform()"> &
复制链接

扫一扫