web API (03)
字符串
<!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>02-字符串.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<div>
<button>123</button>
</div>
<p></p>
<script>
// let str="abc";
// console.log(str[1]);
// console.log(str[1]);
// console.log(str.length);
let button = document.querySelector('button');
// 使用 insertBefore试试
let p = document.querySelector('p');
// p.insertBefore(button);
// p.appendChild(button);
// p.insertBefore(button,null);// 没有想好 把 button插入到p标签的哪个子元素上面，传递一个null
// p.insertBefore(指定p标签的子元素)
</script>
</body>
</html>
数组和伪数组
<!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>03-数组和伪数组.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<div></div>
<div></div>
<script>
// 真正的数组 简单的判断 有一个方法 filter
// let arr=[];
// 通过 document.querySelectorAll 获取的数组 就是伪数组 可以使用for循环 但是有很多的真正的数组方法 伪数组用不了的！！
// 那些数组方法呢 很多 还没有正式讲到而已
// console.log(arr.filter);
// let divs=document.querySelectorAll("div");
// console.log(divs.filter);
// console.log(arr.filter);
// console.log(arr.map);
// console.log(arr.some);
// console.log(arr.every);
// console.log(arr.find);
// console.log(arr.findIndex);
// console.log(arr);
</script>
</body>
</html>
学成在线 渲染页面
- 需求：按照数据渲染页面
- 分析：
- ①：准备好空的ul 结构
- ②：根据数据的个数，创建一个新的空li
- ③：li里面添加内容 img 标题等
- ④：追加给ul
<!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>index.html</title>
<link rel="stylesheet" href="./style.css" />
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<div class="box w">
<div class="box-hd">
<h3>精品推荐</h3>
<a href="#">查看全部</a>
</div>
<div class="box-bd">
<ul class="clearfix list"></ul>
</div>
</div>
<body>
<!-- 1 引入 要显示的数据 -->
<script src="./data/data.js"></script>
<!-- 2 在写自己的业务 -->
<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('.list');
for (let index = 0; index < data.length; index++) {
// const element = data[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;
let text1 = document.createTextNode(' • ');
let text2 = document.createTextNode('人在学习');
// 节点的类型 元素节点（标签）、文本节点
// 开始组装 append 可以同时插入多个标签
// appendChild 只能插入一个标签
div.append(span1, text1, span2, text2);
li.append(img, h4, div);
// li.append()
ul.appendChild(li);
}
</script>
</body>
</html>
克隆节点
-
复制一个原有的节点
-
把复制的节点放到指定的元素内部
-
克隆节点
-
cloneNode会克隆出一个跟原标签一样的元素，括号内传入布尔值
- 若为true，则代表克隆时会包含后代节点一起克隆 --深拷贝
- 若为false，则代表克隆时不包括后代节点---浅拷贝
- 默认为false
<!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{
width: 200px;
height: 200px;
background-color: yellow;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="box">
<button>我是恁爹</button>
</div>
<script>
// 来克隆的节点
let box= document.querySelector('.box')
// 开始克隆
// let newBox = box.cloneNode();// 浅克隆 不会把 div的后代节点一起克隆
let newBox = box.cloneNode(true);// 深克隆 会把 div的后代节点一起克隆
// 插入到body标签中
document.body.appendChild(newBox)
</script>
</body>
</html>
删除节点
-
若一个节点在页面中已不需要时，可以删除它
-
在 JavaScript 原生DOM操作中，要删除元素必须通过父元素删除
-
语法
- 如不存在父子关系则删除不成功
- 删除节点和隐藏节点（display:none） 有区别的： 隐藏节点还是存在的，但是删除，则从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>
</head>
<body>
<button>我是恁</button>
<ul>
<li>23</li>
<li>2xx</li>
<li>2cc</li>
<li>23vv</li>
<li>23df</li>
<li>23fsd</li>
<li>23ds</li>
</ul>
<script>
let bnt = document.querySelector('button')
let ul = document.querySelector('ul')
bnt.addEventListener('click',function () {
// 选择想删除的对象
let li = document.querySelector('li:nth-child(1)')
// 直接删除指定的对象
// ul.removeChild(li)
// 删除整个ul标签
ul.remove()
})
</script>
</body>
</html>
时间对象
- 实例化
- 在代码中发现了 new 关键字时 ， 一般将这个操作称之为实例化
- 在创建一个时间对象并获取时间
- 获得当前时间
2.获得指定时间
- 时间对象方法
<script>
// 实例化一个 时间对象
let date = new Date();
console.log(date.getFullYear());// 输出当下是什么年份
console.log(date.getMonth());// 输出月份0-12 都会自己 加一
console.log(date.getDate); // 几号
console.log(date.getDay); // 输出星期几 星期一是1 星期天是 0
console.log(date.getHours); // 小时
console.log(date.getMinutes); // 分钟
console.log(date.getSeconds); // 秒
</script>
案例
-
页面显示时间
-
分析：
①：调用时间对象方法进行转换
②：字符串拼接后，通过 innerText 给 标签
<body>
<div>莫</div>
<h1></h1>
<script>
let h1 = document.querySelector('h1')
setInterval(function () {
let date = new Date
let num = date.getFullYear() +'年'
let num1 = (date.getMonth()+1) + '月'
let num2 = date.getDate() +'日'
let num3 = '星期' + date.getDay()
let num4 = date.getHours() + '时'
let num5 = date.getMinutes() + '分'
let num6 = date.getSeconds() +'秒'
h1 .innerText =`${num} ${num1} ${num2} ${num3} ${num4} ${num5} ${num6}`
},1000)
</script>
</body>
时间戳
- 是指1970年01月01日00时00分00秒起至现在的毫秒数，它是一种特殊的计量时间的方式
- 获取时间戳的方法
<script>
let time = new Date()
//三种方式
console.log(time.getTime())// 方式一
console.log(+(new Date())); //方式二 只要日期对象
console.log(Date.now); //方式三 当前的时间
</script>
发布微博案例
<!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 area = document.querySelector("#area");
let useCount = document.querySelector(".useCount");
let ul = document.querySelector("ul");
let send = document.querySelector("#send");
// 设置一个点击事件
send.addEventListener("click", function () {
let titi = getTime();
let userr = getHtml();
let liHtml = `
<li>
<div class="info">
<img class="userpic" src="${userr.imgSrc}" />
<span class="username">${userr.uname}</span>
<p class="send-time">发布于 ${titi}</p>
</div>
<div class="content">${area.value}</div>
<span class="the_del">X</span>
</li>`;
// 每一次点击 在旧标签的基础上 拼接多一个标签
ul.innerHTML += liHtml;
// 当点击发布的时候 让里面的内容等于 空字符串
area.value = "";
// 当点击发布的时候输入的长度等于0
useCount.innerHTML = 0;
// 给 X 设置点击事件
let the_del = document.querySelector('.the_del')
the_del.addEventListener('click',function () {
// 点击过后就删掉他的父元素
the_del.parentNode.remove()
})
});
// 设置 input 的事件
area.addEventListener("input", function () {
// 让useCount 里面的 内容等于 我输入的长度
useCount.innerText = area.value.length;
});
// 设置时间与日期
function getTime() {
let timi = new Date();
let FullYear = timi.getFullYear();
let Month = timi.getMonth() + 1;
let date = timi.getDate();
let Hour = timi.getHours(); // 小时
let Minutes = timi.getMinutes();
let Seconds = timi.getSeconds(); // 秒
// 补0 用三元表达式做判断
Month = Month < 10 ? "0" + Month : Month;
date = date < 10 ? "0" + date : date;
Hour = Hour < 10 ? "0" + Hour : Hour;
Minutes = Minutes < 10 ? "0" + Minutes : Minutes;
Seconds = Seconds < 10 ? "0" + Seconds : Seconds;
let xxx = `${FullYear}-${Month}-${date}-${Hour}-${Minutes}-${Seconds} `;
return xxx;
}
// 设置名字与图片的随机对象
function getHtml() {
let num = Math.round(Math.random() * (dataArr.length - 1));
let num1 = dataArr[num];
return num1;
}
console.log(getHtml());
</script>
</body>
</html>
