JavaScript一道题型

轩昂7K

已于 2024-01-09 17:48:54 修改

阅读量415

点赞数 13

分类专栏： Javascript 文章标签：前端 javascript 开发语言

于 2024-01-09 16:34:10 首次发布

本文链接：https://blog.csdn.net/2302_77782958/article/details/135483488

版权

Javascript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

本文解释了一段HTML代码，涉及文本域输入计数、100个字符限制、单击/双击事件触发浏览器刷新。重点在于理解事件处理逻辑和代码执行过程。

摘要由CSDN通过智能技术生成

<html>
<head>
    <title>Title</title>
</head>
<body οndblclick="inp2()">
  <textarea rows="6" cols="30" οnkeyup="test1(this)"></textarea>
<span id="c">0</span>/100
  <input id="inp" type="button" value="解禁文本域">
  <script>
    function test1(thiz){
      let a=thiz.value;
      let b=a.length;
      if(b<=100){
        document.getElementById("c").innerText=b;
      }else {
        thiz.disabled="disabled";
      }
    }
    let c=document.getElementById("inp");
    c.οnclick=function (){
        window.location.reload();
    }
    function inp2(){
        window.location.reload();
    }
  </script>
</body>
</html>

上面这些代码分起来看还行，一旦组合起来，就让人有点头晕了！它实现的效果如下：

一直输入数字，输入的数字个数到100个时会限制输入，单机解禁文本域或者双击其它位置，可以解除限制（其实就是刷新浏览器）。

下面让我们仔细分析下代码：

绿色部分主要用到<textarea>,它是文本域，就是上图的样式，οnkeyup="test1(this)是键盘的放开事件，当键盘放开，值就会响应，下面绿色的部分就是调用test1（this）的方法，应为是下面的thiz是形参，注意：形参和实参不能一致，调用方法获取长度，进行判断到蓝色部分，通过上面设定的id值c，将长度值b赋值给0的位置，随之改变。黄色部分是通过调用id值inp获取返回值c，给c一个单击事件（onclick），再加上单击后的功能是刷新浏览器（window.location.reload();）紫色部分是给双击事件（ondblclick）的值inp2（），设定一个功能方法，也是刷新浏览器。难倒是不难，重要的是要把自己的思维逻辑理清！