JS补充知识点

阅读: 评论:0

JS补充知识点

JS补充知识点

文章目录

  • 一、数据渲染
  • 二、JSON数据
    • 1.写一个json数据
  • 三、JSON文件
  • 四、本地缓存
    • 1.localStroage
    • 2.sessionStroage
  • 五、数学方法
    • 4.floor()
    • 5.pow()
    • 6.sqrt()
    • 7.abs()
    • 8.max()
    • 9.min()
    • 10.PI
  • 六、日期对象
    • 1.创建一个指定日期的时间对象:
    • 2.日期对象中的方法:
    • 3.设置时间对象的信息:
  • 七、获取时间差
    • 方式一
    • 方式二


一、数据渲染

目的:通过一个数据在页面上渲染出一个表格。

<!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数据

JSON对象和JS对象有什么区别:JSON中的键,必须使用双引号包起来。

1.写一个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>

结果如下:

三、JSON文件

四、本地缓存

本地缓存:把一些数据缓存到浏览器的本地。
方案:
1)localStroage
永久缓存 数据一辈子都在,除非你手动删除
2)sessionStorage
临时缓存 当浏览器关闭,再打开浏览器,数据就没了

        共同点:都是只能存储字符串,如果你是JSON对象,也需要把JSON对象转成JSON字符串来存储

1.localStroage

存: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>

2.sessionStroage

存:sessionStroage.setItem(“键”,“值”); 设置了重复的键,相当于修改
取&#Item(“键”); 根据键,来获取值,如果没有,得到null
删&#veItem(“键”); 根据键,删除数据
清空:sessionStroage.clear() 清空所有的数据

五、数学方法

数学中的方法:
在JS中,提供了一个内置对象,叫Math,存储了一些操作数字的方法
Math是特殊的对象,叫单体内置对象,不需要new,在JS中就这一个。

生成一个随机数,0~1 包含0 不包含1

对一个数字进行四舍五入 und(2.9)==>3

向上取整 il(3.1) ==>4

4.floor()

向下取整 il(3.9)==>3

5.pow()

数据取幂后的结果

6.sqrt()

数字的算术平方根

7.abs()

数字的绝对值

8.max()

取N个数中的最大值

9.min()

取N个数中的最小值

10.PI

代表数学中的π


	<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)参数可以是数字第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>

结果如下:

2.日期对象中的方法:

  • getFullYear()
  • getMonth() 0表示1月
  • getDate() 获取日
  • getHours()
  • getMinutes()
  • getSeconds()
  • getMillisecondds()
  • getDay() 获取星期
  • getTime() 获取时间戳 格林威治时间:1970年1月1日(计算机元年) 0点0分0秒 距离现在的毫秒数
    例:
<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>

结果如下:

3.设置时间对象的信息:

  • setFullYear()
  • setMonth() 0表示1月
  • setDate()
  • setHours()
  • setMinutes()
  • setSecond()
  • setMilsecond()

例:

    <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小时内删除。

标签:知识点   JS
留言与评论(共有 0 条评论)
   
验证码:

Copyright ©2019-2022 Comsenz Inc.Powered by ©

网站地图1 网站地图2 网站地图3 网站地图4 网站地图5 网站地图6 网站地图7 网站地图8 网站地图9 网站地图10 网站地图11 网站地图12 网站地图13 网站地图14 网站地图15 网站地图16 网站地图17 网站地图18 网站地图19 网站地图20 网站地图21 网站地图22/a> 网站地图23