计算器效果
<!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>