Javascript-web API-day04
文章目录
- 01-实例化日期对象
- 02-常见的日期对象方法
- 03-年月日案例
- 04-年月日简化
- 05-得到时间戳
- 06-倒计时
- 07-关闭节点
- 08-子节点
- 09-增加节点
- 10-克隆节点
- 11-删除节点
- 12-m端时间
- 13-(swiper插件的使用)
- 移动端轮播图
- 游乐园项目
- 学成在线重构
01-实例化日期对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 实例化 new
// 1.得到当前时间
const date = new Date()
console.log(date)
// 2.得到指定时间
const date1 = new Date('2025-1-1 00:00:00')
console.log(date1);
</script>
</body>
</html>
02-常见的日期对象方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 获得日期对象
const date = new Date()
// 使用里面的方法
console.log(date.getFullYear());
console.log(date.getMonth() + 1);
console.log(date.getDate());
console.log(date.getDay()); // 打印当前星期几
console.log(date.getHours()); // 打印当前小时数
// 案例：年月日 时分
console.log(`${date.getFullYear()}:${date.getMonth() + 1}:${date.getDate()} ${date.getHours()}:${date.getMinutes}`);
</script>
</body>
</html>
03-年月日案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 40px;
border: 1px solid #000;
text-align: center;
line-height: 40px;
}
</style>
</head>
<body>
<div></div>
<script>
const div = document.querySelector('div')
function getmyDate() {
const date = new Date
let h = date.getHours()
let m = date.getMinutes()
let s = date.getSeconds()
h = h > 10 ? h : '0' + h
m = m > 10 ? m : '0' + m
s = s > 10 ? s : '0' + s
return `${date.getFullYear()}:${date.getMonth() + 1}:${date.getDate()} ${h}:${m}:${s}`
}
div.innerHTML = getmyDate()
setInterval(function () {
div.innerHTML = getmyDate()
}, 1000)
</script>
</body>
</html>
04-年月日简化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 40px;
border: 1px solid #000;
text-align: center;
line-height: 40px;
}
</style>
</head>
<body>
<div></div>
<script>
const div = document.querySelector('div')
const date = new Date
div.innerHTML = date.toLocaleString()
// div.innerHTML = date.toLocaleDateString()
// div.innerHTML = date.toLocaleTimeString()
setInterval(function () {
const date = new Date
div.innerHTML = date.toLocaleString()
}, 1000)
</script>
</body>
</html>
05-得到时间戳
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 1.getTime
const date = new Date()
console.log(date.getTime)
// 2. +new.Date()
console.log(+new Date())
// 3.Date.now()
console.log(Date.now())
// 2.+new Date()
console.log(+new Date())
console.log('--------------')
console.log(+new Date('2024-12-30 18:30:00'))
// 根据日期返回星期
const arr = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
console.log(arr[new Date().getDay()])
</script>
</body>
</html>
06-倒计时
<!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>
<style>
.countdown {
width: 240px;
height: 305px;
text-align: center;
line-height: 1;
color: #fff;
background-color: brown;
/* background-size: 240px; */
/* float: left; */
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月22日</p>
<p class="title">下班倒计时</p>
<p class="clock">
<span id="hour">00</span>
<i>:</i>
<span id="minutes">25</span>
<i>:</i>
<span id="scond">20</span>
</p>
<p class="tips">22:30:00下课</p>
</div>
<script>
function getColor(flag = 0) {
// #ffffff
let color = '#'
if (flag) {
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f']
for (let i = 0; i < 6; i++) {
let num = Math.floor(Math.random() * arr.length)
color = color + arr[num]
}
return color
} else {
// 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})`
}
}
function getCountTime() {
// 当前时间
const date = new Date()
const next = document.querySelector('.next')
next.innerHTML = `今天是${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`
// 1.得到当前时间戳
const now = +new Date()
// 2.得到下班时间戳
const future = +new Date('2024-12-30 22:30:00')
//3.剩余时间戳 单位秒
const count = (future - now) / 1000
// 4.转换成 时分秒
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
// 把时分秒写到盒子里
const hour = document.querySelector('#hour')
const minutes = document.querySelector('#minutes')
const scond = document.querySelector('#scond')
hour.innerHTML = h
minutes.innerHTML = m
scond.innerHTML = s
}
getCountTime()
setInterval(getCountTime, 1000)
const countdown = document.querySelector('.countdown')
countdown.style.backgroundColor = getColor()
</script>
</body>
</html>
07-关闭节点
<!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>
<style>
.box {
position: relative;
width: 1000px;
height: 200px;
background-color: pink;
margin: 100px auto;
text-align: center;
font-size: 50px;
line-height: 200px;
font-weight: 700;
}
.box1 {
position: absolute;
right: 20px;
top: 10px;
width: 20px;
height: 20px;
background-color: skyblue;
text-align: center;
line-height: 20px;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="box">
我是广告
<div class="box1">X</div>
</div>
<div class="box">
我是广告
<div class="box1">X</div>
</div>
<div class="box">
我是广告
<div class="box1">X</div>
</div>
<script>
// // 1. 获取事件源
// const box1 = document.querySelector('.box1')
// // 2. 事件侦听
// box1.addEventListener('click', function () {
// this.parentNode.style.display = 'none'
// })
// // 1. 获取三个关闭按钮
// const closeBtn = document.querySelectorAll('.box1')
// for (let i = 0; i < closeBtn.length; i++) {
// closeBtn[i].addEventListener('click', function () {
// // 关闭我的爸爸 所以只关闭当前的父元素
// this.parentNode.style.display = 'none'
// })
// }
const box1 = document.querySelectorAll('.box1')
for (let i = 0; i < 3; i++) {
box1[i].addEventListener('click', function () {
box1[i].parentNode.style.display = 'none'
})
}
</script>
</body>
</html>
08-子节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script>
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>
</body>
</html>
09-增加节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>1</li>
</ul>
<script>
const div = document.createElement('div')
document.body.appendChild(div)
console.log(div)
const ul = document.querySelector('ul')
// 1.创建节点
const li = document.createElement('li')
li.innerHTML = '我是li'
// 2.追加节点 作为最后一个元素
ul.appendChild(li)
// 2.追加节点
// insertBefore(插入的元素，放到哪个元素前面)
ul.insertBefore(li, ul.children[0])
</script>
</body>
</html>
10-克隆节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
const ul = document.querySelector('ul')
ul.appendChild(ul.children[0].cloneNode(true))
</script>
</body>
</html>
11-删除节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>没有</li>
</ul>
<script>
const ul = document.querySelector('ul')
ul.removeChild(ul.children[0])
</script>
</body>
</html>
12-m端时间
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
<script>
const div = document.querySelector('div')
div.addEventListener('touchstart', function () {
console.log('开始摸我')
})
div.addEventListener('touchend', function () {
console.log('结束摸我')
})
div.addEventListener('touchmove', function () {
console.log('一直摸我')
})
</script>
</body>
</html>
13-(swiper插件的使用)
https://swiper.com.cn/
使用前阅读中文文档
需要引入link和script的src
移动端轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/swiper-bundle.min.css">
<link rel="stylesheet" href="./css/swiper.min.css">
<style>
.box {
position: relative;
width: 800px;
height: 300px;
background-color: pink;
margin: 100px auto;
}
html,
body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
}
.swiper {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
}
.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
</head>
<body>
<div class="box">
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
<script src="./js/swiper-bundle.min.js"> </script>
<!-- <script src="./js/swiper.min.js"></script> -->
<script>
var swiper = new Swiper(".mySwiper", {
pagination: {
el: ".swiper-pagination",
},
autoplay: {
delay: 1000,//1秒切换一次
disableOnInteraction: true,//鼠标触摸后自动继续播放
},
});
</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>游乐园移动端</title>
<!-- 引入favicon图标 -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<!-- 引入字体图标 -->
<link rel="stylesheet" href="./lib/iconfont/iconfont.css">
<!-- 引入index.css -->
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./css/swiper.min.css">
<style>
html,
body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.swiper-pagination-bullet {
background: #fff;
opacity: .8;
}
.swiper-pagination-bullet-active {
background: pink;
}
</style>
</head>
<body>
<!-- 页面主体部分 -->
<div class="main">
<!-- 轮播图模块 -->
<div class="banner">
<!-- 轮播图模块 -->
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<a href="#"><img src="./uploads/banner_1.png" alt=""></a>
</div>
<div class="swiper-slide">
<a href="#"><img src="./uploads/banner_1.png" alt=""></a>
</div>
<div class="swiper-slide">
<a href="#"><img src="./uploads/banner_1.png" alt=""></a>
</div>
<div class="swiper-slide">
<a href="#"><img src="./uploads/banner_1.png" alt=""></a>
</div>
<div class="swiper-slide">
<a href="#"><img src="./uploads/banner_1.png" alt=""></a>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
</div>
<!-- 标题模块 -->
<div class="title">
<h4>乐园活动</h4>
</div>
<!-- 活动项目模块 -->
<div class="item">
<!-- 图片模块 -->
<div class="pic">
<!-- 图片 -->
<a href="#">
<img src="./uploads/item_2.png" alt="">
</a>
<!-- 进行模块 -->
<div class="status">
进行中
</div>
<!-- 收藏 -->
<div class="collect">
<i class="iconfont icon-shoucang1"></i>
</div>
</div>
<!-- 信息模块 -->
<div class="info">
<h5>疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动</h5>
<div class="rest">
<span>
<i class="iconfont icon-qizhi"></i>
200人报名
</span>
<span>
<i class="iconfont icon-shizhong"></i>
本周六开始</span>
</div>
</div>
</div>
<!-- 活动项目模块 -->
<div class="item">
<!-- 图片模块 -->
<div class="pic">
<!-- 图片 -->
<a href="#">
<img src="./uploads/item_2.png" alt="">
</a>
<!-- 进行模块 -->
<div class="status">
进行中
</div>
<!-- 收藏 -->
<div class="collect">
<i class="iconfont icon-shoucang1"></i>
</div>
</div>
<!-- 信息模块 -->
<div class="info">
<h5>疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动</h5>
<div class="rest">
<span>
<i class="iconfont icon-qizhi"></i>
200人报名
</span>
<span>
<i class="iconfont icon-shizhong"></i>
本周六开始</span>
</div>
</div>
</div>
<!-- 活动项目模块 -->
<div class="item">
<!-- 图片模块 -->
<div class="pic">
<!-- 图片 -->
<a href="#">
<img src="./uploads/item_2.png" alt="">
</a>
<!-- 进行模块 -->
<div class="status">
进行中
</div>
<!-- 收藏 -->
<div class="collect">
<i class="iconfont icon-shoucang1"></i>
</div>
</div>
<!-- 信息模块 -->
<div class="info">
<h5>疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动</h5>
<div class="rest">
<span>
<i class="iconfont icon-qizhi"></i>
200人报名
</span>
<span>
<i class="iconfont icon-shizhong"></i>
本周六开始</span>
</div>
</div>
</div>
<!-- 活动项目模块 -->
<div class="item">
<!-- 图片模块 -->
<div class="pic">
<!-- 图片 -->
<a href="#">
<img src="./uploads/item_2.png" alt="">
</a>
<!-- 进行模块 -->
<div class="status">
进行中
</div>
<!-- 收藏 -->
<div class="collect">
<i class="iconfont icon-shoucang1"></i>
</div>
</div>
<!-- 信息模块 -->
<div class="info">
<h5>疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动</h5>
<div class="rest">
<span>
<i class="iconfont icon-qizhi"></i>
200人报名
</span>
<span>
<i class="iconfont icon-shizhong"></i>
本周六开始</span>
</div>
</div>
</div>
</div>
<!-- 底部盒子 -->
<footer class="toolbar">
<a href="#" class="active">
<i class="iconfont icon-index-copy"></i>
<span>首页</span>
</a>
<a href="#">
<i class="iconfont icon-youhuiquan"></i>
<span>卡卷</span>
</a>
<a href="#">
<i class="iconfont icon-index-copy"></i>
<span>首页</span>
</a>
</footer>
<!-- 引入js文件 -->
<script src="./js/flexible.js"></script>
<script src="./js/swiper.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.swiper-container', {
pagination: {
el: '.swiper-pagination',
},
autoplay: {
delay: 3000,//3秒切换一次
},
});
</script>
</body>
</html>
学成在线重构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>学车在线首页</title>
<link rel="stylesheet" href="./css/style.css">
<style>
</style>
</head>
<body>
<!-- 4. box核心内容区域开始 -->
<div class="box w">
<div class="box-hd">
<h3>精品推荐</h3>
<a href="#">查看全部</a>
</div>
<div class="box-bd">
<ul class="clearfix">
</ul>
</div>
</div>
<script>
// 1. 重构
let data = [
{
src: 'images/course01.png',
title: 'Think PHP 5.0 博客系统实战项目演练',
num: 1125
},
{
src: 'images/course02.png',
title: 'Android 网络动态图片加载实战',
num: 357
},
{
src: 'images/course03.png',
title: 'Angular2 大前端商城实战项目演练',
num: 22250
},
{
src: 'images/course04.png',
title: 'Android APP 实战项目演练',
num: 389
},
{
src: 'images/course05.png',
title: 'UGUI 源码深度分析案例',
num: 124
},
{
src: 'images/course06.png',
title: 'Kami2首页界面切换效果实战演练',
num: 432
},
{
src: 'images/course07.png',
title: 'UNITY 从入门到精通实战案例',
num: 888
},
{
src: 'images/course08.png',
title: 'Cocos 深度学习你不会错过的实战',
num: 590
},
]
const ul = document.querySelector('ul')
// 获取完数据后添加小li
// 创建li
for (let i = 0; i < data.length; i++) {
const li = document.createElement('li')
// 给li添加内容
// 注意src后面有一个空格
li.innerHTML = `
<a href="#">
<img src=${data[i].src} alt="">
<h4>
${data[i].title}
</h4>
<div class="info">
<span>高级</span> • <span>${data[i].num}</span>人在学习
</div>
</a>
`
// 将创建好的li添加到ul里
ul.appendChild(li)
}
</script>
</body>
</html>
innerHTML的强大之处在于它能够根据提供的字符串内容动态地构建DOM结构，无论是HTML标签还是纯文本。