DOM事件4-10编程练习老师可以讲解一下吗
来源：4-10 编程练习
L_Tomato
2021-10-14 13:51:29
相关截图：
写回答
1回答
-
好帮手慕慕子
2021-10-14
同学你好，可以结合下面代码中注释测试理解下。
<!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> </head> <body> <p>字数限制在30字内，<span>您还可以输入<b>30</b> 字</span></p> <textarea cols="50" rows="7" id="text"></textarea> <script> // 第一步：获取到文本域对象、字数变化元素、字数超过限制提示标签 var spanEl = document.getElementsByTagName('span')[0]; var bEl = document.getElementsByTagName('b')[0]; var textareaEl = document.getElementById('text'); // 第二步：自定义一个变量，接收可输入的总字数（30） var total = 30; // 给文本域绑定按键被松开时的事件，后跟匿名函数，以下步骤均在函数中 textareaEl.onkeyup = function () { // 第四步：自定义变量，用于接收按键每松开一次获取一次文本域的值的长度 var textValueLen = this.value.length; // 第五步：自定义变量，用于接收可输入的字体个数，b标签中的文本内容设置为该变量 var resLen = total - textValueLen; bEl.innerHTML = resLen; // 判断，如果可输入的字数小于0，span标签的内容要设置为“已超出多少字” if (resLen < 0) { spanEl.innerHTML = '您已超过<b id="num">' + (textValueLen - total) + '</b>字' } else { //由于超出后，替换了span标签中的内容，此时b标签已经不存在了，所以直接设置span元素的innerHTML属性值 spanEl.innerHTML = '您还可以输入<b id="num">' + resLen + '</b>字' } } </script> </body> </html>祝学习愉快~
0
相似问题