JavaScript实现计算器效果 / 注册登录验证

2021/9/5 20:07:01

编程Tag： javascript 登录 value 计算器 color getElementById document pwd msg

本文主要是介绍JavaScript实现计算器效果 / 注册登录验证，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

计算器效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算器效果</title>
	</head>
	<body>
		<input type="text" id="qian"size="10" /> +
		<input type="text" id="hou" size="10" /> = 计算结果<br>
		<input type="button"  id="caculator" value="计算" onclick="doSum();"/>
		<input type="button" id="reset"value="重置" onclick="doNull();"/>
	</body>
</html>
<script>
	function doSum(){
		var Q = document.getElementById("qian");
		var H = document.getElementById("hou");

		Q = parseInt(Q.value);
		H = parseInt(H.value);
		
		return alert(Q+H);
	}
	
	function doNull(){
		document.getElementById("qian").value = "";
		document.getElementById("hou").value = "";
	}
</script>

注册登录验证

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登录注册</title>
	</head>
	<body>
		用户名：<input type="text" size="12"/><br>
		密码：<input type="password" size="12" id="pwd" onblur="checkPwd();"/><span id="msg_pwd">密码长度为6位</span><br>
		确认密码：<input type="password" size="12" id="rpwd" onblur="checkPwdRepeat();"/><span id="msg_pwd_r"></span><br>
		邮箱：<input type="text" size="12" id="email" onblur="checkEmail();"/><span id="msg_email">必须是合法邮箱</span><br>
		<input type="button"  value="注册" />
	</body>
</html>
<script>
	// 校验密码长度
	function checkPwd(){
		var elePwd = document.getElementById("pwd");
		if(elePwd.value.length != 6){
			document.getElementById("msg_pwd").style = "color:red";
		}else{
			document.getElementById("msg_pwd").style = "color:black";
		}
	}
	//校验确认密码
	function checkPwdRepeat(){
		var elePwd = document.getElementById("pwd");
		var elePwdR = document.getElementById("rpwd");
		if(elePwd.value != elePwdR.value){
			document.getElementById("msg_pwd_r").innerText = "两次输入的密码不一致";
			document.getElementById("msg_pwd_r").style = "color:red";
		}else{
			document.getElementById("msg_pwd_r").style = "color:black";
		}
	}
	//校验邮箱合法性
	function checkEmail(){
		var eleEmail = document.getElementById("email");
		if(eleEmail.value.indexOf("@") == -1){
			document.getElementById("msg_email").style = "color:red";
		}else{
			document.getElementById("msg_email").style = "color:black";
		}
	}
</script>

这篇关于JavaScript实现计算器效果 / 注册登录验证的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

JavaScript实现计算器效果 / 注册登录验证

计算器效果

注册登录验证

相关编程文章