目的:通过一个数据在页面上渲染出一个表格。
<!DOCTYPE html>
<html lang='en'>
<head><meta charset='UTF-8'><title>Document</title>
</head>
<body><!-- <table border="1"><thead><tr><th>序号</th><th>姓名</th><th>性别</th><th>年龄</th><th>操作</th></tr></thead><tbody><tr><td>1</td><td>xiaoming</td><td>女</td><td>15</td><td><button>编辑</button><button>删除</button></td></tr></tbody></table> --><script>var userList=[{ name:"彭万里",age:100,gender:"男" },{ name:"高大山",age:110,gender:"女" },{ name:"谢大海",age:109,gender:"男" },{ name:"马宏宇",age:118,gender:"女" },{ name:"林莽",age:90,gender:"男" },]var str=`<table border="1"><thead><tr><th>序号</th><th>姓名</th><th>性别</th><th>年龄</th><th>操作</th></tr></thead><tbody>`// 循环数组userList.forEach((item,index)=>{// console.log(item.name);str+=`<tr><td>${index+1}</td><td>${item.name}</td><td>${item.age}</td><td>${der}</td><td><button>编辑</button><button>删除</button></td></tr>`})str+=`</tbody></table>`document.write(str)</script>
</body>
</html>
结果如下:
JSON对象和JS对象有什么区别:JSON中的键,必须使用双引号包起来。
<!-- 写一个json数据 使用JSON的对象格式 --><script>var json1={"name":"xiaoqiang","age":"20","sex":"男","address":"北京",}console.log(json1);console.log(typeof(json1));let jsonStr=JSON.stringify(json1);//将json数据转换为字符串console.log(jsonStr);console.log(typeof jsonStr);console.log("--------------------------------");</script><!-- 写一个json数据 使用JSON的数组格式 --><script>var json2=`[{"name":"wc","age":10},{"name":"xq","age":11}]`let json2Obj=JSON.parse(json2);//将字符串类型转换成json对象console.log(json2);console.log(typeof json2Obj);</script>
结果如下:
本地缓存:把一些数据缓存到浏览器的本地。
方案:
1)localStroage
永久缓存 数据一辈子都在,除非你手动删除
2)sessionStorage
临时缓存 当浏览器关闭,再打开浏览器,数据就没了
共同点:都是只能存储字符串,如果你是JSON对象,也需要把JSON对象转成JSON字符串来存储
存:localStroage.setItem(“键”,“值”); 设置了重复的键,相当于修改
取Item(“键”); 根据键,来获取值,如果没有,得到null
删veItem(“键”); 根据键,删除数据
清空:localStroage.clear() 清空所有的数据
<script>// localStroage:// 存:localStroage.setItem("键","值"); 设置了重复的键,相当于修改localStorage.setItem("name","wc")localStorage.setItem("name","xq")let json = {"name":"lalala"}localStorage.setItem("data",JSON.stringify(json))// 取Item("键"); 根据键,来获取值,如果没有,得到nullconsole.Item("name"));console.log(JSON.Item("data")));// 删veItem("键"); 根据键,删除数据veItem("name")// 清空:localStroage.clear() 清空所有的数据localStorage.clear()</script>
存:sessionStroage.setItem(“键”,“值”); 设置了重复的键,相当于修改
取Item(“键”); 根据键,来获取值,如果没有,得到null
删veItem(“键”); 根据键,删除数据
清空:sessionStroage.clear() 清空所有的数据
数学中的方法:
在JS中,提供了一个内置对象,叫Math,存储了一些操作数字的方法
Math是特殊的对象,叫单体内置对象,不需要new,在JS中就这一个。
生成一个随机数,0~1 包含0 不包含1
对一个数字进行四舍五入 und(2.9)==>3
向上取整 il(3.1) ==>4
向下取整 il(3.9)==>3
数据取幂后的结果
数字的算术平方根
数字的绝对值
取N个数中的最大值
取N个数中的最小值
代表数学中的π
<script>// 1)reandom()// 生成一个随机数,0~1 包含0 不包含1let res1 = Math.random();console.log(res1);// 2)round()// 对一个数字进行四舍五入 und(2.9)let res2 = und(2.5);console.log(res2);// 3)ceil() 天花板// 向上取整 und(3.1)let res3 = il(2.1);console.log(res3);// 4)floor() 地板// 向下取整 und(3.9)let res4 = Math.floor(2.9);console.log(res4);// 5)pow()// 数据取幂后的结果let res5 = Math.pow(2,3);console.log(res5);// 6)sqrt()// 数字的算术平方根let res6 = Math.sqrt(9);console.log(res6);// 7)abs()// 数字的绝对值let res7 = Math.abs(-110);console.log(res7);// 8)max()// 取N个数中的最大值let res8 = Math.max(1,2,3,4)console.log(res8);// 8)min()// 取N个数中的最小值let res9 = Math.min(1,2,3,4)console.log(res9);// 9)PI console.log(Math.PI);</script>
结果如下:
时间对象:
在JS中的,提供了一个类(构造函数,构造器),叫Date(),是专门用来创建时间对象的。
语法:let d1 = new Date();
返回:当前终端的时间,如果你把电脑的电脑调整了,得到的就是调整后的时间。
例:
<script>let time = new Date();console.log(time);</script>
结果如下:
在创建时,可以指定参数。1)参数可以是数字第1个数字表示 年第2个数字表示 月0表示1月 1表示2月...第3个数字表示 日第4个数字表示 时第5个数字表示 分第6个数字表示 秒第7个数字表示 毫秒至少需要传递两个数字,如果是一个数字时,获取的是格林威治时间2)参数可以是字符串"yyyy-mm-dd HH:MM:SS""yyyy/mm/dd HH:MM:SS"如果传递字符串的话,1就表示1月了 年月日 和 时分秒之间需要加一个空格
<script>// 创建一个指定日期的时间对象:// 参数可以是数字 月份是从0开始let time1 = new Date(2021,3,25,10,17,10,100);console.log(time1);console.log("-----------------------");let time2 = new Date(2021,3);console.log(time2);console.log("-----------------------");// 参数可以是字符串let time3 = new Date("2021-03-25 10:23:10")console.log(time3);let time4 = new Date("2021/03/25 10:23:10")console.log(time4);</script>
结果如下:
<script>let time = new Date();console.log(time);console.log("年:",FullYear());console.log("月:",Month());console.log("日:",Date());console.log("时:",Hours());console.log("分:",Minutes());console.log("秒:",Seconds());console.log("毫秒:",Milliseconds());console.log("星期:",Day());console.log("时间戳:",Time());</script>
结果如下:
例:
<script>let time = new Date();time.setFullYear(2022)time.setMonth(2)time.setDate(25)time.setHours(10)time.setMinutes(34)time.setSeconds(38)time.setMilliseconds(100)console.log(time);</script>
结果如下:
目的:
有两个时间点:获取两个时间点的之间相差 xx 天 xx 小时 xx 分钟 xx 秒
<script>// 1)准备两个时间对象var time1 = new Date(); // 代表当前的时间var time2 = new Date(2020,1,19,10,30,00);// 2)转成时间戳 求差值 取绝对值 得到ms数 /1000 转成秒数 取整// 两个时间节点相差的秒数let diffTime = und(Math.Time() - Time()) / 1000);// 3)换算var day = parseInt(diffTime / (60*60*24));var hour = parseInt(diffTime % (60*60*24) / (60*60));var minutes = parseInt(diffTime % (60*60) / 60);var seconds = diffTime % 60console.log(`距离现在的时间还有${ day }天 ${ hour }小时 ${ minutes }分钟 ${seconds}秒`);</script>
结果如下:
<script>// 封装一个函数,功能:传递两个时间节点,得到时间节点相差 xx 天 xx 小时 xx 分钟 xx 秒function getTimeDifference(time1,time2){let diffTime = und(Math.Time() - Time()) / 1000);var day = parseInt(diffTime / (60*60*24));var hour = parseInt(diffTime % (60*60*24) / (60*60));var minutes = parseInt(diffTime % (60*60) / 60);var seconds = diffTime % 60// 返回多个值,多个值,需要放到一个容器中 [] {}// return {// day:day,// hour:hour,// minutes:minutes,// seconds:seconds// }// 在一个对象中,如果键和值一样,可以写一个return{day,hour,minutes,seconds}}var time1 = new Date(); // 代表当前的时间var time2 = new Date(2020,1,19,10,30,00);console.log(getTimeDifference(time1,time2));</script>
结果如下:
本文发布于:2024-02-02 18:06:48,感谢您对本站的认可!
本文链接:https://www.4u4v.net/it/170686911545511.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
留言与评论(共有 0 条评论) |