第二周 - day 09第二周作业 - 《JS系列笔记》

1.实现下图案例中的效果
2.实现如下的需求
3.写个函数完成以下字符串处理需求
4.需求：’2021/4/16 12:36:8’ 转换为 2021年04月16日 12时36分08秒
5看需求实现相关的JS代码（常见面试题）
6.编写一个函数来计算给定数字的平均值。
7.编写一个函数来确定第一个字符串是否包含完整第二个字符串。
- 1.使用indexOf /includes 方法实现
- 2.不能允许indexOf办法简单算法

1.实现下图案例中的效果

第一种解决办法 if else

<!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>作业1</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
            overflow: hidden;
        }
        #submit{
            cursor: pointer;
        }
    </style>
</head>
<body style="background: white;">
       <button id="submit">更改body的背景颜色</button> 
       <script>
           /* var body=document.body;
           //submit 默认不写 docoument 浏览器可以渲染
           var submit=document.querySelector('#submit');
           submit.onclick=function(){
                // 1.获取当前body的最新背景颜色
                var bg=body.style.background;
                // 2.根据当前颜色 再把它改成其他颜色
                if(bg ==="white"){
                    body.style.background='red';
                }else if(bg ==='red'){
                    body.style.background='green';
                }else if(bg ==='green'){
                    body.style.background='blue';
                }else if(bg ==='blue'){
                    body.style.background='black';
                }else{
                    body.style.background='white';
                }
           }  */
        // 元素对象.style.xxx='xxx' 修改元素的"行内样式”
        // console.log(元素对象.style.xxx)  获取元素的行内样式 [当前样式只有处在行内上，我们才可以获取到，哪怕写了样式，但是如果不写在行内上，我们基于这种办法也无法获取]
        //我们在样式中设置元素的背景颜色 如果是16进制的颜色值，JS获取的结果是RGB的值，不方便我们判断
        //所以我们一般写成颜色单词 white/black/red/green/blue
       </script>
</body>
</html>

第二种 swich case

       <script>
           /* var body=document.body;
           //submit 默认不写 docoument 浏览器可以渲染
           var submit=document.querySelector('#submit');
           submit.onclick=function(){
                var bg=body.style.background;
                // swich case 判断(分支):应用于在一个变量在等于不同值的情况下（按照===比较） 做的不同操作
                switch(bg){//bg==='white'
                    case 'white':
                         body.style.background='red';
                         break;//每一种判断结束后需要设置break;
                    case 'red':
                         body.style.background='green';
                         break;
                    case 'green':
                         body.style.background='blue';
                         break;
                    case 'blue':
                         body.style.background='black';
                         break;
                    default:
                        body.style.background='white';
                }
           } */       
       </script>

第三种利用数组机制

var body=document.body;
           //submit 默认不写 docoument 浏览器可以渲染
           var submit=document.querySelector('#submit'),
           arr=["white","red","green","blue","black"],
           index=0;
           submit.onclick=function(){
              //每点击一次 索引累加，如果超过最大索引 则回归索引零
               index++;
               index>arr.length-1?index=0:null;
              // 基于这个索引 到数组中取出对应的颜色 赋值给Body的背景即可
               body.style.background=arr[index];
}

思考：以下哪种方式可以修改BODY背景颜色第二种和第三种

 <script>
        var body = document.body;

        var bgSty = body.style,
            第一种:bg = body.style.background;
                            bg = 'orange';
        第二种bgSty.background = 'lightblue';
        第三种body.style.background = 'pink';
</script>

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>作用2</title>
</head>
<body>
    <input type="text" id="inPBox"> 
    <button id="submit">计算</button>
    <script>
        var inpBox=document.querySelector("#inPBox"),
            submit=document.querySelector("#submit");
            submit.onclick=function(){
                //1.获取文本框的内容 文本框.value=> 获取文本框输入的内容[string]  
                var val= +inpBox.value; //+ 转Number
                //2.校验正数/负数/零/非法数字
                if(isNaN(val)){
                    console.log("非法数字");
                    return;
                }
                if(val===0){
                    console.log('零');
                    return;
                }
                if(val>0){
                    console.log('正数');
                    return;
                }
                console.log('负数');
            };
    </script>
</body>
</html>

3.写个函数完成以下字符串处理需求

//->把'2017-10-20'处理成 ‘2017/10/20’
function dealString(){
    //=>在这里实现你的代码

}
let res = dealString('2017-10-20');
console.log(res); // =>'2017/10/20'

<!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>  
        /* function dealString(str){
            //return str.replace('-', '/').replace('-', '/');
            //return str.replace(/-/g, '/')
            //return str.replaceAll('-','/'); replaceAll不兼容IE
            return str.replace(/-/g, '/');
        }
        let res = dealString('2017-10-20');
        console.log(res); // =>'2017/10/20' */
    </script>
    <script>
     /*    function dealString(str){
            //str.split('-') =>['2017','10','20']
            //arr.join('/')=>2017/10/20
            return str.split('-').join('/');
        }
        let res = dealString('2017-10-20');
        console.log(res); // =>'2017/10/20' */ 
    </script>
</body>
</html>

4.需求：’2021/4/16 12:36:8’ 转换为 2021年04月16日 12时36分08秒

<script>

        //格式化时间字符串  把某个格式的时间字符串 变为我想要的格式
        function zero(str){
            //补充0
            str=str+'';//拼接空转成空
            return str.length<2?`0${str}`:str;
        }
        /* 时间字符串格式化 */
        function formatTime(time){

            // 思路 先按照空格，把字符串变为数组 
            //分别取出数组中的两项 第一项按照/拆 
            //第二项按照冒号拆
            //拼接成为想要的字符串
            /* var arr=time.split(' '); //["2021/4/16", "12:36:8"]
            if(arr[0]){ //判断arr[0]是否有值
                var left=arr[0].split('/');
            }
            if(arr[1]){
                var right=arr[1].split(':');
            } */
            var arr=time.split(/(?:\/|:| )/g); //(?:)表示非捕获分组，非捕获分组匹配的值不会保存起来 |或者的意思
            return `${arr[0]}年${zero(arr[1])}月${zero(arr[2])}日 ${zero(arr[3])}时${zero(arr[4])}分${zero(arr[5])}秒`;
        }

        //console.log(time);
        var res=formatTime('2021/4/16 12:36:8');
        console.log(res);
    </script>

5看需求实现相关的JS代码（常见面试题）

给#box下的li实现奇偶行变色
鼠标滑过li背景高亮展示，鼠标离开回归原有颜色
鼠标点击li弹出 ‘我是第N行’，例如：点击第一个li弹出 ‘我是第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>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        ul,ol{
            list-style: none;
        }

        .box{
            width: 300px;
            margin: 20px auto;
        }

        .box li{
            line-height: 35px;
            border-bottom: 1px dashed #ccc;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <ul class="box" id="box">
        <li>第一行</li>
        <li>第二行</li>
        <li>第三行</li>
        <li>第四行</li>
        <li>第五行</li>
        <li>第六行</li>
    </ul>

    <!-- IMPORT JS -->
    <script>
        //奇偶变色 高亮选中  点击弹框

        var boxlist=document.querySelectorAll('#box>li');

        for (var i = 0; i < boxlist.length; i++) {
            var item=boxlist[i];
            item.myIndex=i;
            //奇偶行变色
            item.style.background=i%2===0?'#FFF':'#FFC0CB'; //颜色的16进制不区分大小写

            //鼠标滑过高亮选中
            item.onmouseover=function(){
                this.style.background='#87cefa';
            };
            item.onmouseout=function(){
                var index=this.myIndex;
                this.style.background=index%2===0?'#FFF':'#FFC0CB';
            };
            //鼠标点击，弹出序号
            item.onclick=function(){    
               alert(`我是第${this.myIndex+1}个li`);
            };
        }

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

6.编写一个函数来计算给定数字的平均值。

<!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>
        function find_average() {
            var total=0,
                n=0;//参与平均运算

            for (var i = 0; i <arguments.length; i++) {
               var item= +arguments[i];//转为数字
               if(isNaN(item)) continue; //判断是否是有效数字
               total+=item;
               n++;
            }
            //[number].toFixed([n]);//保留小数点后面N位 结果是字符串
            return (total/n).toFixed(2);
        }
        console.log(find_average(1,1,1)); //'1.00'
        console.log(find_average(1,2,3));// '2.00'
        console.log(find_average(1,2,3,4));// '2.50'
        console.log(find_average(1,2,'A',4));//'2.33'
                //当传进的参数中含有非有效字符时，不参与求和和平均运算
        console.log(find_average(1,'b'));
    </script>
</body>
</html>

7.编写一个函数来确定第一个字符串是否包含完整第二个字符串。

比如：“abcEnglish ishdef”包含‘English’
字符顺序很重要
大写字母或小写字母都无关紧要—“abcENglish ishdef”包含‘english’也是正确的。
返回值为布尔值，如果第一个字符串包含完整第二个字符串，则返回值为True；如果第一个字符串包含完整第二个字符串，则返回值为False。

1.使用indexOf /includes 方法实现

<!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>
        /* 
        * 第一个字符串比第二个字符串还要短 则结果一定是false 例如：'abc‘ 字符串不可能包含'abcdefg'
        * indexof('as'); 找的是第一个字符的存在的位置
        */
        function isInclude(str1,str2) {
            //
            if(str1.length<str2.length){
                return false;
            };
            //都转换为小写，基于indexOf检测
            str1=str1.toLowerCase();
            str2=str2.toLowerCase();
            return str1.indexOf(str2)===-1?false:true;

        }


        var rst1=isInclude('abcENglish ishdef', 'english'); //true
        var rst2=isInclude('Hello,my name is LiMing', 'hellO'); //true
        var rst3=isInclude('Hello,my name is LiMing', 'helol'); //false

        console.log(rst1,rst2,rst3);
    </script>
</body>
</html>

2.不能允许indexOf办法简单算法

 function isInclude(str1,str2) {
            var len1=str1.length;
            var len2=str2.length;
            if(len1<len2) return false;
            // 迭代第一个字符串中的每一个字符 length-n代表的就是倒数第n个
            for (var i = 0; i <= len1-len2; i++) {
               //每一轮循环 都从当前索引 向后截取第二个字符串对应的长度
               var char=str1.substr(i,len2);
               //用截取的字符串和第二个字符串进行对比，如果相等，说明第一个字符串包含了完整的第二个字符串
               if(char.toLowerCase()===str2.toLowerCase()){
                   return true;
               }
            }
            //如果循环了一圈也没发现有包含的，则直接返回false
            return false;
}
console.log(isInclude('zhufengpeixun','fen'));

day 09第二周作业