JavaScript的一道题型-CSDN博客

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

<html>
<head>
    <title>Title</title>
</head>
<body>
<%--创建一个按钮，给按钮绑定单击事件，点击之后，让该变量弹框展示--%>
<input type="button" value="按钮" οnclick="test1()">
<br>
<br>
<%--创建一个div盒子设置好长宽高--%>
<%--该盒子设置单击事件--%>
<div οnclick="e()" style="width: 100px;height: 100px;border: 1px solid"></div>
<br>
<%--准备一个文本域--%>
<%--实现字符个数的动态统计--%>
<textarea placeholder="最多可输入100个字" rows="10"; cols="60"; οnkeyup="test2(this)"; οnkeydοwn="test2(this)"></textarea>
<span id="m">0</span>/100
<br>
<input type="button" value="解禁文本域" οnclick="test3()">
<script>
    <%--创建一个变量--%>
    let c=150;
    function test1(){
        alert(c);
    }
    // 点击确定/取消，点击确定打印confirm（）函数返回的信息，点击取消打印confirm（）函数返回的信息
    let d=confirm("是否要删除id为1的编号");
    console.log(d);
    // 调用两次prompt()函数中都输入不同数字，使用变量a与b接收
    let a=prompt();
    let b=prompt();
    //返回两数后做计算，要求使用eval函数进行计算，控制台打印结果
    let result=eval("a+b");
    console.log(result);
    // 并为该事件绑定函数，弹框提示单击信息，输出事件的类型名称
    function e(){
        alert(event.type);
    }
    // 最多输入100个字符，一旦超过锁定，即禁用
    function test2(thiz){
        let k=thiz.value;
        let l=k.length;
        document.getElementById("m").innerText=l;
        if(l>=100){
            thiz.disabled="disabled";
        }
    }
    // 给”解禁文本域”绑定单击事件，通过单击事件解禁文本域，且清空文本域内容，统计信息恢复到初始状态
    function test3(){
        window.location.reload();
    }
</script>
</body>
</html>

上面的代码产生的效果如下（我截取了多张图片，把功能都展示出来了）：

首先图片1对应的是天蓝色的代码，用到了confirm函数，提示信息，如果选择确定，则控制台显示true（图片4），如果选择取消，则返回false（true和false是Boolean类型），看图片2和图片3是深蓝色的代码，用到了prompt函数，进行取值（a，b），取完两个值后，用到了eval函数，计算a+b的值，并用console.log输出到控制台上（图片4），结果是字符串类型1012，紫色代码是用div标签创建了一个盒子（图片4按钮下面那个），并设置了一个单击事件（onclick），设置完成后为事件绑定函数e，通过e，设置警告框，并输出事件类型（图片6），event.type(事件类型)，橙色部分用到了文本域（textarea），palceholder是占位符，起到提示作用，看图片9，rows和cols能设置文本域的大小，onkeyup和onkeydown分别设置的是键盘按钮抬起和按下的事件，可以理解成是两个事件用了同一种方法，方法在下面的代码里，通过value取文本域输入的值，再通过length获取输入值的长度（l），再通过灰色部分通过<span>标签设定的id值调用，再用innerTest进行给它赋值，可以进行实时响应。通过判断输入的l（文本长度），如果长度>=100，那么就进行禁用输入（disabled），thiz其实就是我们的输入动作，禁用输入动作，青绿色就是设定一个按钮，并设定一个单击事件，如果单击后响应事件，window.location.reload();刷新浏览器，可以当作解禁用。绿色部分其实就是设定一个变量c值，设定一个单击事件，并为单击事件绑定一个方法，方法就是警告框（alert）显示c的值。大家可以再结合下方图片和练习，加深理解！