• 前端补充19

    一、单分支语句

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Documenttitle>
    7. head>
    8. <body>
    9.     <script>
    10.         /*
    11.         我们的流程控制：顺序结构，分支结构，循环结构
    12.         第一、顺序结构：我们前面的所有案例都是顺序结构，代码都是从上而下依次执行
    13.         第二、分支结构：比较典型的分支结构 if else
    14.         第三、循环结构，比较典型的for循环,while循环,do-while循环
    15.         */
    16.  
    17.         //单分支语句
    18.         //if(条件/表达式){
    19.         //  代码块；    
    20.         //}
    21.  
    22.         if(8 > 6){
    23.             console.log(8);
    24.         }
    25.  
    26.         let age=18;
    27.         if(age >= 18){
    28.             console.log("hi");
    29.         }
    30.  
    31.         /*双分支语句
    32.         语法格式：
    33.         if(条件){
    34.             代码1；
    35.         }
    36.         else{
    37.             代码2；
    38.         }
    39.         */
    40.         let age1 = 16;
    41.         if(age1  >= 18){
    42.             console.log("成年");
    43.         }
    44.         else{
    45.             console.log("未成年");
    46.         }
    47.  
    48.  
    49.         let age2 =parseInt(prompt("请输入年龄"));
    50.         console.log(typeof age2);
    51.         if(age2  >= 18){
    52.             console.log("成年");
    53.         }
    54.         else{
    55.             console.log("未成年");
    56.         }
    57.  
    58.     script>
    59. body>
    60. html>

    二、多分支语句

            if-else

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Documenttitle>
    7. head>
    8. <body>
    9.     <script>
    10.         //isNaN() 判断是否为NaN，返回false/true
    11.         let score=parseInt(prompt("请输入你的成绩"));
    12.         if(!isNaN(score)){
    13.             if(score > 90 && score <= 100){
    14.                 console.log("A级");
    15.             }
    16.             else if(score > 80 ){
    17.                 console.log("B级");
    18.             }
    19.             else if(score > 70 ){
    20.                 console.log("C级");
    21.             }
    22.             else if(score >= 60){
    23.                 console.log("D级");
    24.             }
    25.             else{
    26.                 console.log("E级");
    27.             }
    28.         }
    29.         else{
    30.             console.log("您输入的不是数字")
    31.         }
    32.  
    33.     script>   
    34. body>
    35. html>

             switch-case

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Documenttitle>
    7. head>
    8. <body>
    9.     <script>
    10.         /*
    11.         多分支语句---- switch-case
    12.         语法格式：
    13.         switch(表达式1){
    14.             case "值1";
    15.                 代码1;
    16.                 break;
    17.             case "值2";
    18.                 代码2;
    19.                 break;
    20.             case "值3";
    21.                 代码3;
    22.                 break;
    24.             ....
    25.             default:
    26.                 代码6;
    27.         }
    28.         与C语言类似
    29.         */
    30.         let one=(prompt("请输入你的等级"))
    31.         switch(one){
    32.             case 'A':
    33.                 console.log("90-100");
    34.                 break;
    35.             case 'B':
    36.                 console.log("80-90");
    37.                 break;
    38.             case 'C':
    39.                 console.log("70-80");
    40.                 break;
    41.             case 'D':
    42.                 console.log("60-70");
    43.                 break;
    44.             case 'E':
    45.                 console.log("0-60");
    46.                 break;
    47.             default:
    48.                 console.log("输入错误")
    49.         }
    50.     script>
    51. body>
    52. html>

            while

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Documenttitle>
    7. head>
    8. <body>
    9.     <script>
    10.         /*
    11.         while循环语法：
    12.         while(循环条件){
    13.             循环语句;
    14.             循环条件;
    15.         }
    16.         */
    17.     let i=0;
    18.         while(i<=10){
    19.             console.log(i);
    20.             i++;
    21.         }
    22.         //同理do-while，for循环一样循环一样
    23.     script>
    24. body>
    25. html>

            数组

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Documenttitle>
    7. head>
    8. <body>
    9.     <script>
    10.         /*数组也是与C类似*/
    11.         let arr = [10,20,30,40,50,60];//这里用[]
    12.         console.log(arr.length);//6
    13.  
    14.         //重点
    15.         //内置构造函数方式构建数组 new 创建
    16.         let array = new Array(10,20,30,40);
    17.         console.log(array);
    18.         console.log(arr);//返回下标和长度
    19.         //下标和C一样
    20.         arr[0] = 0;//注意的是在这里改的话前面的输出也会改，但是只要改成arr[0]则前为10，后为0
    21.         console.log(arr);
    22.     script>
    23. body>
    24. html>

            函数 

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Documenttitle>
    7. head>
    8. <body>
    9.     <script>
    10.         //定义函数
    11.         function fun(){
    12.             console.log("5");
    13.         }
    14.         fun();
    15.         function consoleSum(x,y){
    16.             let sum = x + y;
    17.             console.log(sum);
    18.         }
    19.         consoleSum(20,10);
    20.     script>
    21.     
    22. body>
    23. html>

            内置对象函数

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Documenttitle>
    7. head>
    8. <body>
    9.     <script>
    10.         //定义函数
    11.         function fun(){
    12.             console.log("5");
    13.         }
    14.         fun();
    15.         function consoleSum(x,y){
    16.             let sum = x + y;
    17.             console.log(sum);
    18.         }
    19.         consoleSum(20,10,30);//如果实参的个数大于形参的个数，那么多余的实参会被舍弃
    20.  
    21.         //如果形参的个数大于实参的个数，则该变量未被赋值，undefined
    22.         //函数中没有返回值却用变量来接收，也为undefined
    23.         //函数由返回return 但是后面没有内容，结果也是 undefined
    24.  
    25.  
    26.         //扩展---内置对象
    27.         //Js的内置对象：内置对象(系统自带的)  后面还有 浏览器对象BOM 自定义构建对象new
    28.         //内置对象;Math、Date、Array、String...
    29.         //Math.PI 圆周率   Math.max()  Max.min()  Math.abs()绝对值  
    30.         //Math.random()  获取的是 0 到 1 之间的随机小数 左闭右开
    31.         //Math.ceil() 向上取整  Math.ceil(12.03); 取13
    32.         //Math.floor() 向下取整 Math.floor(12.3); 取12
    33.         //求指数次幂 Math.pow()  Math.pow(2,4); //16
    34.         //求平方根Math.sqrt()    Math.sqrt(16); //4
    35.         //四舍五入 Math.round()  Math.round(20.96)//21    Math.round(20.49)//20
    36.         //在线查MDN
    37.  
    38.         //日期对象
    39.         //console.log(new Data());  获取系统的日期 年 月 日 时 分 秒 星期几----系统自带的
    40.         //new.data()可用变量接收
    41.         let dt = new Date();
    42.         let year = dt.getFullYear();//获取年
    43.         let month = dt.getMonth() + 1;//注意！！！获取的月份是从 0 开始的，记得加1
    44.         let day = dt.getDate();//获取天
    45.         let hours = dt.getHours();//获取小时
    46.         let minute = dt.getMinutes();//获取分钟
    47.         let seconds = dt.getSeconds();//获取秒
    48.         let week = dt.getDay();//获取星期几
    49.         
    50.     script>
    51.     
    52. body>
    53. html>
            数组的四种方法
    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Documenttitle>
    7. head>
    8. <body>
    9.     <script>
    10.         //数组的四种方法
    11.         //.push(值1 , 值2,...) 把值往数组后面追加，返回值是追加之后的数组长度
    12.         //let arr = [10,20,30,40,50];
    13.         //let result = arr.push(200,300);   // 返回值为7
    14.         //console.log(result);  //7
    15.         //console.log(arr);//更改后的数组
    16.  
    17.         //.unshift(值1 , 值2,...) 把值往数组前面追加，返回值是追加之后的数组长度
    18.         //let arr = [10,20,30,40,50];
    19.         //let result = arr.unshift(200,300);   // 返回值为7
    20.         //console.log(result);  //7
    21.         //console.log(arr);//更改后的数组
    22.  
    23.         //.pop()    删除数组的最后一项，返回值是删除的那一项
    24.         //let arr = [10,20,30,40,50];
    25.         //let result = arr.pop();   // 返回值为50
    26.         //console.log(result);  //50
    27.         //console.log(arr);
    28.  
    29.         //.shift()    删除数组的第一项，返回值是删除的那一项
    30.         //let arr = [10,20,30,40,50];
    31.         //let result = arr.shift();   // 返回值为10
    32.         //console.log(result);  //10
    33.         //console.log(arr);
    34.  
    35.         //.reverse()  数组反转，返回值是反转之后的数组
    36.         //let arr = [10,20,30,40,50];
    37.         //let temp = arr.reverse();
    38.         //console.log(temp);//[50,40,30,20,10]
    39.  
    40.         //.sort() --- 数组排序(冒泡)--如果没有参数只能排序10以内的数，超过了就要传递一个参数，这个参数叫做回调参数，就是一个匿名参数
    41.         //let arr1 = [1,8,5,6,3,9,2,4,7];
    42.         //let temp = arr1.sort();
    43.         //console.log(temp);
    44.  
    45.         //重点**********这个有参数，是一个匿名函数--------回调函数
    46.         //let arr2 = [1,100,200,11,55,18,20,26,39,56,79,44,19,2];
    47.         //let temp2 = arr2.sort(function(a,b){//这个是匿名函数--即回调函数
    48.             //return a - b;//如果 a - b 就表示从小到大
    49.             //return b - a;//如果 b - a 就表示从大到小
    50.         //})
    51.        // console.log(temp2);
    52.  
    53.         //.slice(n,m) 从索引n开始获取到索引m(不包含m)
    54.         //let arr = [10,20,30,40,50,60,70,80];
    55.         //let temp = arr.slice(2,6);
    56.         //console.log(temp); 30,40,50,60
    57.  
    58.         //.splice(n,m,x/y/z) 把数组从索引n开始删除m个元素，用x ,y ,z 替换删除项，返回值是删除组成的新数组
    59.         let arr = [1,2,3,4,5,6];
    60.         let temp = arr.splice(2,2,7,8,9);
    61.         console.log(temp); //3,4
    62.         console.log(arr); //1,2,7,8,9,5,6
    63.         //当m项是0的时候，他是把x ,y ,z 替换到索引n的前面
    64.         //当不写x ,y  ,z  替换项的时候代表删除数组的元素---删除
    65.         //当splice() 里面啥也不写时，代表没有进行任何操作，返回的是一个空数组
    66.         //当splice(0)  删除整个数组，返回值是原数组，原数组变成空数组
    67.  
    68.  
    69.     script>
    70. body>
    71. html>
            String
    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Documenttitle>
    7. head>
    8. <body>
    9.     <script>
    10.         //String 系统自带
    11.         //let str = "what can i say";
    12.         //console.log(str.length);//14  包含空格
    13.         
    14.         //.charAt(索引) 返回值是指定的索引位置的字符串，可能为空字符串,如果超出了返回空字符串
    15.         //let str = "what can i say";
    16.         //let str2 = str.charAt(4);
    17.         //console.log(str2);
    18.  
    19.         //.fromCharCode(数字值，可以很多个) 返回的是  ASCII码的对应值
    20.         //let str = String.fromCharCode(83,79,83);//SOS
    21.         //console.log(str); 
    22.  
    23.         //.concat(字符串1，字符串2...) 返回拼接之后的新字符串
    24.         //let str1 = "我们";
    25.         //let str2 = str1.concat("太","帅","了");
    26.         //console.log(str2);
    27.  
    28.         //.indexOf(要找的字符串，从什么位置开始的) 返回的是这个字符串的索引，如果没有找到返回-1，找到了显示这个字符串的索引
    29.         //let str1 = "我们太棒了";
    30.         //let Index = str1.indexOf("了",5);
    31.         //console.log(Index);
    32.  
    33.         //.lastIndexOf();从后往前找，但索引的位置还是从左到右
    34.         let str2 = "hello word";
    35.         let index = str2.lastIndexOf("r",6);//这里可以知道是从后往前的，r在8 而输出的是-1 结果显然
    36.         console.log(index);
    37.     script>
    38. body>
    39. html>

    三、事件的记录

            基本事件

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Documenttitle>
    7.     <script>
    8.         function dj(){
    9.             alert("我被点击了");
    10.         }
    11.         function sj(){
    12.             alert("我被双击了");
    13.         }
    14.         function jg(){
    15.             alert("鼠标经过了");
    16.         }
    17.         function lk(){
    18.             alert("鼠标离开了");
    19.         }
    20.     script>
    21. head>
    22. <body>
    23.     
    24.     <button onclick="dj()">点击button>
    25.     <button ondblclick="sj()">双击button>
    26.     <button onmouseover="jg()">鼠标经过button>
    27.     <button onmouseout="lk()">鼠标离开button>
    28. body>
    29. html>

    JS的分离写法

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Documenttitle>
    7. head>
    8. <body>
    9.     
    10.     <button id="btn">点击button>
    11.     <script>
    12.         //定义一个变量来接收id
    13.         let btn = document.getElementById("btn");
    14.         //语法公式
    15.         //事件源.事件 = function(){//匿名函数，回调函数
    16.         //  代码;    
    17.         //}
    18.         btn.onclick = function(){
    19.             alert("实现了HTML和JS的分离")
    20.         }
    21.         //把JS放到/body上面就可以，有些人也会把JS放到整个HTML页面下面
    22.     script>
    23. body>
    24. html>

    JS放在上面的一个入口函数

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Documenttitle>
    7.     <script>
    8.         window.onload = function(){//JS的入口函数
    9.             let btn = document.getElementById("btn");
    10.  
    11.             btn.onclick = function(){
    12.                 alert("JS放在上面的一个入口函数");
    13.             }
    14.         }
    15.     script>
    16. head>
    17. <body>
    18.     <button id="btn">点击button>
    19. body>
    20. html>

    修改p段落里的内容

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Documenttitle>
    7. head>
    8. <body>
    9.     <input type="button" value="修改p标签里的内容" id="btn">
    10.     <p id="p1">我是段落内容p>
    11.     <script>
    12.         let btn = document.getElementById("btn");
    13.         let p1 = document.getElementById("p1");
    14.         //事件源.事件 = function(){}
    15.         btn.onclick = function(){
    16.             p1.innerText = "哈哈,已经修改过了"
    17.         }
    18.  
    19.         //总结：我们只要获取一对标签里的内容，我们推荐使用 innerText()
    20.     script>
    21. body>
    22. html>

    根据标签名修改多个元素

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Documenttitle>
    7. head>
    8. <body>
    9.     
    10.     <input type="button" value="修改p标签里的内容" id="btn">
    11.     <p>我是段落内容p>
    12.     <p>我是段落内容p>
    13.     <p>我是段落内容p>
    14.     <p>我是段落内容p>
    15.     <p>我是段落内容p>
    16.     <p>我是段落内容p>
    17.  
    18.     <script>
    19.         let btn = document.getElementById("btn");
    20.         btn.onclick = function(){
    21.             let pObjs = document.getElementsByTagName("p");
    22.             //console.log(pObjs); HTMLObjects[p,p,p,p,p,p]
    23.             for(let i=0;ilength;i++){
    24.                 pObjs[i].innerText = "已经被修改了";
    25.             }
    26.         }
    27.  
    28.         //总结 document.getElementsByTagName("标签") ---- 获取的是一个集合，即使只有一个也是
    29.     script>
    30. body>
    31. html>

    单击修改链接

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Documenttitle>
    7. head>
    8. <body>
    9.     <input type="button" value="修改链接" id="btn">
    10.     <a id="ak" href="https://www.jiumodiary.com/">鸠摩搜书a>
    11.  
    12.     <script>
    13.         let btn = document.getElementById("btn");
    14.         btn.onclick = function(){
    15.             let aObj = document.getElementById("ak");
    16.             aObj.href = "https://www.zztion.com";
    17.             aObj.innerText = "中职通";
    18.         }
    19.     script>
    20. body>
    21. html>

    单击修改图片信息

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Documenttitle>
    7. head>
    8. <body>
    9.     <input type="button" value="显示" id="btn">
    10.     <img src="images/1.jpg" alt="" title="哆啦A梦">
    11.     <script>
    12.     let btn = document.getElementById("btn");
    13.     btn.onclick = function(){
    14.         let imgObjs = document.getElementsByTagName("img");//集合
    15.         imgObjs[0].title = "我的A梦";
    16.         imgObjs[0].alt = "我也被改了";
    17.     }
    18.  
    19.     script>
    20. body>
    21. html>

    图片的变大与变小

            变大
    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Documenttitle>
    7. head>
    8. <body>
    9.     <input type="button" value="变大图" id="btn">
    10.     <img src="images/3.jpg" alt="" id="small">
    11.  
    12.     <script>
    13.         let btn = document.getElementById("btn");
    14.         btn.onclick = function(){
    15.             //let small = document.getElementById("small");
    16.             //small.src = "images/1.jpg";
    17.             document.getElementById("small").src = "images/1.jpg";
    18.         }
    19.     script>
    20. body>
    21. html>
            变小
    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Documenttitle>
    7. head>
    8. <body>
    9.     
    10.     <img src="images/1.jpg" alt="" id="im">
    11.     <script>
    12.         im.onclick = function(){
    13.             //im.width = "200";//注意不要加单位px，CSS样式里面加
    14.             //im.height = "200";
    15.             this.width = "200";//this 自身
    16.             this.height = "200";
    17.             //this ---- 看点 .前面是谁this就指向谁(这句话可以随便测试)
    18.         }
    19.     script>
    20. body>
    21. html>

    图片的显示与隐藏

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Documenttitle>
    7.     <style>
    8.         #dv{
    9.             width: 300px;
    10.             height: 200px;
    11.             background-color: hotpink;
    12.         }
    13.     style>
    14. head>
    15. <body>
    16.     <input type="button" value="隐藏" id="btn1">
    17.     <input type="button" value="显示" id="btn2">
    18.     <div id="dv">div>
    19.     <script>
    20.         let btn1 = document.getElementById("btn1");
    21.         let btn2 = document.getElementById("btn2");
    22.         btn1.onclick = function(){
    23.             let dv = document.getElementById("dv");
    24.             dv.style.display = "none";//表示隐藏
    25.         }
    26.         btn2.onclick = function(){
    27.             let dv = document.getElementById("dv");
    28.             dv.style.display = "block";//表示显示
    29.         }
    30.         //在线关闭
    31.     script>
    32. body>
    33. html>

     下拉菜单效果

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Documenttitle>
    7.     <style>
    8.         #dv{
    9.             width: 300px;
    10.             height: 200px;
    11.             background-color: pink;
    12.             display: none;/*先通过CSS隐藏这个盒子*/
    13.         }
    14.     style>
    15. head>
    16. <body>
    17.     
    18.     <input type="button" value="显示" id="btn">
    19.     <div id="dv">div>
    20.  
    21.     <script>
    22.         let btn = document.getElementById("btn");
    23.         btn.onmouseover = function(){
    24.             let div = document.getElementById("dv");
    25.             dv.style.display = "block";//表示显示
    26.         }
    27.         btn.onmouseout = function(){
    28.             let div = document.getElementById("dv");
    29.             dv.style.display = "none";//表示隐藏
    30.         }
    31.     script>
    32. body>
    33. html>

    单击图片for循环提示

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Documenttitle>
    7.     <style>
    8.         img{
    9.             width: 200px;
    10.             height: 130px;
    11.         }
    12.     style>
    13. head>
    14. <body>
    15.     
    16.     <img src="images/1.jpg" alt="" id="im1">
    17.     <img src="images/2.jpg" alt="" id="im2">
    18.     <img src="images/3.jpg" alt="" id="im3">
    19.  
    20.     <script>
    21. /*
    22.         let im1 = document.getElementById("im1");
    23.         let im2 = document.getElementById("im2");
    24.         let im3 = document.getElementById("im3");
    25.         im1.onclick = function(){
    26.             alert("系统崩溃");
    27.         }
    28.         im2.onclick = function(){
    29.             alert("系统崩溃");
    30.         }
    31.         im3.onclick = function(){
    32.             alert("系统崩溃");
    33.         }
    34. */
    35.         let imgObjs = document.getElementsByTagName("img");
    36.         for(let i=0;ilength;i++){
    37.             imgObjs[i].onclick = function(){
    38.                 alert("系统崩溃");
    39.             }
    40.         }
    41.     script>
    42. body>
    43. html>

     修改value按钮值

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Documenttitle>
    7. head>
    8. <body>
    9.     
    10.     <input type="button" value="按钮" id="btn">
    11.     <script>
    12.         //let btn = document.getElementById("btn");
    13.         //btn.onclick = function(){
    14.         //    btn.value = "已经修改了";
    15.         //   btn.type = "text";
    16.         //   btn.id = "btn2";
    17.         // }
    18.         btn.onclick = function(){
    19.             this.value = "已经修改了";
    20.             this.type = "text";
    21.             this.id = "btn2";
    22.         }
    23.     script>
    24. body>
    25. html>

    排他思想

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Documenttitle>
    7. head>
    8. <body>
    9.     
    10.     <input type="button" value="完美">
    11.     <input type="button" value="完美">
    12.     <input type="button" value="完美">
    13.     <input type="button" value="完美">
    14.     <input type="button" value="完美">
    15.     <input type="button" value="完美">
    16.     <input type="button" value="完美">
    17.     <input type="button" value="完美">
    18.  
    19.     <script>
    20.         //需求：点击完美变成优秀
    21.         let btnObjs = document.getElementsByTagName("input");
    22.         for(let i=0;ilength;i++){//第一层循环是为了获取所有的input做点击事件
    23.             //做点击事件
    24.             btnObjs[i].onclick = function(){
    25.                 //第一件事：循环遍历所偶有的input 都变成完美
    26.                 for(let j=0;jlength;j++){
    27.                     btnObjs[j].value = "完美";
    28.                 }
    29.                 //第二件事：让自己变成优秀
    30.                 this.value = "优秀";
    31.             }
    32.         }
    33.     script>
    34.  
    35. body>
    36. html>

    单击修改性别

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Documenttitle>
    7. head>
    8. <body>
    9.     
    10.     <input type="button" id="btn" value="修改性别"><br />
    11.     <input type="radio" name="sex" id="radio1" checked>男
    12.     <input type="radio" name="sex" id="radio2" >女
    13.     <input type="radio" name="sex" id="radio3" >未知
    14.  
    15.     <script>
    16.         let btn = document.getElementById("btn");
    17.         btn.onclick = function(){
    18.             //document.getElementById("radio2").checked = "checked";
    19.             document.getElementById("radio2").checked = true;
    20.         }
    21.     script>
    22. body>
    23. html>

  • 相关阅读:
    vue2中seo时使用vue-meta-info
    a的充分条件是什么意思；a的必要条件是什么意思；a是b的充分条件是什么意思；
    MySQL篇---第一篇
    【JavaScript】制作一个抽奖转盘页面
    【大麦小米学量化】量化基础之Python编程（小白入门第一课）
    安卓开发Android studio学习笔记15：关于如何使用Okhttp框架的网络请求(调用API接口)
    IMS各网元的主要功能
    mysql主从复制与读写分离
    l8-d12 IP协议与ethernet协议
    Arm Cortex R52与TC3xx Aurix上下文切换对比
  • 原文地址：https://blog.csdn.net/2303_79741845/article/details/138141964