麻烦老师检查下作业
来源：4-10 编程练习
慕尼黑8359237
2021-09-08 21:15:04
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#area {
width: 300px;
height: 200px;
}
</style>
</head>
<body>
<p>
字数限制在30字内,<span id="change">您还可以输入<b id="num">0</b>个字</span>
</p>
<textarea type="text" id="area"></textarea>
<script>
// 获取文本框对象和字数变化元素、字数超过限制提示标签
var area = document.getElementById('area');
var change = document.getElementById('change');
var num = document.getElementById('num');
// 接收可输入的总字数30
var areaLength = 30;
// 给文本域绑定按键被松开时的事件，后跟匿名函数
area.onkeyup = function(){
// 自定义变量，用于接收按键每松开一次获取一次文本域的值的长度
var areaValue = area.value.length;
// 自定义变量，用于接收可输入的字体个数，b标签中的文本内容设置为该变量
var areaNum = areaLength - areaValue;
num.innerHTML = areaNum;
// 判断，如果可输入的字数小于0，span标签的内容要设置为“已超出多少字”
if(areaNum < 0){
change.innerHTML = '您已超过<b id="num">'+(areaValue-areaLength)+'</b>字'
}else{
change.innerHTML = '您还可以输入<b id="num">'+areaNum+'</b>字'
}
}
</script>
</body>
</html>
1回答
-
好帮手慕慕子
2021-09-09
同学你好，代码效果实现的很棒，继续加油，祝学习愉快~
0
相似问题