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;
- }
- }
来源: http://www.bubuko.com/infodetail-3116128.html