前段学习小白打卡10进入WebAPI

最新推荐文章于 2024-09-16 20:51:41 发布

白潏

最新推荐文章于 2024-09-16 20:51:41 发布

阅读量38

点赞数

分类专栏：前端文章标签：学习前端 html5 vscode css java js

本文链接：https://blog.csdn.net/qq_65719034/article/details/131873115

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

随机数
random是【0-1）
Math.random()*(10+1)----[0-11) 取0-10
Math.floor(Math.random()*(10+1))取整数
Math.random()*(5+1)+5----[5-11) 取5-10

N-M
Math.floor(Math.random()*(M-N+1))+N
arr.splice(起始位置，几个元素)

值类型和引用数据类型
值类型：
简单数据类型/基本数据类型，存储时变量中存储的是本身，string，number，Boolean，undefined，null
引用数据类型：
复杂数据类型，在储存变量中储存的仅仅是地址（引用），
通过new关键字创建的对象（系统对象，自定义对象），如object，Array，Date等

js，随机颜色

function getRandomcolor(flag=true){
    if(flag)
    {
        let s='#'
        let  arr=['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f']
        for (let i = 0; i <6; i++) {
            let random =Math.floor(Math.random()*arr.length)
            s += arr[random]
        }
        return s
    }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})`
    }
}

const div=document.querySelector('div')
div.style.backgroundColor=getRandomcolor();

WebAPI

let const 变量声明
多const，尽量不变
如果后续要改就用let
const声明的数组和对象，可以增添数据，因为数据地址没变，但是不能改变指向/对象

API就是使用js操作html和浏览器
分类：DOM（文档对象模型）和BOM（浏览器对象模型）（alter）

DOM是操作网页内页内容的功能

DOM树：
将HTML文档以树状结构直观的表达出来，我们称之为文档树或DOM树
描述网页内容关系的名词
作用：
文档树直观的体现了标签与标签之间的关系

DOM对象：
浏览器根据html标签生成的js对象
所有的标签属性都可以在这个对象上面找到
修改这个对象的属性会自动映射到标签身上

dom核心：把网页内容当成对象处理
document对象：
是DOM对象里提供的一个对象
所以它提供的属性和方法都是用来访问和操作网页内容的
document.write()
网页所有内容都在document里面

获取DOM元素
根据css选择器来获取DOM元素
选择匹配的第一个元素
语法：
document.querySelector('css选择器')
css选择器可以是 div 或 .类名或 #id （语法一样）
<ul>
<li>13</li>
<li>2</li>
<li>32</li>
</ul>

可以选择某一个
const li=document.querySelector('ul li:first-child')
若没有匹配到，则返回null
返回对象，可以修改

可以选择多个，返回一个对象数组（伪数组：有长度有索引号，但没有pop push，想到得到里面的每一个对象，则需要遍历（for）的方式获得）
const lis=document.querySelectorAll('ul li')

其他获取DOM元素方法
//element->元素
//根据id获取一个元素
document.getElementById('nav')
//根据标签获取一类元素获取页面所有div
document.getElementsByTagName('div')
//根据类名获取元素获取页面所有类名为w的
document.getElementsByClassName('w')

修改对象内容
const bos=document.querySelector('.bos')
// 修改文字内容对象.innerText 属性
console.log(bos.innerText)
bos.innerText='我是修改的'

innerText属性：
将文本内容添加/更新到任意标签为止，显示纯文本，不解析标签

innerHTML属性：
将文本内容添加/更新到任意标签位置，会解析标签，多标签建议使用模版字符

操作元素常用属性
比如href title src

操作元素样式属性
可以通过设置、修改标签元素的样式属性
如轮播图
通过style属性操作css
对象.style.样式属性
如果样式属性中有-这个，就用小驼峰命名法
background-color: #ff2d2d;-------------->
bos.style.backgroundColor='pink'

通过类名操作css
如果修改的样式比较多，直接通过style修改比较繁琐
语法：元素.className='类名'
className是使用新值换旧值，如果要添加一个类，需要保留之前的类名 div.className='nav box' 2个类样式属性都有

通过classlist操作类控制css
为了解决className容易覆盖以前的类名，可以通过classlist方式追加和删除类名
追加
元素.className.add('类名')//不加点.
删除
元素.className.remove('类名')
切换(有类就删掉，没有就加上)
元素.className.toggle('类名')

随机抽奖

// const div=document.querySelector('div')
// div.style.backgroundColor=getRandomcolor();
// const li=document.querySelector('ul li:first-child')
// const lis=document.querySelectorAll('ul li')
// const lias=document.querySelectorAll('.op li')
// for (let i = 0; i < lias.length; i++) {
//     const element = array[i];
    
// }
//element->元素
//根据id获取一个元素
// document.getElementById('nav')
// //根据 标签获取一类元素 获取页面 所有div
// document.getElementsByTagName('div')
// //根据类名获取元素 获取页面所有类名为w的
// document.getElementsByClassName('w')

const bos=document.querySelector('.bos')
// // 修改文字内容 对象.innerText 属性
// console.log(bos.innerText)
// bos.innerText='我是修改的'

// bos.innerHTML='<b>我是更新</b>'

const person=['你','我','他','他们','我们']

let random=Math.floor(Math.random()*person.length)
const one=document.querySelector('#one')
one.innerHTML=person[random]
person.splice(random,1)

let random2=Math.floor(Math.random()*person.length)
const two=document.querySelector('#two')
two.innerHTML=person[random2]
person.splice(random2,1)

let random3=Math.floor(Math.random()*person.length)
const three=document.querySelector('#three')
three.innerHTML=person[random3]
person.splice(random3,1)

bos.style.backgroundColor='pink'
bos.style.border='2px solid blue'

CSS

div{
  width: 300px;
  height: 300px;
  background-color: #ff2d2d;
}

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/my.css">
    <title>Document</title>
</head>
<body>
    <div class="bos">
        <b>抽奖</b>
        <h1>一等：<span id="one">???</span></h1>
        <h2>二等：<span id="two">???</span></h2>
        <h3>三等：<span id="three">???</span></h3>
    </div>

    <script src="./js/my.js">
    </script>
</body>
</html>