作业(动态时间)
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最顶层)
解决方法
1.
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>`