12.11 Web前端第十一次课笔记

menge2333

已于 2023-12-20 15:59:06 修改

阅读量37

点赞数

文章标签：笔记

于 2023-12-13 18:28:03 首次发布

本文链接：https://blog.csdn.net/menge2333/article/details/134972793

版权

作业（动态时间）

function datetime(){
    let date=new Date();
    let date2=date.getFullYear()+'年'+(date.getMonth()+1)+'月'+date.getDate()+'日'
    let hours=date.getHours()>9?date.getHours():'0'+date.hours()
    let min=date.getMinutes()>9?date.getMinutes():'0'+date.getMinutes()
    let sec=date.getSeconds()>9?date.getSeconds():'0'+date.getSeconds()
    let week=['星期日','星期一','星期二','星期三','星期四','星期五','星期六']
    let times=hours+':'+min+':'+sec+' '+week[date.getDay()]
    let first=document.querySelector('.first')
    let second=document.querySelector('.second')
    first.innerHTML=date2
    second.innerHTML=times
}
datetime();
setInterval(datetime,1000);

<title>Document</title>
    <style>
        .waikuang{
            width: 800px;
            height: 500px;
            background-color: pink;
        }
        .first{
            position: relative;
            width: 400px;
            height: 200px;
            line-height: 50px;
            text-align: center;
            top: 100px;
            left: 200px;
            font-size: 50px;
            color: aliceblue;
        }
        .second{
            position: absolute;
            width: 400px;
            height: 200px;
            line-height: 50px;
            text-align: center;
            top: 200px;
            left: 200px;
            font-size: 50px;
            color: aliceblue;

        }
    </style>
</head>

<body>
    <div class="waikuang">
        <div class="first"></div>
        <div class="second"></div>
    </div>
    <script src="./动态时间.js"></script>
</body>
</html>

函数补充

闭包（可以在函数的外部访问函数的内部的局部变量，把这些变量始终保存在内存当中）

//闭包
//{}
function outer(){
    let money = 5000
    function inner(){
        console.log(money)
    }
    return inner
}
// money一直在内存中不能改变

立即执行函数

(function(){
    console.log("1111")

}());

(function(){document.write("222")})();

对象（重要）

object是JavaScript语言的核心概念，也是最重要的数据类型

对象是一组“键值对”的集合，是一种无序的复合数据集合

用{}声明一个对象（对象的所有键名必须是字符串“”加不加都可以后台会自动变成字符串）

以数字开头的键名需要加‘’ 单独数字可以不加

let obj={
    uname:"zhangsan",
    'age':21,
    1:"a",
    '3.14':true,
    '1p':"sds"
}

查看属性

1.对象名.属性

console.log(obj.uname)

2.对象名["属性名"]

console.log(obj['uname'])

3.拿到所有键名

console.log(object.keys(obj))

删除对象的属性：delete对象名.属性名

delete obj.height

in运算符（判断属性是否在对象里面）

console.log("uname" in obj)

循环遍历

for(let i in obj){
    console.log(typeof(i))
    console.log(obj[i])
}

更新值

obj.uname="list"
console.log(obj)

方法

对象里面的函数叫方法

let obj2={
    a:2,
    b:3,
    fn:function(){
        console.log("2222")
    }

}
obj2.fn()

定时器

setTimeout(): 某个函数或某段代码在多少毫秒之后进行执行

格式：setTimeout(函数/代码，推迟执行的毫秒数)

setTimeout(()=>{
    document.write("555")
},3000)  // 匿名函数

function fn(){
    console.log("222")
}
setTimeout(fn,3000)  // 传函数 必须是函数名不可以加（）
setTimeout('document.write("888")',3000)

传函数时必须是函数名不可以加（）

传一段代码必须加‘’（写成字符串的形式）

setTimeout返回一个整数，用来标识定时器的编号

let timer =setTimeout(()=>{
    document.write("555")
},3000)
console.log(timer)

后面可以作为参数传入函数

setTimeout(function(a,b){
    console.log(a+b)
},3000,1,2)

当方法放入定时器时指向会变（指向windows最顶层）

解决方法

setTimeout(function(){
    Obj.fn()
},2000)

2.bind

setTimeout(obj.fn.bind(obj),1000)

setInterval(每隔一段时间执行一次代码，无限次的定时执行)

setInterval(()=>{
    console.log("55")
},1000)

每隔一秒执行一次代码

清除定时器

先获取定时器编号

let timer = setInterval(()=>{
    console.log("666")
    console.log("777")
},1000)
console.log(timer)

清除定时器

clearInterval(timer)

DOM编程

获取元素对象

1.根据CSS选择器获取（常用）

document.querySelector(".类名")

<body>
    <div class="box1">一个盒子</div>

    <script>
        document.querySelector(".box1")
    </script>
</body>

lis是伪数组，通过循环遍历获取dom对象

document.querySelectorAll("ul li")

let lis = document.querySelectorAll("ul li")
console.log(lis)
for (let i =0;i<lis.length;i++){
    lis[i].style.color="pink"
}

2.通过ID

document.getElementById('li3')
let li3 = document.getElementById('li3')
li3.style.backgroundColor="pink"

/*/li3.style.backgroundColor="pink" */ 这里将background-color 写成 backgroundColor

3.通过类名

4.通过标签

innerText,innerHTML(常用)

innerHTML 可以识别标签所以常用innerHTML

let box=document.querySelector(".box")
box.innerText="666"
box.innerHTML="777"

box.innerHTML=`<h1>777<h1>`

menge2333

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
12.11 Web前端第十一次课笔记

用{}声明一个对象（对象的所有键名必须是字符串“”加不加都可以后台会自动变成字符串）（可以在函数的外部访问函数的内部的局部变量，把这些变量始终保存在内存当中）object是JavaScript语言的核心概念，也是最重要的数据类型。格式：setTimeout(函数/代码，推迟执行的毫秒数)当方法放入定时器时指向会变（指向windows最顶层）以数字开头的键名需要加‘’ 单独数字可以不加。传一段代码必须加‘’（写成字符串的形式）对象是一组“键值对”的集合，是一种。传函数时必须是函数名不可以加（）
复制链接

扫一扫