JavaScript（1）

一.范围随机数

1. Math.random()随机函数，返回一个0-1之间，包括零但不包括一的小数

2.猜数字升级版（只能猜三次）

function getRandom(M,N) {
            return Math.floor(Math.random() * (N - M + 1)) + N
        }
        let flag = true
        let random = getRandom(1,10)
        // console.log(random)
        for(let i = 1 ; i<=3; i++) {
            let num = +prompt('请输入1~10之间的数字：')
            if(num > random) {
                alert('您猜大了，继续')
            }
            else if (num < random) {
                alert('您猜小了，继续')
            }
            else {
                flag = false
                alert('您猜对了')
                break
            }
        }
        if(flag = true) {
            alert('次数已用完')
        }

3.随机颜色函数

function getRandomColor(flag = true) {
            if (flag) {
                let str = '#'
                let arr = ['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f']
                for(let i = 1; i <= 6; i++) {
                    let random = Math.floor(Math.random() * arr.length)
                    str += arr[random]
                }
                return str
            }
            else {
                let r = Math.floor(Math.random() * 256)
                let g = Math.floor(Math.random() * 256)
                let b = Math.floor(Math.random() * 256)
                return `rgb(${r} ,${g}, ${b})`
            }
        }
        console.log(getRandomColor(false));
        console.log(getRandomColor(true));

（三）渲染学成在线案例

1.简单（值）和引用（复杂）数据类型
关键字，保留字，标识符，表达式，语句

2.基本数据类型：在储存变量中，储存的是值本身（string、number、boolean、undefined、null)
3.引用数据类型：在储存变量中，储存的仅仅是地址,eg:Object、Array、Date

二.API

（一）建议数组和对象用const来声明

1.作用：用JS操作html和浏览器
分类：DOM（文档对象模型）、BOM（浏览器对象模型）
DOM：是操作网页内容的，开发网页内容特效和实现用户交互
DOM树：将HTML文档以树状结构直接的表达出来，体现标签与标签之间的关系
DOM对象（重要）：浏览器根据标签生成的JS对象，所有的标签属性都能在这里找到，修改对象的属性会自动映射到标签身上
DOM对象的核心思想：把网页当作对象
DOM对象最重要的是：document对象，网页所有内容都在document里面

2.选择匹配的第一个元素
语法：
document.querySelector('css选择器')
参数：
包含一个或多个有效的CSS选择器 字符串
返回值：
CSS选择器匹配的第一个元素，一个 HTMLElement对象。
如果没有匹配到，则返回null。
3. 选择匹配的多个元素
语法：
document.querySelectorAll('css选择器')
参数：
包含一个或多个有效的CSS选择器 字符串
返回值：
CSS选择器匹配的NodeList 对象集合
document.querySelectorAll('ul li')

（二）操作元素

1.操作元素内容
innerTEXT:识别标签内部文字，可通过a.innerTEXT = ‘我是一个盒子’ 修改标签内部文字
innerHTML：识别标签内部文字和标签，可通过a.innerHTML = ‘（反引号）我是刘德华` 添加/修改标签内部文字内容

2.操作元素属性
常用属性：href,title,src
语法：对象.属性=值

3.操作元素样式属性
语法：对象.style.样式属性 = ‘值’
eg: box.style.width = ‘300px’
当css中出现短横线的形式，比如bacground-color,就改为小驼峰命名法：bacgroundColor
通过类名修改样式:新值换旧值，如果要添加一个类，要保留之前的类名
语法：元素.className = ‘active’
通过classList修改样式：可追加，删除类名（类名不加点，且是字符串）
语法：追加：box.classList.add(‘active’)
删除：box.classList.remove(‘box’)
切换类：有就删，没有就加 box.classList.toggle (‘active’)

（三）轮播图随机版

1.操作表单元素属性:DOM对象.属性名 = 新值
表单.value = ‘用户名’
表单.type = ‘password’
innerHTML得不到表单的内容
表单元素属性-布尔值

2.自定义属性：一律以data-开头，在DOM对象上以dataset对象方式获取

3.自定义属性

三.定时器-间歇函数

1.每隔一段时间，自动执行一行代码
2.开启：setInterval（函数，间隔时间），间隔时间单位是毫秒 ，函数如果调用的是有名函数，直接写函数名，不要加小括号
3.定时器返回的是一个id数字
4.关闭定时器：clearInterval(变量名)
5.

<script>
        setInterval(function(){
            console.log('一秒执行一次');
        }, 1000)
    </script>