32string.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        // 
        /*
        var str = "hello";
        var str2 = '123';
        */
        function fnCharAt() {
            var str = "aBg0hdhadjk123";
            var ch = str.charAt(0); // 返回对应位置的字符
            var code = str.charCodeAt(3);// 返回对应位置的字符编码  a 97  A 65 0 48
            var ch2 = String.fromCharCode(99); // 返回编码对应的字符
            console.log(ch);
            console.log(code);
            console.log(ch2);
        }
        fnCharAt();


        function fnIndexOf() {
            var str = "heillwoer23kk";
            var index = str.lastIndexOf('2');
            console.log(index);
        }
        fnIndexOf();


        function fnSubstr() {
            var str = "welcome to china";
            var res = str.substr(3);// 从序号3开始 截取到最后
            var res2 = str.substr(3,7);// 从序号3开始 截取7个长度字符
            var res3 = str.substring(3);// // 从序号3开始 截取到最后
            var res4 = str.substring(3,7); // 从序号3开始 截取到序号为7的前一位为止
            var res5 = str.slice(3);// 从序号3开始 截取到最后
            var res6 = str.slice(3,7);// 从序号3开始 截取到序号为7的前一位为止
            console.log(res); // come to china
            console.log(res2);// come to
            console.log(res3); // come to china
            console.log(res4); // come
            console.log(res6);
            
        }
        fnSubstr();

        
        function fnSplit() {
            var str = "welcome to china";
            var arr = str.split(" ");
            str = arr.join(" ");
            console.log(arr,str);
            var filename = "1.4.2.txt";
            var res = filename.split(".")
            var extname = res[res.length-1];
            console.log(extname);
            // 1 "http://www.baidu.com?uname=zs&age=22" 如何获取uname和age  
            // 2 "abcdefg" => "gfedcba"  
        }
        fnSplit()

        function fnReplace() {
            var str = "nnd 大家好 nnd 我是";
            //str = str.replace('nnd',"***"); // 惰性
            console.log(str.split("nnd"));// ["", " 大。。。"," 我是"]
            str = str.split("nnd").join("*");
            console.log(str);
        }
        fnReplace();
        
    </script>
</body>
</html>

33string-demo.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    QQ: <input type="text" id="qq" value="123456"/>
    <button id="btn">验证</button>
    <script>
         // 1 "http://www.baidu.com?uname=zs&age=22" 如何获取uname和age  
        // 2 "abcdefg" => "gfedcba" 
        var url = "http://www.baidu.com?uname=zs&age=22";
        var data = url.split("?")[1];// "uname=zs&age=22"
         var arr = data.split("&"); // ["uname=zs","age=22"] 
         var [,uname] = arr[0].split("=");// ["uname","zs"]
         var [,age] = arr[1].split("=");
         console.log(uname,age);

         var str = "abcdefg";
         str = str.split("").reverse().join("");
         console.log(str);

         // 封装一个函数  对字符串统计 小写字母个数 大写字母个数 数字字符个数 其他字符个数
         function fnCount(str) {
            var small = 0, big = 0, num = 0, other = 0;
            // 字符串每个字符拿到
            for(var i=0; i<str.length; i++) {
                var ch = str.charAt(i);
                // 对ch判断
                if( ch>='a' && ch<='z') {
                    small++;
                } else if( ch>='A' && ch<='Z') {
                    big++;
                } else if( ch>='0' && ch<='9') {
                    num++;
                } else {
                    other++;
                }
            }
            console.log(small,big,num,other);
         }

         fnCount("hjaty56FFkjd.j./88");

         // 点击验证按钮 对用户输入的qq进行判断
         /*
            1 有没有输入 没有输入 弹窗 不能为空
            2 输入的是不是数字
            3 不能是0开头
            4 不能是小数
            5 qq号位数 5-10
         */
        var btn = document.getElementById("btn");
        var qq = document.getElementById("qq");
        console.dir(qq);
        btn.onclick = function() {
            // 1 拿到用户输入的值
            var val = qq.value.trim();
            if(val === "") {
                alert("不能为空");
            } else if (isNaN(val)) {
                alert("必须是数字");
            } else if(val.charAt(0) === "0") {
                alert("第一位不能为0");
            } else if (val.indexOf(".") != -1) {
                alert("不能是小数");
            } else if(val.length<5 || val.length>10) {
                alert("输入数字位数必须是5-10位");
            } else {
                alert("success");
            }
            
        }
    </script>
</body>
</html>

34string-es6.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        var uname = "along", age = 32;
        //var str = uname + ",今年"+ age + "岁";
        // 字符串拼接 用模版字符串方便 实现原理 正则
        var str = `${uname},今年${age}岁`; 
        console.log(str);
        

        function desc(strings,...values) {
            // ["", ",今年", "岁", raw: Array(3)] (2) ["along", 32]
            console.log(strings,values);
            var str = "";
            values.forEach((item,index)=>{
                if(index == 1) {
                    item = item + 1;
                }
                str += `${strings[index]}${item}`; 
            });
            str += `${strings[strings.length-1]}`;
            console.log(str);
        }
        // 带标签的模版字符串
        desc`${uname},今年${age}岁`;// 标签其实是一个函数

        // includes() startsWith() endsWith()
        var str2 = "wekdoio";
        console.log(str2.includes("e"));
        console.log(str2.startsWith("we"));
        console.log(str2.endsWith("we"));
    </script>
</body>
</html>

35Math.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        // Math.ceil() 向上取整
        console.log(Math.ceil(10.001)); // 11
        console.log(Math.ceil(10.9)); // 11
        console.log(Math.ceil(-10.9)); // -10
        // Math.floor() 向下取整
        console.log(Math.floor(10.001)); // 10
        console.log(Math.floor(10.9)); // 10
        console.log(Math.floor(-10.9)); // -11
        // Math.round()
        console.log(Math.round(0.9));
        console.log(Math.round(-3.6));
        console.log("@@@@@@@@@@@@@@@@@@@@");
        // Math.random() [0,1)
        for(var i=0; i<100; i++) {
            //console.log(Math.random()); [0,1)
            //console.log(Math.round(Math.random())); // [0,1]整数
            //console.log(Math.round(Math.random()*10)); // [0,10]整数
            console.log(Math.round(Math.random()*5+5));  // [5,10]整数               
        }    
        
        
        /*
          0<=Math.random()*(max-min)<max-min
          min<=Math.random()*(max-min)+min<max

         
          min<=Math.random()*(max-min+1)+min<max+1
        */
        function rand(min,max) {
            return Math.round(Math.random()*(max-min)+min);
        }

        function rand2(min,max) {
            return Math.floor(Math.random()*(max-min+1)+min);
        }

        for(var i=0; i<10; i++) {
            console.log(rand2(1,7));
        }
        

        //5<=Math.random()*5+5<10
    </script>
</body>
</html>

tool.js

function rand(min,max) {
    return Math.round(Math.random()*(max-min)+min);
}

function $(id) {
    return document.getElementById(id);
}

// 封装一个函数 对元素注册事件
function addEventListener(ele,eventName,fn) {
    // 能力检测
    if(ele.addEventListener) {
        ele.addEventListener(eventName,fn);
    } else if(ele.attachEvent) {
        ele.attachEvent("on"+eventName,fn);
    } else {
        ele["on"+eventName] = fn; 
    }
}

// 移除事件
function removeEventListener(ele,eventName,fn) {
    // 能力检测
    if(ele.removeEventListener) {
        ele.removeEventListener(eventName,fn);
    } else if(ele.detachEvent) {
        ele.detachEvent("on"+eventName,fn);
    } else {
        ele["on"+eventName] = null; 
    }
}

 

 

 

 

 

posted on 2019-07-07 10:20  HiJackykun  阅读(113)  评论(0编辑  收藏  举报