<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>
演示代码
</title>
<style>
input[type=text]{
border:1px solid red;
width:300px;
height:30px;
}
span{
border-radius:90px;
background-color:green;
width:30px;
height:30px;
}
</style>
<script>
var s = "";
var kp = function(txt){
var ino = txt.nextElementSibling;
if(!/^([1-9]\d?|0|100)$/.test(txt.value)){
txt.style.borderColor = "red";
ino.style.backgroundColor = "red";
ino.innerHTML = "×";
s = "";
}else{
txt.style.borderColor = "green";
ino.style.backgroundColor = "green";
ino.innerHTML = "√";
//不及格<60 及格 >60
s = txt.value * 1;
}
}
function judge(){
if(s == "") return;
if(s < 60){
alert("不及格");
}else{
alert("及格");
}
}
</script>
</head>
<body>
<input type="text" onkeyup="kp(this)" /> <span></span>
<br / >
<button onclick="judge()">
submit
</button>
</body>
</html>
温馨提示：答案为网友推荐，仅供参考