js学习2

1判断密码强度

<!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>password</title>
</head>
<body>
    <input type="password" name="password">
    <span id="msg"></span>
    <script>
        document.querySelector("[name='password']").
        addEventListener("keyup",function(){
      
      
            let length= this.value.length;
            let span = document.querySelector('#msg');
            let msg="";
            if(length>10){
      
      
                msg="密码高级";
            }else if(length>6){
      
      
                msg="密码中级"
            }else{
      
      
                msg="密码低级";
            }
            span.innerHTML=msg;
        });
    </script>
</body>
</html>

2三元表达式

<!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>
    <script>
        // 首先是2，真，执行(3?"后盾人":"hdcms")
        // 然后是3，真，执行"后盾人"
        let hd= 2?(3?"后盾人":"hdcms"):5;
        console.log(hd);

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

3switch

let name ="天使";
switch(name){
    
    
    // name是产品的时候输出chanpin.com
    // name是视频的时候输出shipin.com
    // name不是产品，也不是视频的时候输出shayebushi.com
    case "产品":
        console.log("chanpin.com");
        break;
    
    case "视频":
        console.log("shipin.com");
        break;
    default:    
        console.log("shayebushi.com");
        break;
    
}

还是js


let error="hd";
switch(error){
    
    
    //notice或者warning都是“提示或警告信息”
    // 然后break
    //swith适合单一情况比较
    case "notice":
    case "warning":
        console.log("提示或警告信息");
        break;
    case "error":
    default:
        console.log("错误信息");
}

4字符串的使用

let year="2021";
let site="aaa";
console.log(site+"成立于"+year);
// 输出
// aaa成立于2021

// $()读取变量的地址,老师推荐这种写法，可以换行空格
// 注意是  `  ，在Esc下面的那个按键
console.log(
    
    
    
    `${
      
      site}成立于${
      
      year}`
);

5字符串套用 ${ }

<!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>
    <style>
        ul{
      
      
            list-style: none;
        }
        li{
      
      
            padding: 10px;
        }
        li:nth-child(odd){
      
      
            background-color: #16a085;
            color:white;
            padding: 10px;
        }
    </style>
</head>

<body>
   
    <script>
        // 注意是[{},{},]中间是,
        let a=[
      {
      
        title:"媒体查询响应式布局"},
      {
      
        title:"flex弹性盒模型"},
      {
      
        title:"grid栅格布局"}
    ];
    function template(){
      
      
        // return `<ul>${a.map(item=>item.title)}</ul>`
        // =>是隐式符号

        // return `<ul>${a.map(item=>"<li>" + item.title+"</li>")}</ul>`
        //用li来显示

        // return `<ul>${a.map(item=>"<li>" + item.title+"</li>").join(" ")}</ul>`
        // 去掉奇怪的符号用join

        return `<ul>${ 
        a.map(item=>`<li>${ 
          item.title}</li>`).join(" ")}</ul>`
        // 字符串里套字符串

    }
    document.body.innerHTML=template();
    // 这句话就是把template这个方法的东西写到body里

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

在这里插入图片描述

1判断密码强度

2三元表达式

3switch

4字符串的使用

5字符串套用 ${ }

猜你喜欢