时间简单介绍加以前知识一些练习的综合案例
1.时间
就是一些对应年月日星期时分秒的单词，一般月后面要自己手动加一，因为它是0-11的，所有会比正常的月份少一个月，星期是0-6的，但是不用加，因为他星期天是零，其他是正常显示的，用法如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>07-时间对象.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<script>
// 1 实例化一个 时间对象 new
let date = new Date();
console.log(date.getFullYear()); // 2 输出当下是什么年份
console.log(date.getMonth()); // 3 输出月份 0-12 都会自己 加一
console.log(date.getDate()); // 4 几号
console.log(date.getDay()); // 5 输出星期几 星期一 是 1 星期二 星期六 6 星期天 0
console.log(date.getHours()); // 6 小时
console.log(date.getMinutes());// 7 分钟
console.log(date.getSeconds());// 8 秒
</script>
</body>
</html>
2.时间戳
时间戳:1970年1月1号0点0分0秒到现在的时间(毫秒)
// 三种方式 获取时间戳
// let date=new Date();
// console.log(date.getTime()); // 方式一
// console.log(+(new Date()) ); // 方式二 只要日期对象 可以使用 + 将整个对象 转成 时间戳
// console.log(Date.now()); // 方式三
一般用法
// 来快速生成一个不会重复的数字 * 随机数
将年月日时分秒输出到网页的案例
就是将那些年月日时分秒先做好定义，然后用一个标签来输出，div是不行的，不知道是块级元素不行还是某些不行
<!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>
</head>
<body>
<h1></h1>
<script>
let h = document.querySelector('h1')
setInterval(function () {
//获取
let data = new Date()
let n = data.getFullYear() //年
let y = data.getMonth() //月
let r = data.getDate() //日
let s = data.getHours() //时
let f = data.getMinutes() //分
let m = data.getSeconds() //秒
//将时间的值赋予h1标签，不用document输出。因为innerText时直接修改h1标签里面的内容
h.innerText = ` ${n}年 ${y + 1}月 ${r}日 ${s}时 ${f}分 ${m}秒`
}, 1000)
</script>
</body>
</html>
微博发布综合案例
就是要用到创建标签，插入标签，函数，点击时件，input事件，math随机数公式，三元表达式等等知识的案例
<!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>Document</title>
<link rel="stylesheet" href="css/weibo.css" />
</head>
<body>
<div class="w">
<div class="controls">
<img src="images/tip.png" alt="" /><br />
<textarea
placeholder="说点什么吧..."
id="area"
cols="30"
rows="100"
maxlength="200"
></textarea>
<div>
<span class="useCount">0</span>
<span>/</span>
<span>200</span>
<button id="send">发布</button>
</div>
</div>
<div class="contentList">
<ul>
<!-- <li>
<div class="info">
<img class="userpic" src="./images/9.5/06.jpg" />
<span class="username">张良</span>
<p class="send-time">发布于 2022-4-7 15:12:23</p>
</div>
<div class="content">sdfdf</div>
<span class="the_del">X</span>
</li> -->
</ul>
</div>
</div>
<script>
/*
1 给发布按钮绑定点击事件
1 生成一个li标签
1 给li添加属性和子元素
2 获取文本域的内容 设置到对应的标签中
2 插入到ul中
2 给文本域绑定 input事件
获取文字的长度 设置对应的标签上 文字个数标签上
3 给删除标签 绑定点击事件
1 获取它的父节点 parentNode
2 让它父节点 删除自己 remove()
*/
let dataArr = [
{ uname: '司马懿', imgSrc: './images/9.5/01.jpg' },
{ uname: '女娲', imgSrc: './images/9.5/02.jpg' },
{ uname: '百里守约', imgSrc: './images/9.5/03.jpg' },
{ uname: '亚瑟', imgSrc: './images/9.5/04.jpg' },
{ uname: '虞姬', imgSrc: './images/9.5/05.jpg' },
{ uname: '张良', imgSrc: './images/9.5/06.jpg' },
{ uname: '安其拉', imgSrc: './images/9.5/07.jpg' },
{ uname: '李白', imgSrc: './images/9.5/08.jpg' },
{ uname: '阿珂', imgSrc: './images/9.5/09.jpg' },
{ uname: '墨子', imgSrc: './images/9.5/10.jpg' },
{ uname: '鲁班', imgSrc: './images/9.5/11.jpg' },
{ uname: '嬴政', imgSrc: './images/9.5/12.jpg' },
{ uname: '孙膑', imgSrc: './images/9.5/13.jpg' },
{ uname: '周瑜', imgSrc: './images/9.5/14.jpg' },
{ uname: '老夫子', imgSrc: './images/9.5/15.jpg' },
{ uname: '狄仁杰', imgSrc: './images/9.5/16.jpg' },
{ uname: '扁鹊', imgSrc: './images/9.5/17.jpg' },
{ uname: '马可波罗', imgSrc: './images/9.5/18.jpg' },
{ uname: '露娜', imgSrc: './images/9.5/19.jpg' },
{ uname: '孙悟空', imgSrc: './images/9.5/20.jpg' },
{ uname: '黄忠', imgSrc: './images/9.5/21.jpg' },
{ uname: '百里玄策', imgSrc: './images/9.5/22.jpg' },
];
// 发布按钮
let send = document.querySelector('#send');
let area = document.querySelector('#area');
let ul = document.querySelector('ul');
let useCount = document.querySelector('.useCount');
// 点击
send.addEventListener('click', function () {
// 随机的获取英雄
let user = getUser();
// 创建一个li标签
let li = document.createElement('li');
// 添加三个大的子元素
let info = document.createElement('div');
info.classList.add('info');
// info要创建三个子元素
let userpic = document.createElement('img');
userpic.classList.add('userpic');
userpic.src = user.imgSrc; // 英雄头像
let username = document.createElement('span');
username.classList.add('username');
username.innerText = user.uname; // 英雄的名称
let sendTime = document.createElement('p');
sendTime.classList.add('send-time');
sendTime.innerText = `发布于 ${getFormatTime()}`;// 显示 时间
// 把三个子元素都写在 info中
info.append(userpic, username, sendTime);
let content = document.createElement('div');
content.classList.add('content');
content.innerText = area.value; // 设置文本域的内容
let the_del = document.createElement('span');
the_del.classList.add('the_del');
the_del.innerText = 'X';// 删除标签 X
the_del.addEventListener("click",function () {
this.parentNode.remove();// 删除父元素
})
// li插入子元素
li.append(info, content, the_del);
// li插入到ul中
ul.appendChild(li);
// 收尾工作 清空 文本域
area.value = '';
useCount.innerText="0"
});
// area input事件
area.addEventListener('input', function () {
useCount.innerText = area.value.length;
});
// 函数 随机获取用户对象
function getUser() {
// 随机的获取数组中的元素
// 获取对应区间的下标
// 公式 Math.round(Math.random()*(max-min)+min)
// max = 数组的长度 - 1
let index = Math.round(Math.random() * (dataArr.length - 1));
let user = dataArr[index];
return user;
}
// 获取有一定格式的时间
function getFormatTime() {
let nowDate = new Date();
let fullyear = nowDate.getFullYear();
let month = nowDate.getMonth();
let date = nowDate.getDate();
let hours = nowDate.getHours();
let minutes = nowDate.getMinutes();
let seconds = nowDate.getSeconds();
// 将 7 => "07"
month = month < 10 ? '0' + month : month;
date = date < 10 ? '0' + date : date;
hours = hours < 10 ? '0' + hours : hours;
minutes = minutes < 10 ? '0' + minutes : minutes;
seconds = seconds < 10 ? '0' + seconds : seconds;
return `${fullyear}-${month}-${date} ${hours}:${minutes}:${seconds}`;
}
</script>
</body>
</html>
微博发布综合案例-简单化
功能跟上面的一样，就是不用创建和插入标签，但是删除键用不了，不过代码会简洁很多，就是拼接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>Document</title>
<link rel="stylesheet" href="css/weibo.css" />
</head>
<body>
<div class="w">
<div class="controls">
<img src="images/tip.png" alt="" /><br />
<textarea
placeholder="说点什么吧..."
id="area"
cols="30"
rows="100"
maxlength="200"
></textarea>
<div>
<span class="useCount">0</span>
<span>/</span>
<span>200</span>
<button id="send">发布</button>
</div>
</div>
<div class="contentList">
<ul>
<!-- <li>
<div class="info">
<img class="userpic" src="./images/9.5/06.jpg" />
<span class="username">张良</span>
<p class="send-time">发布于 2022-4-7 15:12:23</p>
</div>
<div class="content">sdfdf</div>
<span class="the_del">X</span>
</li> -->
</ul>
</div>
</div>
<script>
/*
1 给发布按钮绑定点击事件
1 生成一个li标签
1 给li添加属性和子元素
2 获取文本域的内容 设置到对应的标签中
2 插入到ul中
2 给文本域绑定 input事件
获取文字的长度 设置对应的标签上 文字个数标签上
3 给删除标签 绑定点击事件
1 获取它的父节点 parentNode
2 让它父节点 删除自己 remove()
*/
let dataArr = [
{ uname: '司马懿', imgSrc: './images/9.5/01.jpg' },
{ uname: '女娲', imgSrc: './images/9.5/02.jpg' },
{ uname: '百里守约', imgSrc: './images/9.5/03.jpg' },
{ uname: '亚瑟', imgSrc: './images/9.5/04.jpg' },
{ uname: '虞姬', imgSrc: './images/9.5/05.jpg' },
{ uname: '张良', imgSrc: './images/9.5/06.jpg' },
{ uname: '安其拉', imgSrc: './images/9.5/07.jpg' },
{ uname: '李白', imgSrc: './images/9.5/08.jpg' },
{ uname: '阿珂', imgSrc: './images/9.5/09.jpg' },
{ uname: '墨子', imgSrc: './images/9.5/10.jpg' },
{ uname: '鲁班', imgSrc: './images/9.5/11.jpg' },
{ uname: '嬴政', imgSrc: './images/9.5/12.jpg' },
{ uname: '孙膑', imgSrc: './images/9.5/13.jpg' },
{ uname: '周瑜', imgSrc: './images/9.5/14.jpg' },
{ uname: '老夫子', imgSrc: './images/9.5/15.jpg' },
{ uname: '狄仁杰', imgSrc: './images/9.5/16.jpg' },
{ uname: '扁鹊', imgSrc: './images/9.5/17.jpg' },
{ uname: '马可波罗', imgSrc: './images/9.5/18.jpg' },
{ uname: '露娜', imgSrc: './images/9.5/19.jpg' },
{ uname: '孙悟空', imgSrc: './images/9.5/20.jpg' },
{ uname: '黄忠', imgSrc: './images/9.5/21.jpg' },
{ uname: '百里玄策', imgSrc: './images/9.5/22.jpg' },
];
// 发布按钮
let send = document.querySelector('#send');
let area = document.querySelector('#area');
let ul = document.querySelector('ul');
let useCount = document.querySelector('.useCount');
// 点击
send.addEventListener('click', function () {
let user=getUser();
let liHtml = `
<li>
<div class="info">
<img class="userpic" src="${user.imgSrc}" />
<span class="username">${user.uname}</span>
<p class="send-time">发布于 ${getFormatTime()}</p>
</div>
<div class="content">${area.value}</div>
<span class="the_del">X</span>
</li
`;
// 每点击一次 在旧标签的基础上来 拼接多一个标签
ul.innerHTML += liHtml;
// 暂时没有办法解决的 实现 点击删除！！ 事件委托技术 优雅解决
});
// area input事件
area.addEventListener('input', function () {
useCount.innerText = area.value.length;
});
// 函数 随机获取用户对象
function getUser() {
let index = Math.round(Math.random() * (dataArr.length - 1));
let user = dataArr[index];
return user;
}
// 获取有一定格式的时间
function getFormatTime() {
let nowDate = new Date();
let fullyear = nowDate.getFullYear();
let month = nowDate.getMonth();
let date = nowDate.getDate();
let hours = nowDate.getHours();
let minutes = nowDate.getMinutes();
let seconds = nowDate.getSeconds();
month = month < 10 ? '0' + month : month;
date = date < 10 ? '0' + date : date;
hours = hours < 10 ? '0' + hours : hours;
minutes = minutes < 10 ? '0' + minutes : minutes;
seconds = seconds < 10 ? '0' + seconds : seconds;
return `${fullyear}-${month}-${date} ${hours}:${minutes}:${seconds}`;
}
</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="./style.css">
</head>
<body>
<!--
1 引入style.css
2 引入 data.js
3 根据data.js中的data数组 来遍历生成代码
最终让网页显示出来 data数组的数据
-->
<script src="./data/data.js"></script>
<div class="box w">
<div class="box-hd">
<h3>精品推荐</h3>
<a href="#">查看全部</a>
</div>
<div class="box-bd">
<ul class="clearfix uls">
<!-- <li>
<img src="images/course01.png" alt="" />
<h4>
Think PHP 5.0 博客系统实战项目演练
</h4>
<div class="info">
<span>高级</span> • <span>1125</span>人在学习
</div>
</li> -->
</ul>
</div>
</div>
<script>
/*
1 获取到要渲染到页面中的数据 data
2 遍历data
要求使用 createElement appendChild 来往ul中插入 li 元素
1 创建一个li标签
2 创建一个图片便签 设置 src属性
3 创建一个h4标签 设置文本内容
4 创建一个div标签 添加一个class info
5 创建两个span标签
1个设置内容 高级
2个设置人数 1125
6 组装
li标签要 插入 img
li标签要 插入 h4
li标签要 插入 div.info
div.info 要插入两个span
ul插入 li
3 append可以插入多个元素 appendChild 只能插入一个元素
createTextNode 创建文件节点
*/
let ul = document.querySelector(".uls")
//遍历生成后续内容
for (let index = 0; index < data.length; index++) {
//创建
let li = document.createElement("li")
let img = document.createElement("img")
img.src = data[index].src
let h4 = document.createElement("h4")
h4.innerText = data[index].title
let div = document.createElement("div")
div.classList.add("info")
let span1 = document.createElement("span")
span1.innerText = "高级"
let span2 = document.createElement("span")
span2.innerText = data[index].num
//createTextNode：创建文本节点
let text1 = document.createTextNode("•")
let text2 = document.createTextNode("人在学习")
//组装
div.append(span1, text1, span2, text2)
li.append(img, h4, div)
ul.appendChild(li)
}
</script>
</body>
</html>
