JS练习一

JS练习一

1. 存一个有效期为7天的cookie，key = nickname, val = Ace

function setCookie(key, val, expires) {  //封装cookie（设置cookie）
            let now = new Date()
             now.setDate(now.getDate() + expires)  //设置生命周期
             document.cookie = `${key}=${val};expires=${now.toUTCString()}`
        }
setCookie(nickname,Ace,0)
//拓展：cookie的删除
function removeCookie(key) { //删除cookie，原理是将生命时间置前
          setCookie(key, null, -1)
}

       setCookie('count', 22, 7)
       setCookie('age1', 33, 2)
       removeCookie('age1')
       console.log(document.cookie);
       
//cookie内容的获取
 function getCookie(key) {
         let obj = {}
         let cookies = document.cookie.split('; ')  //用； 将字符串拆分开
        cookies.forEach(r => {//对得到的数组元素再次拆分
             let kv = r.split('=')
             let key = kv[0]
             let val = kv[1]
             obj[key] = val  //将得到的数据写入对象，可以更加方便的访问
          })
       if (key) return obj[key]
       return obj
     }
   console.log(getCookie('age'));
   console.log(getCookie('username'));

2. 获取地址栏 age=20&pirce=30&keywords=lv&cc=1 中的keywords参数的值
   这一题与上面cookie的获取值十分相似，就是将字符串两次拆分后再获取里面的值

let obj = {}
let str = 'age=20&pirce=30&keywords=lv&cc=1'
let keys = str.split('&')
keys.forEach(r => {
        let kv = r.split('=')
        let key = kv[0]
        let val = kv[1]
        obj[key] = val
 })

3. 语法糖

if (!a) a = 20
a = !a ? 20 : a  //这句话是上面的缩写，利用三目运算
      
let a = 10
a = a || 20  //利用或的特性，前面满足条件符号后面的不进行，这句话的意思是：如果a为空a=20。
if (!a) {
    a = 20
}

 a > 0 && console.log(a)//这句话利用了与的特性，所有条件都要满足才为真，这句话的意思是：如果a>0就将a打印出来

4.获取30~40之间的一个随机数
利用的是Math对象的random（）方法获取到的是0-1之间的数再进行范围的限定

    function rnd(max, min = 0) { //
    return Math.round(Math.random() * (max - min)+ min) 
    }
  console.log(rnd(40, 30));

5.如何获取当前是星期几

 function getWeek() {
       let now = new Date() //getDay()获取的是0-6对应了周日到周六
     return '星期' + '日一二三四五六'[now.getDay()]
    }
 console.log(getWeek());

6.手写一个补0的方法，如 repairZero(8) 变成 “08”

function repairZero(num) {
  num = num.toString()
  return num[1] ? num : ('0' + num)//判断输入的数字是否是两位数及以上，如果是就直接输出，否则加0输出
}

7.写5个DOM选择器
document.getElementById //通过ID名获取元素
document.getElementsByClassName //通过类名获取元素
document.getElementsByTagName //通过标签名获取元素
document.querySelector //可以用css选择器进行选择单一的元素
document.querySelectorAll //可以用css选择器进行选择多个符合同一个条件的元素

8.innerHTML和outerHTML区别

let demo = document.getElementById('demo')
console.log(demo.innerHTML);   //只是div里面的的内容
console.log(demo.outerHTML); //包含自身的标签和标签中的内容

9.点击产生飞花效果

 .piao {
            width: 50px;
            height: 50px;
            background: url('https://dss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2244238741,1217077712&fm=5');
            background-size: 100% 100%;
            position: absolute;
        }

 window.onclick = e => {
            let div = document.createElement('div'); //创建一个div
            div.className = 'piao';  //给这个div加类名
            let x = e.pageX   //获取鼠标点击时的X轴坐标
            let y = e.pageY   //获取鼠标点击时的Y轴坐标
            document.body.appendChild(div)  //将生成的div加入页面中
            let rnd = Math.round(Math.random());  //生成0或者1的随机数
            let timer = setInterval(() => {
                if (rnd) {  //如果这个数为1，则x+2，否则x-2
                    x += 2
                } else {
                    x -= 2
                }
                y -= 5
                div.style.top = y + 'px'  //div定位距离页面上边框的距离，初始值正是鼠标点击时候的位置
                div.style.left = x + 'px'  div定位距离页面左边框的距离
                if(y<-100){    //当生成的div飘出可见区域，就将生成的div删除，并停止定时器
                    div.remove();//删除出现的div
                    clearInterval(timer)
                }
            }, 20)
        }