未点击时
输入为空时
输入不为数字时
输入不在范围内时(1-100)
像小A一样拿了一百昏时~
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>输入成绩</title>
</head>
<style>
#prompt {
font-size: 10px;
color: darkgrey;
}
#score {
border: 1px solid darkgrey;
}
/*正确时的样式,用于动态调用*/
.right {
background: url("images/right.png") no-repeat;/*对勾图案*/
background-size: 13px 13px;
padding-left: 15px;
color: #91b914 !important;/*因为id属性优先于class属性,在#prompt中设置过color,所以此时要用important来发挥作用*/
}
/*错误时的样式,用于动态调用*/
.error {
background: url("images/error.png") no-repeat;/*叉叉图案*/
background-size: 13px 13px;
padding-left: 15px;
color: #ef1d1e !important;
}
</style>
<body>
<div id="box">
<label>您的成绩:</label>
<input id="score" type="text" placeholder="请输入分数">
<span id="prompt">请输入您的成绩</span>
</div>
<script>
window.onload = function () {
//封装获取对应id的元素的操作
function $(id) {
return typeof id === "string" ? document.getElementById(id) : null;
}
//当元素失去交点时
$("score").onblur = function () {
//获取输入的内容
var score = parseFloat($("score").value);
if (isNaN(score)) {//如果值不是一个数
$("prompt").innerText = "输入成绩不正确";
$("prompt").className = "error";
$("score").style.borderColor = "red";
}else if (score >= 0 && score <= 100) {//值为数字且在0-100之间
$("prompt").innerText = "输入成绩正确";//改字
$("prompt").className = "right";//改class用来匹配不同的样式
$("score").style.borderColor = "green";//输入框改颜色
}else{
$("prompt").innerText = "输入成绩不正确";//值为数字但是不在0-100之间
$("prompt").className = "error";
$("score").style.borderColor = "red";
}
}
};
</script>
</body>
</html>
然后经过封装相同代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>输入成绩</title>
</head>
<style>
#prompt {
font-size: 10px;
color: darkgrey;
}
#score {
border: 1px solid darkgrey;
}
/*正确时的样式,用于动态调用*/
.right {
background: url("images/right.png") no-repeat;/*对勾图案*/
background-size: 13px 13px;
padding-left: 15px;
color: #91b914 !important;/*因为id属性优先于class属性,在#prompt中设置过color,所以此时要用important来发挥作用*/
}
/*错误时的样式,用于动态调用*/
.error {
background: url("images/error.png") no-repeat;/*叉叉图案*/
background-size: 13px 13px;
padding-left: 15px;
color: #ef1d1e !important;
}
</style>
<body>
<div id="box">
<label>您的成绩:</label>
<input id="score" type="text" placeholder="请输入分数">
<span id="prompt">请输入您的成绩</span>
</div>
<script>
window.onload = function () {
//封装获取对应id的元素的操作
function $(id) {
return typeof id === "string" ? document.getElementById(id) : null;
}
/**
* 封装更改样式的操作
* @param {string}msg 提示信息
* @param {string}className 样式
* @param {string}color 输入框颜色
*/
function dealStyle(msg,className,color){
$("prompt").innerText = msg;
$("prompt").className = className;
$("score").style.borderColor = color;
}
//当元素失去交点时
$("score").onblur = function () {
//获取输入的内容
var score = parseFloat($("score").value);
if (isNaN(score)) {//如果值不是一个数
dealStyle("输入成绩不正确","error","red");
}else if (score >= 0 && score <= 100) {//值为数字且在0-100之间
dealStyle("输入成绩正确","right","green");
}else{
dealStyle("输入成绩不正确","error","red");
}
}
};
</script>
</body>
</html>
