js2-基础知识2_jsiiz-CSDN博客

本文链接：https://blog.csdn.net/Z417031/article/details/127785401

js基础笔记-2

语句：

分支语句：

条件判断1：

    if(条件为真){
        执行语句;
    }else{
        条件为假时的执行语句;
    }

例：

    /*  
        商品价格低于微信余额时，支付成功；
        商品价格高于微信余额时，支付失败
    */
/*     var price = prompt("请输入商品价格：");
    var wxMoney = 20;

    if(price < wxMoney){
        alert("微信刷脸成功");
    }else{
        alert("支付失败");
    } */

条件判断2：

    if(条件1为真){
        提示语句
    }else if(条件2为真){
        提示语句
    }else{
        以上条件都不满足时的提示语句
    }

  // 18或18以下:未成年   18-30：青年人   30-50中年人   50以上:老年 
  /*     var age = 90;
    if(age <= 18){
        alert("你还是个宝宝~");
    }else if(age>18 && age<= 30){
        alert("你正值青年");
    }else if(age>30 && age<=50){
        alert("您已步入中年，注意保养~");
    }else{
        alert("你是一个老年人");
    } */
   




/*  
        计算平年和闰年
        1.闰年  （1）年份/4的余数为0而且年份/100的余数不为0
                （2）年份/400的余数为0
        2.平年
    */

    var year = 2019;
    if(((year%4 == 0) && (year%100 != 0))||(year%400 == 0)){
        alert("这一年是闰年");
    }else{
        alert("这一年是平年");
    }

switch语句：

/*     var week; //设置星期
    var day = 2; //设置一周中的第几天
    switch(day){
        case 1:
            week = "星期一";
            break;
        case 2:
            week = "星期二";
            break;
        case 3:
            week = "星期三";
            break;
        case 4:
            week = "星期四";
            break;
        case 5:
            week = "星期五";
            break;  
        case 6:
            week = "星期六";
            break;     
        case 7:
            week = "星期天"; 
            break;   
    }
    console.log(week); */
    
// case子句中，如果多个条件同时满足，可以有省略写法
/*     var month = 7;
    switch(month){
        case 3:
        case 4:
        case 5:
            alert("这是春天");
            break;
        case 6:
        case 7:
        case 8:
            alert("这是夏天");
            break;
        case 9:
        case 10:
        case 11:
            alert("这是秋天");
            break;
        case 12:
        case 1:
        case 2:
            alert("这是冬天");
            break;
    } */

// default默认语句，如果放在最后不需要写break，如果放在前面或中间部分，要通过break中断执行
    var id = 5;
    switch(id){
        // default:
        //     alert("你简直太拉胯，都充不起会员！！！");
        //     break;
        case 1:
            alert("你是超级会员");
            break;
        case 2:
            alert("你是VIP会员");
            break;
        case 3:
            alert("你是普通会员");
            break;
        default:
            alert("你简直太拉胯，都充不起会员！！！");
    }    
/* break 中断执行，之后的代码就不再执行了 */
/* continue 当前代码不执行,后续代码继续执行 */

循环语句：

break 中断执行，之后的代码就不再执行了

continue 当前代码不执行,后续代码继续执行

for循环：

/*    循环的条件： 【先判断再执行：已知条件】
        格式：
        for(1初始化(只执行一次); 2循环条件（范围）;3条件迭代){
            // 4循环体
        }
        执行顺序：1  2  4  3
*/ 
   /*  
   		break 中断执行，之后的代码就不再执行了 
		continue 当前代码不执行,后续代码继续执行
   */
    for(var i = 0;i <= 10;i++){
        if(i == 5){
            break;
        }
        document.write(i); //0 1 2 3 4
        if(i == 3){
            continue;
        }
    }    

// var arr = ["html","css","js","vue"];
    // for循环遍历
    // for(var i = 0;i < arr.length; i++){
    //     document.write("<input type='checkbox'>"+arr[i]+"<br>");
    // }

while循环：

/*
    while循环格式： 【先判断再执行：未知条件】
        1.初始化
        while(2.循环条件){
            3.条件迭代
            // 循环体
        } 
*/
var i = 1; //初始化
    while(i <= 5){
        document.write(i++ +"<br>");
    } 


/*  
    do while循环 【先执行再判断：至少执行一次】
        1.初始化
        do{
            // 循环体  条件迭代
        }while(循环条件：范围);

*/
    var i = 1;
    do{
        // 循环体和条件迭代
        document.write(i++ + "<br>");
    }while(i <= 5);

数组：

详见http://t.csdn.cn/LltWu

方法：

<!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>
    
</body>
<script>
    /*  
        关于字符串的方法：
        1. trim()：去除字符串首尾两端的空格
        2. replace(被替换的旧元素，替换成的新元素) 替换字符串(只替换一次)
        3. split("从指定的地方分割") 将字符串转换为数组

        关于数组的方法
        1. splice(要删除内容的起始下标，删除元素的个数) 删除数组中的指定元素
        2. join("拼接后的连接符") 将数组中的所有元素拼接成字符串

        关于Math的方法
        1. Math.ceil() 向上取整
        2. Math.floor() 向下取整
        3. Math.round() 四舍五入
        4. Math.random()随机数 默认0-1之间的数字
    */

    // 字符串
/*     var str = " 这   是一  条 电影  评论   ";
    console.log("测试空格"+str+"测试空格");
    var newstr = str.trim();
    console.log("测试空格"+newstr+"测试空格"); */

    /* var str = "hello,everybody~";
    console.log(str);
    var newstr = str.replace("e","E");
    console.log(newstr); */


    /* var str = "要什么自行车";
    var arr = str.split("");
    console.log(arr); */


    // 数组
    /* var arr = [10,45,65,85,63,79];
    console.log(arr);
    var newarr = arr.splice(1,arr.length-1);
    console.log(newarr);  */

    /* var arr = ["要","什","么","自","行","车"];
    var newstr = arr.join("/");
    console.log(newstr); */


    // Math对象
    // ceil 向上取整（+1）
    // var num = 3.64159265;
    /* var newnum = Math.ceil(num);
    console.log(newnum); */

    // 向下取整
    /* var newnum = Math.floor(num);
    console.log(newnum); */

    // 四舍五入
    /* var newnum = Math.round(num);
    console.log(newnum); */

    /*  
       Math.random();  包前不包后 
    */
    //1.默认值0-1之间的数字（不包含1）
    /* var num = Math.random();
    console.log(num); */

    // 2. 输出0-10之间的数据(不包含10)
    /* var num = Math.random()*10;
    console.log(num); */


    // 3. 输出58-109之间的数据
    // min —— max 之间的数据
    // Math.random()*(max - min)+min
    var num = Math.random()*(109-58)+58;
    console.log(num);
</script>
</html>

函数：

无参函数

// 无参函数
 
function fun(){
       alert("祝你生日快乐~"); 
    }
    // 调用函数  函数名();
    fun();

有参函数

 //有参函数、默认参数（一个函数只有一个默认参数，默认参数需要放到最后）
    function fun(year,name,age=18){   //形参
        alert(year+name+age);
    }

    fun(2000,"张三",25);   //实参

匿名函数：

<body>
    
</body>
<script>
    // 匿名函数（函数直接定义，不起名字）
    setInterval(function(){
        var str = "重要的事情说N遍";
        document.write(str+"<br>");
    },2000);
</script>

事件：

onclick事件

鼠标点击事件（当鼠标点击元素时触发）

onmouseover事件

鼠标移动到元素上方时触发

onmouseout事件

鼠标从元素上方离开时触发

onchange事件

域的内容改变时触发

onblur事件

光标失去焦点时触发

用法示例：

<!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>JS事件</title>
</head>
<style>
    #div_one{
        background-color: aqua;
        width: 300px;
        height: 200px;
    }
</style>
<body>
    <!-- onclick事件 鼠标点击事件（当鼠标点击元素时触发） -->
    <!-- <button οnclick="sur()">点我有惊喜哦~</button> -->

    <!--  
        onmouseover事件 鼠标移动到元素上方时触发
        onmouseout事件  鼠标从元素上方离开时触发
    -->
    <!-- <div id="div_one" οnmοuseοver="fun()" οnmοuseοut="fun02()"></div> -->

    <!-- onchange事件 域的内容改变时触发 -->
    <!-- <input type="text" οnchange="changeData()"> -->

    <!-- onblur事件  光标失去焦点时触发 -->
    <input type="text" οnblur="changeBlur()">

</body>
<script>
    /* function sur(){
        alert("Surprise~");
    } */

    /* function fun(){
        alert("鼠标移动到div上面了");
    }

    function fun02(){
        alert("鼠标从div上面挪走了~");
    } */


    /* function changeData(){
        console.log("域的内容被改变了");
    } */


    function changeBlur(){
        console.log("失去焦点了~");
    }

</script>
</html>

onload事件

优先加载（一般用于判断是否登录网页）

<!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>
<style>
    div{
        width: 300px;
        height: 50px;
        background-color: aqua;
        text-align: center;
        line-height: 50px;
    }
</style>
<!-- onload事件：优先加载 -->
<body onload="isLogin()">
    <div id="login">登录/注册</div>
    <div onclick="tuichu()">退出</div>
</body>
<script>
        // if(localStorage.getItem("name") != ""){
        //     var login = document.getElementById("login");
        //     login.innerHTML = "个人中心";
        //     console.log("local:",localStorage.getItem("name"));
        //     console.log("session:",sessionStorage.getItem("name"));
        // }

        // function tuichu(){
        //     localStorage.removeItem("name");
        // }


    /*     function isLogin(){
            // 判断是否登录

        }else{
            // 跳转到demo01页面
            location.href = "./demo01.html";
        } */


</script>
</html>

window.onscroll 事件

滚动条监听事件

<!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>
<style>
    /* 未选中的样式 */
    #switch{
        width: 100px;
        height: 40px;
        /* 去掉浏览器默认样式 */
        -webkit-appearance: none;
        background-color: red;
        border-radius: 30px;
        /* 去掉默认边框 */
        outline: none;
        position: relative;
        text-align: center;
        line-height: 40px;
    }

    /* 选中的样式 */
    #switch:checked{
        background-color: greenyellow;
    }

    /* 未选中的圆圈样式 */
    /* before 给元素之前添加内容和样式 */
    #switch::before{
        /* 内容 */
        content: "关";
        width: 40px;
        background-color: gainsboro;
        position: absolute;
        left: 0;
        border-radius: 50%;
        transition: 0.3s linear all;
    }

    /* 选中的圆圈样式 */
    #switch:checked::before{
        content: "开";
        position: absolute;
        left: 60px;
        transition: 0.3s linear all;
    }

    #video_small{
        width: 300px;
    }

    .fixed_window{
        position: fixed;
        /* background-color: aqua; */
        width: 300px;
        height: 230px;
        bottom: 30px;
        right: 30px;
    }

    pre{
        font-size: 50px;
        line-height: 120px;
    }

</style>
<body>
    <div class="fixed_window">
        <input type="checkbox" id="switch" onclick="dianji()">
        <video src="../video/丁真的世界.MP4" id="video_small" controls autoplay loop></video>
    </div>
    <pre>
        滑动滚动条弹出视频小窗
        滑动滚动条弹出视频小窗
        滑动滚动条弹出视频小窗
        滑动滚动条弹出视频小窗
        滑动滚动条弹出视频小窗
        滑动滚动条弹出视频小窗
        滑动滚动条弹出视频小窗
        滑动滚动条弹出视频小窗
        滑动滚动条弹出视频小窗
        滑动滚动条弹出视频小窗
        滑动滚动条弹出视频小窗
        滑动滚动条弹出视频小窗
        滑动滚动条弹出视频小窗
        滑动滚动条弹出视频小窗
        滑动滚动条弹出视频小窗
        滑动滚动条弹出视频小窗
        滑动滚动条弹出视频小窗
        滑动滚动条弹出视频小窗
        滑动滚动条弹出视频小窗
        滑动滚动条弹出视频小窗
        滑动滚动条弹出视频小窗
        滑动滚动条弹出视频小窗
        滑动滚动条弹出视频小窗
        滑动滚动条弹出视频小窗
        滑动滚动条弹出视频小窗
        滑动滚动条弹出视频小窗
        滑动滚动条弹出视频小窗
    </pre>
</body>
<script>
    // 获取视频节点
    var video_small = document.getElementById("video_small");
    // video_small.style.display = "none";
    // 进入页面时，视频隐藏
    video_small.style = "display:none";
    // 视频暂停
    video_small.pause();
    var input_switch = document.getElementById("switch");

    // 视频暂停
    function zanting(){
        // 视频隐藏
        video_small.style = "display:none";
        // 视频暂停
        video_small.pause(); 
    }

    // 视频播放
    function bofang(){
        // 视频显示
        video_small.style = "display:block";
        // 视频播放
        video_small.play();
    }

    function dianji(){
        if(input_switch.checked == false){
            zanting();
        }else{
            bofang();
        }
    }



    
    // window.onscroll 滚动条监听事件

    window.onscroll = function(){
        // 获取滚动条滑动高度（兼容写法）
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        console.log(scrollTop);
        // 滚动条滑动到2000高度，视频显示
        if(scrollTop > 2000){
            bofang();
            input_switch.style = "display:none";
        }else{
            zanting();
            input_switch.style = "display:block";
        }
    }

</script>
</html>

dom：

DOM对象

document Object Model，文档对象模型，也叫 DOM树
浏览器加载整个HTML文档形成 document对象， document对象是DOM树中所有节点的根节点
DOM定义了访问和操作HTML文档的接口
通过 DOM可以改变网页的内容、结构和样式

DOM树

DOM将文档描述成一个由节点层级构成的树结构
DOM将HTML文档的各个部分都描述成一个对象，我们称之为节点；标签、属性和文本都是节点

document对象

1.当浏览器加载一个HTML文档时，会创建一个document对象，document对象是DOM树中所有节点的根节点。
2.通过document对象可以访问HTML文档中的所有元素

获取元素的方法

document.getElementById()方法

根据 id属性获取元素

<!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>获取DOM节点</title>
</head>
<style>


</style>
<body>
    <div id="one" onclick="changeText()" >根据id获取节点</div>
    <!-- <div id="two">这是之前的样式</div> -->

    
</body>
<script>

    function changeText(){
        // document.getElementById 通过id名获取节点（文本、标签、属性）
        var getone = document.getElementById("one");
        // innerHTML属性：设置元素开始和结束标签中间的文字
        // getone.innerHTML = "这是修改后的文字";
        getone.innerHTML = "<span style='color:red;background-color:aqua'>这是修改后的文字</span>";

    }


    // var gettwo = document.getElementById("two");
</script>
</html>

document.getElementsByName()方法

根据元素的name属性获取元素

<!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>通过name名获取元素</title>
</head>
<body>
    <input type="text" name="myInput"><br>
    <input type="text" name="myInput"><br>
    <input type="text" name="myInput"><br>
    <input type="button" value="获取元素" onclick="getDom()">
</body>
<script>
    // document.getElementsByName 通过name名获取元素（获取的是数组）
    function getDom(){
        var Doms = document.getElementsByName("myInput");
        for(var i = 0;i < Doms.length;i++){
            console.log(Doms[i]);
        }
    }
    
</script>
</html>

操作元素内容

innerHTML属性用来设置或返回开始和结束标签之间的HTML

操作元素样式

style属性用来设置更改样式

示例：

<!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>模态框</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }

    .div_out{
        position: relative;
    }

    .div_big{
        width: 40%;
        height: 400px;
        background-color: pink;
        border-radius: 10px;
        margin:25px auto;
        text-align: center;
        padding-top: 20px;
    }

    .div_input{
        /* background-color: aqua; */
        width: 70%;
        margin: 50px auto;
        font-size: 20px;
    }

    .div_input>input{
        width: 70%;
        height: 35px;
        border-radius: 10px;
        border: none;
        outline: none;
    }

    input[type="submit"]{
        width: 65%;
        height: 35px;
        border: none;
        border-radius: 10px;
        font-size: 20px;
    }

    /* 模态框样式 */
    #model{
        width: 40%;
        height: 420px;
        background-color: rgba(0, 0, 0, 0.2);
        position: absolute;
        top: 2px;
        left: 460px;
    }

    #hide{
        font-size: 25px;
        font-weight: 600;
        position: absolute;
        top: 20px;
        left: 1020px;
    }
</style>
<body>
    <div class="div_out">
        <!-- 登录表单 -->
        <div class="div_big">
            <h1>校园网登录</h1>
            <form action="https://www.baidu.com" method="get" onsubmit="return validity()">
                <div class="div_input">
                    登录账号：<input type="text" name="userName" id="userName">
                </div>
                <div class="div_input">
                    登录密码：<input type="password" name="userPwd" id="userPwd">
                </div>
                <div>
                    <input type="submit">
                </div>
            </form>
        </div>

        <div id="model"></div>
        <div id="hide" onclick="guan()">X</div>
    </div>
</body>
<script>
    // 获取模态框节点
    var model = document.getElementById("model");
    // 获取X的节点
    var hide = document.getElementById("hide");
    // 进入页面时，模态框和X隐藏
    model.style = "display:none";
    hide.style = "display:none";

    // 验证表单
    function validity(){
        // 获取账号节点
        var userName = document.getElementById("userName");
        // 获取密码节点
        var userPwd = document.getElementById("userPwd");
        // 姓名正则
        var nameReg = /^([\u4e00-\u9fa5]{1,20}|[a-zA-Z\.\s]{1,20})$/;
        // 密码正则
        var pwdReg = /^[0-9a-zA-Z]{6,12}$/;

        // 判断账号是否为空
        if(userName.value == ""){
            // 当验证为空时，模态框和X都显示出来
            model.style = "display:block";
            hide.style = "display:block";
            model.innerHTML = "<div style='color:red;text-align:center;line-height:420px;font-size:30px;font-weight:600;'>账号不能为空</div>";
            return false;
        }

        // 判断账号格式
        if(!nameReg.test(userName.value)){
            // 当验证为空时，模态框和X都显示出来
            model.style = "display:block";
            hide.style = "display:block";
            model.innerHTML = "<div style='color:red;text-align:center;line-height:420px;font-size:30px;font-weight:600;'>账号格式有误！</div>";
            return false;            
        }

        // 判断密码是否为空
        if(userPwd.value == ""){
            // 当验证为空时，模态框和X都显示出来
            model.style = "display:block";
            hide.style = "display:block";
            model.innerHTML = "<div style='color:red;text-align:center;line-height:420px;font-size:30px;font-weight:600;'>密码不能为空</div>";
            return false;
        }

        // 判断密码格式
        if(!pwdReg.test(userPwd.value)){
            // 当验证为空时，模态框和X都显示出来
            model.style = "display:block";
            hide.style = "display:block";
            model.innerHTML = "<div style='color:red;text-align:center;line-height:420px;font-size:30px;font-weight:600;'>请填写6-12位的密码！</div>";
            return false;            
        }
    }

    // 关闭模态框
    function guan(){
        // 点击关闭按钮时，模态框和X都隐藏
        model.style = "display:none";
        hide.style = "display:none";
    }
</script>
</html>

定时器：

setTimeout

setTimeout(函数,间隔毫秒数); 只执行一次

clearTimeou(intval);//清除

setInterval

setInterval(函数,间隔毫秒数); 重复执行

clearInterval(intval);//清除

示例：

<!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>定时器</title>
</head>
<style>

</style>
<body>
    
</body>
<script>
    function fun(){
        var str = "重要的事情说N遍";
        document.write(str+"<br>");
    }

    // fun();

    // setTimeout(函数,间隔毫秒数);   只执行一次
    // setTimeout(fun,3000);

    // setInterval(函数,间隔毫秒数); 重复执行
    setInterval(fun,2000);

</script>
</html>

轮播图

<!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>轮播图</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }

    div#imgs img{
        width: 100%;
        height: 450px;
    }

    /* 鼠标变成小手 */
    div.focus:hover{
        cursor: pointer;
    }
</style>
<body>
    <div class="focus" onmouseover="end()" onmouseout="start()">
        <div id="imgs">
            <img src="../img/gongqijun01.png" alt="">
            <img src="../img/gongqijun02.png" alt="">
            <img src="../img/gongqijun03.png" alt="">
            <img src="../img/gongqijun04.png" alt="">
        </div>
    </div>
</body>
<script>
    // 初始化图片
    var i = 0;

    function focus(){
        // children 获取某个节点的子节点
        // 获取图片节点【获取到的是数组】
        var imgs = document.getElementById("imgs").children;
        // 循环遍历数组中的每一个图片
        for(var n = 0;n < imgs.length; n++){
            // 将所有图片隐藏
            imgs[n].style = "display:none";
        }

        // 显示当前图片
        imgs[i].style = "display:block"; 
        // 图片自增
        i++;

        // 当图片达到最大值（播放到最后一张图片时），重新开始播放第一张
        if(i === imgs.length){
            i = 0;
        }
    }

    focus(); 

    var intval = setInterval(focus,2000);


    // 鼠标悬停时，停止播放
    function end(){
        // 清除定时器
        clearInterval(intval);
    }


    // 鼠标离开时，重新开始播放
    function start(){
        intval = setInterval(focus,2000);
    }

</script>
</html>

开关控制画中画

<!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>
<style>
    /* 未选中的样式 */
    #switch{
        width: 100px;
        height: 40px;
        /* 去掉浏览器默认样式 */
        -webkit-appearance: none;
        background-color: red;
        border-radius: 30px;
        /* 去掉默认边框 */
        outline: none;
        position: relative;
        text-align: center;
        line-height: 40px;
    }

    /* 选中的样式 */
    #switch:checked{
        background-color: greenyellow;
    }

    /* 未选中的圆圈样式 */
    /* before 给元素之前添加内容和样式 */
    #switch::before{
        /* 内容 */
        content: "关";
        width: 40px;
        background-color: gainsboro;
        position: absolute;
        left: 0;
        border-radius: 50%;
        transition: 0.3s linear all;
    }

    /* 选中的圆圈样式 */
    #switch:checked::before{
        content: "开";
        position: absolute;
        left: 60px;
        transition: 0.3s linear all;
    }

    #video_small{
        width: 300px;
    }

</style>
<body>
    <input type="checkbox" id="switch" onclick="dianji()">
    <video src="../video/丁真的世界.MP4" id="video_small" controls autoplay loop></video>
</body>
<script>
    // 获取视频节点
    var video_small = document.getElementById("video_small");
    // video_small.style.display = "none";
    // 进入页面时，视频隐藏
    video_small.style = "display:none";
    // 视频暂停
    video_small.pause();

    function dianji(){
        var input_switch = document.getElementById("switch");
        if(input_switch.checked == false){
            // 视频隐藏
            video_small.style = "display:none";
            // 视频暂停
            video_small.pause();   
        }else{
            // 视频显示
            video_small.style = "display:block";
            // 视频播放
            video_small.play();
        }

    }
</script>
</html>

评论功能

<!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>评论</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }

    li{
        list-style: none;
    }

    #content{
        margin-top: 30px;
        margin-left: 20px;
    }

    #list{
        background-color: aqua;
        width: 600px;
        margin-top: 30px;
        margin-left: 20px;
        line-height: 40px;
    }

    #list img{
        width: 80px;
        height: 80px;
        border-radius: 50%;
        float: left;
    }

    #list p{
        color: blue;
        font-size: 18px;
    }
</style>
<body>
    <div class="pinglun">
        <textarea  id="content" cols="80" rows="10"></textarea>
        <button onclick="pinglun()">评论</button>
        <ul id="list">

            <li>
                <img src="../img/gongqijun01.png" alt="">
                <h2>侯小猴</h2>
                <p>这个电影简直太拉胯！！！不忍直视</p>
                <h4>2022-9-15 22:22</h4>
            </li>
            <li>
                <img src="../img/gongqijun01.png" alt="">
                <h2>侯小猴</h2>
                <p>这个电影简直太拉胯！！！不忍直视</p>
                <h4>2022-9-15 22:22</h4>
            </li>
            <li>
                <img src="../img/gongqijun01.png" alt="">
                <h2>侯小猴</h2>
                <p>这个电影简直太拉胯！！！不忍直视</p>
                <h4>2022-9-15 22:22</h4>
            </li>
            <li>
                <img src="../img/gongqijun01.png" alt="">
                <h2>侯小猴</h2>
                <p>这个电影简直太拉胯！！！不忍直视</p>
                <h4>2022-9-15 22:22</h4>
            </li>
            <li>
                <img src="../img/gongqijun01.png" alt="">
                <h2>侯小猴</h2>
                <p>这个电影简直太拉胯！！！不忍直视</p>
                <h4>2022-9-15 22:22</h4>
            </li>
        </ul>
    </div>
</body>
<script>
    // 去掉所有空格
    function trimAll(str){
        // 去掉前后两端的空格
        var nowstr = str.trim();
        //  字符串转换成数组
        var arr = nowstr.split(" ");
        // 循环遍历数组的元素并删除空格
        for(var i = 0;i < arr.length; i++){
            if(arr[i] == ""){
                arr.splice(i,1);
                i--;
            }
        }
        return arr.join("");
    }


    function pinglun(){
        // 获取评论框节点
        var content = document.getElementById("content");
        // 最终处理后的评论字符串
        var trimstr = trimAll(content.value) ; 

        // 判断评论是否为空
        if(trimstr == ""){
            alert("评论不能为空！！");
            return;
        }

        // 判断评论是否少于6个字
        if(trimstr.length < 6){
            alert("评论不能少于6个字！！");
            return;
        }


        // 创建新的节点  document.createElement("元素名");
        // 添加新的li节点
        var newli = document.createElement("li");
        // console.log(newli);

        // 创建头像
        var imgarr = ["../img/gongqijun02.png","../img/Harry01.jpg","../img/gongqijun03.png","../img/Harry03.jpg","../img/Harry02.jpg","../img/gongqijun04.png"];
        var imgnum = parseInt(Math.random()*imgarr.length);  //下标   

        // 创建昵称
        var namearr = ["隔壁老王","王老头","王麻子","广场舞李大妈","钻石老刘","楼下王婶"];
        var namenum = parseInt(Math.random()*namearr.length);

        // 给li中间添加img h2 p
        newli.innerHTML = "<img src='"+imgarr[imgnum]+"'/><h2>"+namearr[namenum]+"</h2><p>"+trimstr+"</p>";

        // 找到父类元素ul
        var parent = document.getElementById("list");

        // insertBefore 在父类元素的最前面添加内容
        // 在ul标签最前面添加li
        parent.insertBefore(newli,parent.children[0]);


        // 清空输入框中的内容
        document.getElementById("content").value = "";

    }

</script>
</html>

正则验证及模态框

<!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>模态框</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }

    .div_out{
        position: relative;
    }

    .div_big{
        width: 40%;
        height: 400px;
        background-color: pink;
        border-radius: 10px;
        margin:25px auto;
        text-align: center;
        padding-top: 20px;
    }

    .div_input{
        /* background-color: aqua; */
        width: 70%;
        margin: 50px auto;
        font-size: 20px;
    }

    .div_input>input{
        width: 70%;
        height: 35px;
        border-radius: 10px;
        border: none;
        outline: none;
    }

    input[type="submit"]{
        width: 65%;
        height: 35px;
        border: none;
        border-radius: 10px;
        font-size: 20px;
    }

    /* 模态框样式 */
    #model{
        width: 40%;
        height: 420px;
        background-color: rgba(0, 0, 0, 0.2);
        position: absolute;
        top: 2px;
        left: 460px;
    }

    #hide{
        font-size: 25px;
        font-weight: 600;
        position: absolute;
        top: 20px;
        left: 1020px;
    }
</style>
<body>
    <div class="div_out">
        <!-- 登录表单 -->
        <div class="div_big">
            <h1>小猿网登录</h1>
            <form action="https://www.baidu.com" method="get" onsubmit="return validity()">
                <div class="div_input">
                    登录账号：<input type="text" name="userName" id="userName">
                </div>
                <div class="div_input">
                    登录密码：<input type="password" name="userPwd" id="userPwd">
                </div>
                <div>
                    <input type="submit">
                </div>
            </form>
        </div>

        <div id="model"></div>
        <div id="hide" onclick="guan()">X</div>
    </div>
</body>
<script>
    // 获取模态框节点
    var model = document.getElementById("model");
    // 获取X的节点
    var hide = document.getElementById("hide");
    // 进入页面时，模态框和X隐藏
    model.style = "display:none";
    hide.style = "display:none";

    // 验证表单
    function validity(){
        // 获取账号节点
        var userName = document.getElementById("userName");
        // 获取密码节点
        var userPwd = document.getElementById("userPwd");
        // 姓名正则
        var nameReg = /^([\u4e00-\u9fa5]{1,20}|[a-zA-Z\.\s]{1,20})$/;
        // 密码正则
        var pwdReg = /^[0-9a-zA-Z]{6,12}$/;

        // 判断账号是否为空
        if(userName.value == ""){
            // 当验证为空时，模态框和X都显示出来
            model.style = "display:block";
            hide.style = "display:block";
            model.innerHTML = "<div style='color:red;text-align:center;line-height:420px;font-size:30px;font-weight:600;'>账号不能为空</div>";
            return false;
        }

        // 判断账号格式
        if(!nameReg.test(userName.value)){
            // 当验证为空时，模态框和X都显示出来
            model.style = "display:block";
            hide.style = "display:block";
            model.innerHTML = "<div style='color:red;text-align:center;line-height:420px;font-size:30px;font-weight:600;'>账号格式有误！</div>";
            return false;            
        }

        // 判断密码是否为空
        if(userPwd.value == ""){
            // 当验证为空时，模态框和X都显示出来
            model.style = "display:block";
            hide.style = "display:block";
            model.innerHTML = "<div style='color:red;text-align:center;line-height:420px;font-size:30px;font-weight:600;'>密码不能为空</div>";
            return false;
        }

        // 判断密码格式
        if(!pwdReg.test(userPwd.value)){
            // 当验证为空时，模态框和X都显示出来
            model.style = "display:block";
            hide.style = "display:block";
            model.innerHTML = "<div style='color:red;text-align:center;line-height:420px;font-size:30px;font-weight:600;'>请填写6-12位的密码！</div>";
            return false;            
        }
    }

    // 关闭模态框
    function guan(){
        // 点击关闭按钮时，模态框和X都隐藏
        model.style = "display:none";
        hide.style = "display:none";
    }
</script>
</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>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    body{
        background: black;
    }
    .con{
        width: 50%;
        height: 200px;
        margin: 200px auto;
    }
    .con>#one,#two,#three{
        width: 150px;
        height: 150px;
        border-radius: 50%;
        background: grey;
        float: left;
        line-height: 150px;
        text-align: center;
        font-size: 60px;
        margin: 20px 40px;
        color: white;
    }

</style>
<body>
    <div class="con">
        <div id="one">红</div>
        <div id="two">绿</div>
        <div id="three">黄</div>
    </div>
</body>

<script>
    var red = 10;
    var lv = 15;
    var yellow = 3;

    function time(){
        if(red > 0){
            document.getElementById("one").innerHTML = red;
            document.getElementById("one").style="background:red";
        }else{
            document.getElementById("one").innerHTML = "红";
            document.getElementById("one").style="background:grey";
            if(lv > 0){
                document.getElementById("two").innerHTML = lv;
                document.getElementById("two").style="background:rgb(13, 240, 51)";
            }else{
                document.getElementById("two").innerHTML = "绿";
                document.getElementById("two").style="background:grey";
                
                if(yellow > 0){
                    document.getElementById("three").innerHTML = yellow;
                    document.getElementById("three").style="background:yellow";
                }else{
                    document.getElementById("three").innerHTML = "黄";
                    document.getElementById("three").style="background:grey";
                    red = 11;
                    yellow = 4;
                    lv = 16;
                }
                yellow--;
            }
            lv--;
        }
        red--;
    }
    time();
    setInterval(time,1000);
</script>
</html>