Web API(一些记录)
Web API(一些记录)
1.注意当使用间隔函数的时候做轮播图，点点的效果，删除需要放在间隔函数内，不能在函数外面声明，在外面的话删的点就固定了，放里面就是每执行一次就再选择一次
2.i--在事件点击函数里面也是立马执行吗，不是先把函数里面的其他东西执行完，再执行i--吗？
答：是的因为i--它是独立出来的，就是按顺序直接执行。前面说的全部式子执行完在自减是说在一个式子里比如：
let i = 1
2 + i-- = o
o是等于3不是等于2，因为i--是在一个式子里面的会执行完在自减。所以console.log(i)结果是0
3.e和this
e是触发条件的对象，this是绑定的对象指向调用者。this表示绑定事件的元素，事件处理函数形参event是事件对象。这两个可以不一样比如我身上放了一个砖头，别人打我一拳，砖头碎了。那我就是this，砖头就是event，我是this我绑定了被打事件，然后砖头也就是事件对象，被打的对象。
在事件处理函数中，this指向事件源dom对象，简单说指向函数调用者
4.间隔函数i++和if的顺序
setInterval(function(){
i++
//这里必须把if判断放在i++后面，不能放在结尾，因为一旦找不到imgSrc了又会回到i++，它是不会 继续往下面走的，也就是不会执行后面的if语句
if (i >= data.length) {
i = 0
}
img.src = data[i].imgSrc
title.innerHTML = data[i].title
},1000)
5.滚动对象相关记录
// 总结
// 1.属性：scrollLeft和scrollTop；作用是被卷去的头部和左侧；也就是可以配合页面滚动来用，可读写
// 2.属性：clientWidth和clientHeight；作用是获得元素宽度和高度；说明不包含border、margin、滚动条，用于js获取元素大小，只读属性
// 3.属性：offsetWidth和offsetHeight；作用是获取元素宽度和高度；说明包含border、padding、滚动条等，只读
// 4.属性：offsetLeft和offsetTop；作用获取元素自己定位父级元素得左、上距离；说明获取元素位置的时候使用，只读属性
6.日期对象
// 2.2日期对象方法
// 因为日期对象返回的数据我们不能直接使用，所以需要转换为实际开发中常用的格式
// 1.方法：getFullYear()；作用：获得年份；说明：获取四位年份
// 2.方法：getMonth()；作用：获得月份；说明：取值为0~11
// 3.方法：getDate()；作用：获取月份中的一天；说明：不同月份取值也不相同
// 4.方法：getDay()；作用：获取星期；说明：取值为0~6
// 5.方法：getHours()；作用：获取小时；说明：取值为0~23
// 6.方法：getMinutes()；作用：获取分钟；说明：取值为0~59
// 7.方法：getSeconds()；作用：获取秒；说明：取值为0~59
7.日期对象获取
const date = new Date()
let s = date.getSeconds()
// 利用三元运算符来算
// s = s < 10 ? '0' + s : s
// 另一种方法用'对象'.padStart(指定的位数, '不够的话补充的字符串')padStart,2是需要得位数，s是对象，0是要补得东西
// 还有一个padEnd是补充在后面的
's'.padStart(2, '0')
一般在后面加个间隔函数，然后一起封装在一个函数里面，随时能用
获取时间的另外一种方式，注意这种方式只能获取到格式为年/月/日/，时间之间是:
div.innerHTML = date.toLocaleString()
8.对象修改
<h2>随机点名</h2>
const h = document.querySelector('h2')
h.classList.add('.box4')
h.title = 'fef'
h.style.cursor = 'pointer'
h.style.color = 'red'
h.innerHTML = 'wokai'
如果是img标签修改图片的时候记得，不要加style，他不是样式，是属性，比如
img.src = '图片的路径/指定的数组.img' //img这个就看数组对象里面图片的属性是什么就是什么就行了
9.星期的转换
// 根据日期Day() 0~6 返回的时星期一这种
<h1></h1>
<script>
const arr = ['星期天','星期一','星期二','星期三','星期四','星期五','星期六']
const h1 = document.querySelector('h1')
h1.innerHTML = arr[new Date().getDay()]
</script>
10.时间的转换（可以用于倒计时效果，时间戳）
// 1.通过时间戳获得的时间是毫秒，需要转换为秒在计算
// 2.转换公式
d = parseInt(总秒数/60/60/24) //计算天数
h = parseInt(总秒数/60/60%24) //计算小时
m = parseInt(总秒数/60%60) //计算分数
s = parseInt(总秒数%60) //计算当前秒数
11.DOM
三、DOM节点分类
在 HTML DOM (Document Object Model) 中 , 每一个元素都是 节点:
文档是一个文档节点。
所有的HTML元素都是元素节点。
所有 HTML 属性都是属性节点。
文本插入到 HTML 元素是文本节点。are text nodes。
注释是注释节点。
12.不同手机版本可以访问页面
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// navigator的数据类型是对象，该对象记录了浏览器自身的相关信息
// 通过userAgent检测浏览器的版本和平台
// 这个以后可以用在老板让你在安卓系统或者苹果系统的手机可以访问公司的网站，就可以用这个直接复制粘贴就可以了
// <!-- 检测 userAgent（浏览器信息） -->
!(function () { //立即执行函数前面还可以加!或者+,加了这两个就把前面的funtion(){}看成一个整体
const userAgent = navigator.userAgent
// <!-- // 验证是否为Android或iPhone -->
const android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/)
const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/)
// <!-- // 如果是Android或iPhone，则跳转至移动站点 -->
if (android || iphone) {
location.href = 'http://m.itcast.cn' }
})()
</script>
</head>
