JavaScript 学习笔记

1. 获取随机数

	// 左闭右开 能取到 0 但是取不到 1 中间的一个随机小数 [0 ,1)
    console.log(Math.random())

    // 0~ 10 之间的整数
    console.log(Math.floor(Math.random() * 11))
    //
    let arr = ['red', 'green', 'blue']
    let random = Math.floor(Math.random() * arr.length)
    // console.log(random)
    // console.log(arr[random])
    // 取到 N ~ M 的随机整数
    function getRandom(N, M) {
      return Math.floor(Math.random() * (M - N + 1)) + N
    }

2. 自定义一个随机颜色函数

	function getRandomColor(flag = true) {
      if (flag) {
        // 3. 如果是true 则返回 #ffffff
        let str = '#'
        let arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']
        // 利用for循环随机抽6次 累加到 str里面
        for (let i = 1; i <= 6; i++) {
          // 每次要随机从数组里面抽取一个  
          // random 是数组的索引号 是随机的
          let random = Math.floor(Math.random() * arr.length)
          // str = str + arr[random]
          str += arr[random]
        }
        return str

      } else {
        // 4. 否则是 false 则返回 rgb(255,255,255)
        let r = Math.floor(Math.random() * 256)  // 55
        let g = Math.floor(Math.random() * 256)  // 89
        let b = Math.floor(Math.random() * 256)  // 255
        return `rgb(${r},${g},${b})`
      }

    }
    // 2. 调用函数 getRandomColor(布尔值)
    console.log(getRandomColor(false))
    console.log(getRandomColor(true))
    console.log(getRandomColor())

3. 封装一个倒计时时间戳

	// 函数封装 getCountTime
    function getCountTime() {
      // 1. 得到当前的时间戳
      const now = +new Date()
      // 2. 得到将来的时间戳
      const last = +new Date('2023-4-1 18:30:00')
      // console.log(now, last)
      // 3. 得到剩余的时间戳 count  记得转换为 秒数
      const count = (last - now) / 1000
      // console.log(count)
      // 4. 转换为时分秒
      // h = parseInt(总秒数 / 60 / 60 % 24)   //   计算小时
      // m = parseInt(总秒数 / 60 % 60);     //   计算分数
      // s = parseInt(总秒数 % 60);   
      // let d = parseInt(count / 60 / 60 / 24)               //   计算当前秒数
      let h = parseInt(count / 60 / 60 % 24)
      h = h < 10 ? '0' + h : h
      let m = parseInt(count / 60 % 60)
      m = m < 10 ? '0' + m : m
      let s = parseInt(count % 60)
      s = s < 10 ? '0' + s : s
      console.log(h, m, s)

      //  5. 把时分秒写到对应的盒子里面
      document.querySelector('#hour').innerHTML = h
      document.querySelector('#minutes').innerHTML = m
      document.querySelector('#scond').innerHTML = s
    }
    // 先调用一次
    getCountTime()

    // 开启定时器
    setInterval(getCountTime, 1000)

4、自动跳转到移动端

	// 检测 userAgent（浏览器信息）
    !(function () {
      const userAgent = navigator.userAgent
      // 验证是否为Android或iPhone
      const android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/)
      const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/)
      // 如果是Android或iPhone，则跳转至移动站点
      if (android || iphone) {
        location.href = 'http://xx.cn'
      }
    })();

5、正则整理

身份证姓名

该正则支持中文以及英文姓名：
中文：大卫·波菲尔、王林 、上官飞燕等纯中文以及圆点组合（名字的长度可以自用限制）
英文：Mr.li 等一系列

var reg= /^(([a-zA-Z+\.?\·?a-zA-Z+]{2,30}$)|([\u4e00-\u9fa5+\·?\u4e00-\u9fa5+]{2,30}$))/;

姓名验证

• 1、不能有特殊字符和数字；
  2、可以输入英文，可以有空格，可以输入英文名字中的点；
  3、可以输入汉字；
  4、中文英文不能同时出现；
  5、长度在1-20；

var regName = ^([\u4e00-\u9fa5]{1,20}|[a-zA-Z\.\s]{1,20})$

身份证号

该正则支持15 和18的所有的身份证号

	//验证身份证号的正则：
 	var reg=/^(^[1-9]\d{5}[1-9]\d{3}(((0[2])([0|1|2][0-8])|(([0-1][1|4|6|9])([0|1|2][0-9]|[3][0]))|(((0[1|3|5|7|8])|(1[0|2]))(([0|1|2]\d)|3[0-1]))))((\d{4})|\d{3}[Xx])$)$/;

• 验证真实姓名的方法如下：

var checkTrueName = function () {
	var str = $(this).val();
    var reg = /^(([a-zA-Z+\.?\·?a-zA-Z+]{2,30}$)|([\u4e00-\u9fa5+\·?\u4e00-\u9fa5+]{2,30}$))/;
     //判断用户输入的真实姓名是否为空
     if(str.length === 0){
         $(".has-ERROR").text("真实姓名不能为空");
         return false;
     }
     //检测姓名的格式是否匹配
      else if(!reg.test(str)){
         $(".has-error").text("姓名输入有误，请重新输入");
         return false;
     }
     else {
         return true;
     }
}

手机号码：

^(13[0-9]|14[5|6|7|8|9]|15[0|1|2|3|5|6|7|8|9]|16[5|6]|17[1-8|18[0-9]|19[1|9])\d{8}$

电话号码：

^((d{3,4})|d{3,4}-)?d{7,8}$

电子邮箱：

var emailReg = /^\w+@[a-z0-9]+\.[a-z]{2,4}$/
var emailReg = /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/

网址URL：

var urlReg = ^(http|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?$

（参考网站）

• 正则中的特殊字符的含义可参考MDN官网：
  https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions
• 推荐一个好用的在线正则工具：
  https://tool.lu/regex/（可生成各种语言的正则检测）
• 推荐一个亲测好用的 vscode 正则插件 “any-rule”，使用方法请参考原作者：https://juejin.im/post/5d245d4151882555300feb77

6. 商品渲染（包含标签切换）

/*高亮切换*/
.filter a:active,
.filter a:focus {
   background: #05943c;
   color: #fff;
 }

<div class="filter">
    <a data-index="1" href="javascript:;">0-100元</a>
    <a data-index="2" href="javascript:;">100-300元</a>
    <a data-index="3" href="javascript:;">300元以上</a>
    <a href="javascript:;">全部区间</a>
</div>
<div class="list">
  <!-- <div class="item">
     <img src="" alt="">
     <p class="name"></p>
     <p class="price"></p>
   </div> -->
 </div>

	// 2. 初始化数据
    const goodsList = [
      {
        id: '4001172',
        name: '称心如意手摇咖啡磨豆机咖啡豆研磨机',
        price: '289.00',
        picture: 'https://yanxuan-item.nosdn.127.net/84a59ff9c58a77032564e61f716846d6.jpg',
      },
      …
 	]
 	// 1. 渲染函数  封装
    function render(arr) {
      // 声明空字符串
      let str = ''
      // 遍历数组 
      arr.forEach(item => {
      	// 解构
        const { name, price, picture } = item
        str += `
        <div class="item">
          <img src=${picture} alt="">
          <p class="name">${name}</p>
          <p class="price">${price}</p>
        </div>
        `
      });
      document.querySelector('.list').innerHTML = str
    }
    render(goodsList)  // 页面一打开就需要渲染

    // 2. 过滤筛选
    document.querySelector('.filter').addEventListener('click', e => {
      const { tagName, dataset } = e.target
      if (tagName === 'A') {
        let arr = goodsList
        if (dataset.index === '1') {
          arr = goodsList.filter(item => item.price > 0 && item.price <= 100)
        } else if (dataset.index === '2') {
          arr = goodsList.filter(item => item.price > 100 && item.price < 300)
        } else if (dataset.index === '3') {
          arr = goodsList.filter(item => item.price >= 300)
        }
        render(arr)
      }
    })