五、HTML判断输入长度，体会字体颜色变化

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script>
// change()方法 在id 为txt 的TextBox 触发 onkeyup 事件时执行
function change()
{
//找到txt 并获得他的内容
//var value=document.getElementByName('txt').value;
var value=document.getElementById('txt').value;
//计算还可以输入多少字符
var sum=20-value.length;

//判断能输入的字符数是否为负
if(sum<0)
{
//找到显示控件 并显示相应提示
document.getElementById('showDiv').innerHTML= '您还可以输入'+sum+'字符';
//为负设置颜色为红色
document.getElementById('showDiv').style.color='red';
}
else{
document.getElementById('showDiv').innerHTML= '您还可以输入'+sum+'字符';
document.getElementById('showDiv').style.color='green';
}
}
</script>
</head>
<body>

<div>
<h1 id="myHeader">Hello World!</h1>
<span class="tips" id="phonediv">输入测试文字</span>
<input type="text" id="txt" placeholder="请输入用户名" onblur="change()" required/>
<div id='showDiv'>您还可以输入20字符</div>

</div>
</body>
</html>