发表于： 2023-02-27 21:30:05
0 271
今天的角色知识点：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 400px;
height: 40px;
border: 1px solid red;
line-height: 40px;
text-align: center;
}
</style>
</head>
<body>
<div></div>
<script>
//实例化new
//当前时间
// const date = new Date()
// console.log(date)
// //指定时间
// const date1 = new Date('2008-10-1 08:30:00')
// console.log(date1)
// a = date - date1
// console.log(a)
//获得日期对象
// const date = new Date()
//得到里面的方法
// console.log(date.getFullYear()) //获得年份
// console.log(date.getMonth() + 1) //获得月份 取值为 0-11 方法后面需要 +1
// console.log(date.getDate()) // 日份
// console.log(date.getDay()) // 返回星期几 取值0-6 星期天是 0
// console.log(date.getHours()) // 时
// console.log(date.getMinutes()) // 分
// console.log(date.getSeconds()) // 秒
//小案例 页面中显示 2008-08-08 08:08
// const div = document.querySelector('div')
// function getMyDate() {
// const date = new Date()
// let h = date.getHours()
// let s = date.getMinutes()
// let m = date.getSeconds()
// h = h < 10 ? '0' + h : h
// s = s < 10 ? '0' + s : s
// m = m < 10 ? '0' + m : m
// return `今天是：${date.getFullYear()}年${date.getMonth() + 1}月
// ${date.getDate()}日 ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`
// }
//
// div.innerHTML = getMyDate() //防止刷新为空
// // 自动执行
// setInterval(function () {
// div.innerHTML = getMyDate()
// }, 1000)
//第二种快速的方法
// const div = document.querySelector('div')
// const date = new Date()
// div.innerHTML = date.toLocaleString() //2023/2/27 12:01:46
// setInterval(function () {
// const date = new Date()
// div.innerHTML = date.toLocaleString()
// }, 1000)
// div.innerHTML = date.toLocaleDateString() //2023/2/27
// div.innerHTML = date.toLocaleTimeString() //12:02:57
//时间戳
//获得时间戳 三种方法
// 1、 getTime()
const date = new Date()
console.log(date.getTime())
// 2、+new Date()
console.log(+new Date())
//3、Date.now()
console.log(Date.now())
console.log(+new Date())
console.log('---------------------------------------')
console.log(+new Date(`2023-2-27 12:30:00`))
//根据 日期 Day() 0-6 返回的是星期一
const arr = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
console.log(arr[new Date().getDay()])
console.log(new Date())
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.dad {
width: 200px;
height: 200px;
background-color: pink;
margin: 20px;
}
.baby {
width: 20px;
height: 20px;
background-color: red;
line-height: 20px;
float: right;
text-align: center;
cursor: pointer;
}
</style>
</head>
<body>
<!-- <div class="yeye">-->
<!-- <div class="dad">-->
<!-- <div class="baby">×</div>-->
<!-- </div>-->
<!-- <div class="dad">-->
<!-- <div class="baby">×</div>-->
<!-- </div>-->
<!-- <div class="dad">-->
<!-- <div class="baby">×</div>-->
<!-- </div>-->
<!-- </div>-->
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
// 父节点查找 parentNode属性 返回最近一级的父节点 找不到返回为null
// const baby = document.querySelector('.baby')
// console.log(baby.parentNode) //返回父级 dad
// console.log(baby.parentNode.parentNode) //返回dom 对象
// baby.addEventListener('click', function () {
// this.parentNode.style.display = 'none'
// })
// 关闭三个按钮
// const baby = document.querySelectorAll('.baby')
// for (let i = 0; i < baby.length; i++) {
// baby[i].addEventListener('click', function () {
// this.parentNode.style.display = 'none'
// })
// }
// children属性 仅获得所以元素节点 返回的还是一个伪数组 父元素.children
// const ul = document.querySelector('ul')
// console.log(ul.children)
const li2 = document.querySelector('ul li:nth-child(2)')
console.log(li2.previousElementSibling) //上一个兄弟
console.log(li2.nextElementSibling) //下一个兄弟</script>
<ul>
<li>我是老大</li>
</ul>
<script>
//创建节点
//创建出一个新的网页元素， 再添加到网页内，一般先创建节点，然后插入节点
//创建元素节点方法: document.createElement('标签名')
// const div = document.createElement('div')
// console.log(div)
//追加节点 插入到父元素的最后一个子元素: 父元素.appendChild(要插入的元素) 作为最后一个子元素
// document.body.appendChild(div)
const ul = document.querySelector('ul')
const li = document.createElement('li')
li.innerHTML = '我是li'
ul.appendChild(li)
// 插入到父元素中某个子元素的前面 父元素.insertBefore(要插入的元素, 在哪个元素前面插入)
ul.insertBefore(li, ul.children[0])
</script>
</body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
const ul = document.querySelector('ul')
//1、克隆节点 元素.cloneNode(true)
// const li1 = ul.children[0].cloneNode(true)
// console.log(li1)
//2、追加
ul.appendChild(ul.children[0].cloneNode(true))
</script>
<ul>
<li>没用了</li>
</ul>
<script>
//删除节点 父元素.removeChild(要删除的元素)
// 如果不存在父子关系 则删除 不成功
const ul = document.querySelector('ul')
ul.removeChild(ul.children[0])
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
<script>
const div = document.querySelector('div')
//1、 触摸
div.addEventListener('touchstart', function () {
console.log('开始摸了')
})
//2、离开
div.addEventListener('touchend', function () {
console.log('离开了')
})
//3、移动
div.addEventListener('touchmove', function () {
console.log('一直摸，移动')
})
</script>
</body>
</html>
完成补充的案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.countdown {
width: 240px;
height: 305px;
line-height: 1;
color: #fff;
background-color: red;
text-align: center;
overflow: hidden;
}
.countdown .next {
font-size: 16px;
margin: 25px 0 14px;
}
.countdown .title {
font-size: 33px;
}
.countdown .tips {
margin-top: 80px;
font-size: 23px;
}
.countdown small {
font-size: 17px;
}
.countdown .clock {
width: 142px;
margin: 18px auto 0;
overflow: hidden;
}
.countdown .clock span,
.countdown .clock i {
display: block;
text-align: center;
line-height: 34px;
font-size: 23px;
float: left;
}
.countdown .clock span {
width: 34px;
height: 34px;
border-radius: 2px;
background-color: #303430;
}
.countdown .clock i {
width: 20px;
font-style: normal; /* 字体样式 */
}
</style>
</head>
<body>
<div class="countdown">
<p class="next">今天是2222年2月2日</p>
<p class="title">下班倒计时</p>
<p class="clock">
<span id="hour">00</span>
<i>:</i>
<span id="minutes">25</span>
<i>:</i>
<span id="seconds">20</span>
</p>
<p class="tips">18:30:00下课</p>
</div>
<script>
//用户输入秒数，可以自动转换为时分秒 转换公式
// 天数 : d = parseInt(总秒数 / 60 / 60 / 24)
// 小时 : h = parseInt(总秒数 / 60 / 60 % 24)
// 分钟 : m = parseInt(总秒数 / 60 % 60)
// 秒数 : s = parseInt(总秒数 % 60)
//自定义一个随机颜色
function getRandomColor(flag = true) {
if(flag) {
// 如果是true则返回 #ffffff
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 {
// 否则是返回 false 返回rgb(255,255,255)
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 countdown = document.querySelector('.countdown')
countdown.style.backgroundColor = getRandomColor()
//函数封装 getCountTime()
function getCountTime() {
// 1、得到当前的时间戳
const now = +new Date()
//2、得到将来的时间戳
const last = +new Date('2023-3-1 18:30:00')
//3、得到剩余的时间戳 记得转换为秒数
const count = (last - now) / 1000
// console.log(count)
// 4、转换为时分秒
// 天数
// let d = parseInt(count / 60 / 60 / 24)
// 小时
let h = parseInt(count / 60 / 60 % 24)
h = h < 10 ? '0' + h : h
// 分钟
let m = parseInt(count / 60 % 60)
m = m < 10 ? '0' + m : m
// 秒数
let s = parseInt(count % 60)
s = s < 10 ? '0' + s : s
console.log(h, m, s)
//5、把时分秒写到对应的盒子里
document.querySelector('#hour').innerHTML = h
document.querySelector('#minutes').innerHTML = m
document.querySelector('#seconds').innerHTML = s
}
//先调用一次
getCountTime()
//开启定时器
setInterval(getCountTime, 1000)
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../css/渲染学成.css">
</head>
<body>
<div class="box w">
<div class="box-bd w">
<ul class="clearfix">
<!-- <li>-->
<!-- <a href="#">-->
<!-- <img src="../../js2-DOM/图片/猫.jpg" alt="${students[i].title}">-->
<!-- <h4>-->
<!-- Think PHP 5.0 博客系统实战项目演练-->
<!-- </h4>-->
<!-- <div class="info">-->
<!-- <span>高级</span> • <span>在线人数:123</span>-->
<!-- </div>-->
<!-- </a>-->
<!-- </li>-->
</ul>
<script>
let students = [
{
src: `../../js2-DOM/图片/猫.jpg`,
title: `Think PHP 5.0 博客系统实战项目演练`,
num: 123
},
{
src: `../../js2-DOM/图片/猫.jpg`,
title: `Think PHP 5.0 博客系统实战项目演练`,
num: 456
},
{
src: `../../js2-DOM/图片/猫.jpg`,
title: `Think PHP 5.0 博客系统实战项目演练`,
num: 136
},
{
src: `../../js2-DOM/图片/猫.jpg`,
title: `Think PHP 5.0 博客系统实战项目演练`,
num: 258
},
{
src: `../../js2-DOM/图片/猫.jpg`,
title: `Think PHP 5.0 博客系统实战项目演练`,
num: 147
},
{
src: `../../js2-DOM/图片/猫.jpg`,
title: `Think PHP 5.0 博客系统实战项目演练`,
num: 369
},
{
src: `../../js2-DOM/图片/猫.jpg`,
title: `Think PHP 5.0 博客系统实战项目演练`,
num: 789
},
]
// for(let i = 0; i < students.length; i++) {
// document.write(`
// <li>
// <a href="#">
// <img src=${students[i].src} alt="${students[i].title}">
// <h4>
// ${students[i].title}
// </h4>
// <div class="info">
// <span>高级</span> • <span>在线人数:${students[i].num}</span>
// </div>
// </a>
// </li>
// `)
// }
const ul = document.querySelector('ul')
//1、根据数据的个数 创建 对于的 小li
for (let i = 0; i < students.length; i++) {
//2、创建新的小li
const li = document.createElement('li')
//把内容给li
li.innerHTML = `
<a href="#">
<img src=${students[i].src} alt="${students[i].title}">
<h4>
${students[i].title}
</h4>
<div class="info">
<span>高级</span> • <span>在线人数:${students[i].num}</span>
</div>
</a>`
//3、ul追加小li
ul.appendChild(li)
}
</script>
</div>
</div>
</body>
</html>
返回列表
评论