前端补充19

最新推荐文章于 2024-11-11 09:45:18 发布

看月落月升

最新推荐文章于 2024-11-11 09:45:18 发布

阅读量306

点赞数 5

文章标签：前端

本文链接：https://blog.csdn.net/2303_79741845/article/details/138141964

版权

一、单分支语句

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        /*
        我们的流程控制：顺序结构，分支结构，循环结构
        第一、顺序结构：我们前面的所有案例都是顺序结构，代码都是从上而下依次执行
        第二、分支结构：比较典型的分支结构 if else
        第三、循环结构，比较典型的for循环,while循环,do-while循环
        */

        //单分支语句
        //if(条件/表达式){
        //  代码块；    
        //}

        if(8 > 6){
            console.log(8);
        }

        let age=18;
        if(age >= 18){
            console.log("hi");
        }

        /*双分支语句
        语法格式：
        if(条件){
            代码1；
        }
        else{
            代码2；
        }
        */
        let age1 = 16;
        if(age1  >= 18){
            console.log("成年");
        }
        else{
            console.log("未成年");
        }


        let age2 =parseInt(prompt("请输入年龄"));
        console.log(typeof age2);
        if(age2  >= 18){
            console.log("成年");
        }
        else{
            console.log("未成年");
        }

    </script>
</body>
</html>

二、多分支语句

if-else

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //isNaN() 判断是否为NaN，返回false/true
        let score=parseInt(prompt("请输入你的成绩"));
        if(!isNaN(score)){
            if(score > 90 && score <= 100){
                console.log("A级");
            }
            else if(score > 80 ){
                console.log("B级");
            }
            else if(score > 70 ){
                console.log("C级");
            }
            else if(score >= 60){
                console.log("D级");
            }
            else{
                console.log("E级");
            }
        }
        else{
            console.log("您输入的不是数字")
        }

    </script>   
</body>
</html>

switch-case

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        /*
        多分支语句---- switch-case
        语法格式：
        switch(表达式1){
            case "值1";
                代码1;
                break;
            case "值2";
                代码2;
                break;
            case "值3";
                代码3;
                break;

            ....
            default:
                代码6;
        }
        与C语言类似
        */
        let one=(prompt("请输入你的等级"))
        switch(one){
            case 'A':
                console.log("90-100");
                break;
            case 'B':
                console.log("80-90");
                break;
            case 'C':
                console.log("70-80");
                break;
            case 'D':
                console.log("60-70");
                break;
            case 'E':
                console.log("0-60");
                break;
            default:
                console.log("输入错误")
        }
    </script>
</body>
</html>

while

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        /*
        while循环语法：
        while(循环条件){
            循环语句;
            循环条件;
        }
        */
    let i=0;
        while(i<=10){
            console.log(i);
            i++;
        }
        //同理do-while，for循环一样循环一样
    </script>
</body>
</html>

数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        /*数组也是与C类似*/
        let arr = [10,20,30,40,50,60];//这里用[]
        console.log(arr.length);//6

        //重点
        //内置构造函数方式构建数组 new 创建
        let array = new Array(10,20,30,40);
        console.log(array);
        console.log(arr);//返回下标和长度
        //下标和C一样
        arr[0] = 0;//注意的是在这里改的话前面的输出也会改，但是只要改成arr[0]则前为10，后为0
        console.log(arr);
    </script>
</body>
</html>

函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //定义函数
        function fun(){
            console.log("5");
        }
        fun();
        function consoleSum(x,y){
            let sum = x + y;
            console.log(sum);
        }
        consoleSum(20,10);
    </script>
    
</body>
</html>

内置对象函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //定义函数
        function fun(){
            console.log("5");
        }
        fun();
        function consoleSum(x,y){
            let sum = x + y;
            console.log(sum);
        }
        consoleSum(20,10,30);//如果实参的个数大于形参的个数，那么多余的实参会被舍弃

        //如果形参的个数大于实参的个数，则该变量未被赋值，undefined
        //函数中没有返回值却用变量来接收，也为undefined
        //函数由返回return 但是后面没有内容，结果也是 undefined


        //扩展---内置对象
        //Js的内置对象：内置对象(系统自带的)  后面还有 浏览器对象BOM 自定义构建对象new
        //内置对象;Math、Date、Array、String...
        //Math.PI 圆周率   Math.max()  Max.min()  Math.abs()绝对值  
        //Math.random()  获取的是 0 到 1 之间的随机小数 左闭右开
        //Math.ceil() 向上取整  Math.ceil(12.03); 取13
        //Math.floor() 向下取整 Math.floor(12.3); 取12
        //求指数次幂 Math.pow()  Math.pow(2,4); //16
        //求平方根Math.sqrt()    Math.sqrt(16); //4
        //四舍五入 Math.round()  Math.round(20.96)//21    Math.round(20.49)//20
        //在线查MDN

        //日期对象
        //console.log(new Data());  获取系统的日期 年 月 日 时 分 秒 星期几----系统自带的
        //new.data()可用变量接收
        let dt = new Date();
        let year = dt.getFullYear();//获取年
        let month = dt.getMonth() + 1;//注意！！！获取的月份是从 0 开始的，记得加1
        let day = dt.getDate();//获取天
        let hours = dt.getHours();//获取小时
        let minute = dt.getMinutes();//获取分钟
        let seconds = dt.getSeconds();//获取秒
        let week = dt.getDay();//获取星期几
        
    </script>
    
</body>
</html>

数组的四种方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //数组的四种方法
        //.push(值1 , 值2,...) 把值往数组后面追加，返回值是追加之后的数组长度
        //let arr = [10,20,30,40,50];
        //let result = arr.push(200,300);   // 返回值为7
        //console.log(result);  //7
        //console.log(arr);//更改后的数组

        //.unshift(值1 , 值2,...) 把值往数组前面追加，返回值是追加之后的数组长度
        //let arr = [10,20,30,40,50];
        //let result = arr.unshift(200,300);   // 返回值为7
        //console.log(result);  //7
        //console.log(arr);//更改后的数组

        //.pop()    删除数组的最后一项，返回值是删除的那一项
        //let arr = [10,20,30,40,50];
        //let result = arr.pop();   // 返回值为50
        //console.log(result);  //50
        //console.log(arr);

        //.shift()    删除数组的第一项，返回值是删除的那一项
        //let arr = [10,20,30,40,50];
        //let result = arr.shift();   // 返回值为10
        //console.log(result);  //10
        //console.log(arr);

        //.reverse()  数组反转，返回值是反转之后的数组
        //let arr = [10,20,30,40,50];
        //let temp = arr.reverse();
        //console.log(temp);//[50,40,30,20,10]

        //.sort() --- 数组排序(冒泡)--如果没有参数只能排序10以内的数，超过了就要传递一个参数，这个参数叫做回调参数，就是一个匿名参数
        //let arr1 = [1,8,5,6,3,9,2,4,7];
        //let temp = arr1.sort();
        //console.log(temp);

        //重点**********这个有参数，是一个匿名函数--------回调函数
        //let arr2 = [1,100,200,11,55,18,20,26,39,56,79,44,19,2];
        //let temp2 = arr2.sort(function(a,b){//这个是匿名函数--即回调函数
            //return a - b;//如果 a - b 就表示从小到大
            //return b - a;//如果 b - a 就表示从大到小
        //})
       // console.log(temp2);

        //.slice(n,m) 从索引n开始获取到索引m(不包含m)
        //let arr = [10,20,30,40,50,60,70,80];
        //let temp = arr.slice(2,6);
        //console.log(temp); 30,40,50,60

        //.splice(n,m,x/y/z) 把数组从索引n开始删除m个元素，用x ,y ,z 替换删除项，返回值是删除组成的新数组
        let arr = [1,2,3,4,5,6];
        let temp = arr.splice(2,2,7,8,9);
        console.log(temp); //3,4
        console.log(arr); //1,2,7,8,9,5,6
        //当m项是0的时候，他是把x ,y ,z 替换到索引n的前面
        //当不写x ,y  ,z  替换项的时候代表删除数组的元素---删除
        //当splice() 里面啥也不写时，代表没有进行任何操作，返回的是一个空数组
        //当splice(0)  删除整个数组，返回值是原数组，原数组变成空数组


    </script>
</body>
</html>

String

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //String 系统自带
        //let str = "what can i say";
        //console.log(str.length);//14  包含空格
        
        //.charAt(索引) 返回值是指定的索引位置的字符串，可能为空字符串,如果超出了返回空字符串
        //let str = "what can i say";
        //let str2 = str.charAt(4);
        //console.log(str2);

        //.fromCharCode(数字值，可以很多个) 返回的是  ASCII码的对应值
        //let str = String.fromCharCode(83,79,83);//SOS
        //console.log(str); 

        //.concat(字符串1，字符串2...) 返回拼接之后的新字符串
        //let str1 = "我们";
        //let str2 = str1.concat("太","帅","了");
        //console.log(str2);

        //.indexOf(要找的字符串，从什么位置开始的) 返回的是这个字符串的索引，如果没有找到返回-1，找到了显示这个字符串的索引
        //let str1 = "我们太棒了";
        //let Index = str1.indexOf("了",5);
        //console.log(Index);

        //.lastIndexOf();从后往前找，但索引的位置还是从左到右
        let str2 = "hello word";
        let index = str2.lastIndexOf("r",6);//这里可以知道是从后往前的，r在8 而输出的是-1 结果显然
        console.log(index);
    </script>
</body>
</html>

三、事件的记录

基本事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function dj(){
            alert("我被点击了");
        }
        function sj(){
            alert("我被双击了");
        }
        function jg(){
            alert("鼠标经过了");
        }
        function lk(){
            alert("鼠标离开了");
        }
    </script>
</head>
<body>
    <!--
        onclick --- 点击
        ondbclick --- 鼠标双击
        onmouseover --- 鼠标经过
        onmouseout --- 鼠标离开
    -->
    <button onclick="dj()">点击</button>
    <button ondblclick="sj()">双击</button>
    <button onmouseover="jg()">鼠标经过</button>
    <button onmouseout="lk()">鼠标离开</button>
</body>
</html>

JS的分离写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--
    JS的分离写法
    工作中的写法：真正要求实现HTML和JS分离    
    -->
    <button id="btn">点击</button>
    <script>
        //定义一个变量来接收id
        let btn = document.getElementById("btn");
        //语法公式
        //事件源.事件 = function(){//匿名函数，回调函数
        //  代码;    
        //}
        btn.onclick = function(){
            alert("实现了HTML和JS的分离")
        }
        //把JS放到/body上面就可以，有些人也会把JS放到整个HTML页面下面
    </script>
</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function(){//JS的入口函数
            let btn = document.getElementById("btn");

            btn.onclick = function(){
                alert("JS放在上面的一个入口函数");
            }
        }
    </script>
</head>
<body>
    <button id="btn">点击</button>
</body>
</html>

修改p段落里的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="button" value="修改p标签里的内容" id="btn">
    <p id="p1">我是段落内容</p>
    <script>
        let btn = document.getElementById("btn");
        let p1 = document.getElementById("p1");
        //事件源.事件 = function(){}
        btn.onclick = function(){
            p1.innerText = "哈哈,已经修改过了"
        }

        //总结：我们只要获取一对标签里的内容，我们推荐使用 innerText()
    </script>
</body>
</html>

根据标签名修改多个元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--根据标签名修改多个元素-->
    <input type="button" value="修改p标签里的内容" id="btn">
    <p>我是段落内容</p>
    <p>我是段落内容</p>
    <p>我是段落内容</p>
    <p>我是段落内容</p>
    <p>我是段落内容</p>
    <p>我是段落内容</p>

    <script>
        let btn = document.getElementById("btn");
        btn.onclick = function(){
            let pObjs = document.getElementsByTagName("p");
            //console.log(pObjs); HTMLObjects[p,p,p,p,p,p]
            for(let i=0;i<pObjs.length;i++){
                pObjs[i].innerText = "已经被修改了";
            }
        }

        //总结 document.getElementsByTagName("标签") ---- 获取的是一个集合，即使只有一个也是
    </script>
</body>
</html>

单击修改链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="button" value="修改链接" id="btn">
    <a id="ak" href="https://www.jiumodiary.com/">鸠摩搜书</a>

    <script>
        let btn = document.getElementById("btn");
        btn.onclick = function(){
            let aObj = document.getElementById("ak");
            aObj.href = "https://www.zztion.com";
            aObj.innerText = "中职通";
        }
    </script>
</body>
</html>

单击修改图片信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="button" value="显示" id="btn">
    <img src="images/1.jpg" alt="" title="哆啦A梦">
    <script>
    let btn = document.getElementById("btn");
    btn.onclick = function(){
        let imgObjs = document.getElementsByTagName("img");//集合
        imgObjs[0].title = "我的A梦";
        imgObjs[0].alt = "我也被改了";
    }

    </script>
</body>
</html>

图片的变大与变小

变大

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="button" value="变大图" id="btn">
    <img src="images/3.jpg" alt="" id="small">

    <script>
        let btn = document.getElementById("btn");
        btn.onclick = function(){
            //let small = document.getElementById("small");
            //small.src = "images/1.jpg";
            document.getElementById("small").src = "images/1.jpg";
        }
    </script>
</body>
</html>

变小

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--点击图片变小-->
    <img src="images/1.jpg" alt="" id="im">
    <script>
        im.onclick = function(){
            //im.width = "200";//注意不要加单位px，CSS样式里面加
            //im.height = "200";
            this.width = "200";//this 自身
            this.height = "200";
            //this ---- 看点 .前面是谁this就指向谁(这句话可以随便测试)
        }
    </script>
</body>
</html>

图片的显示与隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #dv{
            width: 300px;
            height: 200px;
            background-color: hotpink;
        }
    </style>
</head>
<body>
    <input type="button" value="隐藏" id="btn1">
    <input type="button" value="显示" id="btn2">
    <div id="dv"></div>
    <script>
        let btn1 = document.getElementById("btn1");
        let btn2 = document.getElementById("btn2");
        btn1.onclick = function(){
            let dv = document.getElementById("dv");
            dv.style.display = "none";//表示隐藏
        }
        btn2.onclick = function(){
            let dv = document.getElementById("dv");
            dv.style.display = "block";//表示显示
        }
        //在线关闭
    </script>
</body>
</html>

下拉菜单效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #dv{
            width: 300px;
            height: 200px;
            background-color: pink;
            display: none;/*先通过CSS隐藏这个盒子*/
        }
    </style>
</head>
<body>
    <!--下拉菜单效果-->
    <input type="button" value="显示" id="btn">
    <div id="dv"></div>

    <script>
        let btn = document.getElementById("btn");
        btn.onmouseover = function(){
            let div = document.getElementById("dv");
            dv.style.display = "block";//表示显示
        }
        btn.onmouseout = function(){
            let div = document.getElementById("dv");
            dv.style.display = "none";//表示隐藏
        }
    </script>
</body>
</html>

单击图片for循环提示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img{
            width: 200px;
            height: 130px;
        }
    </style>
</head>
<body>
    <!--点击弹框-->
    <img src="images/1.jpg" alt="" id="im1">
    <img src="images/2.jpg" alt="" id="im2">
    <img src="images/3.jpg" alt="" id="im3">

    <script>
/*
        let im1 = document.getElementById("im1");
        let im2 = document.getElementById("im2");
        let im3 = document.getElementById("im3");
        im1.onclick = function(){
            alert("系统崩溃");
        }
        im2.onclick = function(){
            alert("系统崩溃");
        }
        im3.onclick = function(){
            alert("系统崩溃");
        }
*/
        let imgObjs = document.getElementsByTagName("img");
        for(let i=0;i<imgObjs.length;i++){
            imgObjs[i].onclick = function(){
                alert("系统崩溃");
            }
        }
    </script>
</body>
</html>

修改value按钮值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--修改value按钮值-->
    <input type="button" value="按钮" id="btn">
    <script>
        //let btn = document.getElementById("btn");
        //btn.onclick = function(){
        //    btn.value = "已经修改了";
        //   btn.type = "text";
        //   btn.id = "btn2";
        // }
        btn.onclick = function(){
            this.value = "已经修改了";
            this.type = "text";
            this.id = "btn2";
        }
    </script>
</body>
</html>

排他思想

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--排他思想-->
    <input type="button" value="完美">
    <input type="button" value="完美">
    <input type="button" value="完美">
    <input type="button" value="完美">
    <input type="button" value="完美">
    <input type="button" value="完美">
    <input type="button" value="完美">
    <input type="button" value="完美">

    <script>
        //需求：点击完美变成优秀
        let btnObjs = document.getElementsByTagName("input");
        for(let i=0;i<btnObjs.length;i++){//第一层循环是为了获取所有的input做点击事件
            //做点击事件
            btnObjs[i].onclick = function(){
                //第一件事：循环遍历所偶有的input 都变成完美
                for(let j=0;j<btnObjs.length;j++){
                    btnObjs[j].value = "完美";
                }
                //第二件事：让自己变成优秀
                this.value = "优秀";
            }
        }
    </script>

</body>
</html>

单击修改性别

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--修改性别-->
    <input type="button" id="btn" value="修改性别"><br />
    <input type="radio" name="sex" id="radio1" checked>男
    <input type="radio" name="sex" id="radio2" >女
    <input type="radio" name="sex" id="radio3" >未知

    <script>
        let btn = document.getElementById("btn");
        btn.onclick = function(){
            //document.getElementById("radio2").checked = "checked";
            document.getElementById("radio2").checked = true;
        }
    </script>
</body>
</html>