<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style>
/*外面大盒子，上下间距100，左右居中，里面内容居中*/
div{
margin:150px auto;
text-align:center;
}
/*span提示框，首先要转为行内块级元素，然后设高20，宽100，有边框，左边有内边距20，里面的内容靠右居中，字号12px，有背景颜色，文字有颜色*/
div span{
display:inline-block;
100px;
height:20px;
border:1px solid #ccc;
padding-left:20px;
text-align:left;
font-size:12px;
line-height:20px;
background-color: #eee;
color:#999;
}
.right{ /*输入正确时候的判断*/
color:#5EFF5E;
background:url(C:/Users/高萍/Desktop/前端学习/images/right.png) no-repeat #DFFFDF 4px 3px;
border:1px solid #ACFFAC;
}
.wrong{ /*输入错误时候的判断*/
color: #FF6B39;
background:url(C:/Users/高萍/Desktop/前端学习/images/wrong.png) no-repeat #FFDCD0 4px 3px;
border:1px solid #FFAC91;
}
</style>
<!--js部分，根据用户输入的内容，提示框的不同验证-->
<script>
window.onload=function(){
function $id(id){
return document.getElementById(id); //这个id不加引号！！！
}
$id("txt").onblur=function(){ //离开焦点时候 ，this指的是事件的调用者，这里是$id("txt")
if(this.value=="") //输入框为空时
{
$id("s").className="wrong"; //className “类名”
$id("s").innerHTML="内容不能为空"; //innerHTML 更换盒子里面的内容，文字，标签都换
}
else if(isNaN(this.value)) // isNaN() 表示...不是一个数字的时候
{
$id("s").className="wrong";
$id("s").innerHTML="请输入数字"
}
else if(this.value>150 || this.value<0) //成绩的合理取值范围应该是0-150
{
$id("s").className="wrong";
$id("s").innerHTML="请输入合理的成绩范围"
}
else
{
$id("s").className="right";
$id("s").innerHTML="输入正确";
}
}
}
</script>
</head>
<body>
<!--一个大盒子，左边一个文本框，右边是一个span ，里面写着“请输入成绩”的提示性文字-->
<div>
语文：<input type="text" id="txt"/>
<span id="s">请输入成绩</span>
</div>
</body>
</html>