网站开发创业,wordpress整合dplayer,网站建设怎么翻译,wordpress仿导航大全1.日期对象
2.节点操作
3.M端事件
4.JS插件
一.日期对象
实例化时间对象方法时间戳
日期对象#xff1a;用来表示时间的对象
作用#xff1a;可以得到当前系统时间
1.1 实例化
① 概念#xff1a;在代码中发现了new关键字时#xff0c;一般将这个操作称为实例化
…1.日期对象
2.节点操作
3.M端事件
4.JS插件
一.日期对象
实例化时间对象方法时间戳
日期对象用来表示时间的对象
作用可以得到当前系统时间
1.1 实例化
① 概念在代码中发现了new关键字时一般将这个操作称为实例化
② 创建一个时间对象并获取时间 获取当前时间
const date new Date()
获得指定时间
const date new Date(2022-01-05 08:28)
1.2 时间对象方法
日期对象返回的数据我们不能直接使用所以需要转换为实际开发中常用的格式 const date new Date()
console.log(date.getFullYear())
console.log(date.getMonth() 1)let h date.getHours()
let m date.getMinutes()
let s date.getSeconds()
1.3 时间戳
① 概念指的是1970年01月01日00分00秒起到现在的毫秒数是一种特殊的计量时间的方式
② 算法
将来的时间戳 - 现在的时间戳 剩余时间毫秒数剩余时间毫秒数转换为剩余时间的年月日就是倒计时时间1秒 1000毫秒 ③ 获取时间戳
使用getTime() 方法 (需要实例化)
const date new Date()
console.log(date.getTime())
简写 new Date() 无需实例化
console.log(new Date())
使用Date.now() 无需实例化 但是只能得到当前的时间戳前两种可以得到指定时间的时间戳
console.log(Date.now())
二.节点操作
DOM节点查找节点增加节点删除节点
2.1 DOM节点
① DOM节点DOM树里面的每一个内容都称为节点
② 节点类型
元素节点所有的标签比如div body属性节点所有的属性比如href文本节点: 所有的文本其他
2.2 查找节点
① 节点关系
父节点 1parentNode属性 (2返回的最近一级的父节点找不到返回为null (3) 语法节点.parentNode
const baby document.querySelector(.son)
console.log(baby.parentNode.parentNode)
子节点 1childNodes 获得所有子节点包括文本节点空格换行注释节点等 2children属性 仅获得所有元素节点返回一个伪数组 3语法节点.children
const ul document.querySelector(ul)
// 获取所有子节点
console.log(ul.children) //选择最近一级孩子 兄弟节点 (1) 下一个兄弟节点nextElementSibling 属性 2上一个兄弟节点previousElementSibling 属性
const li2 document.querySelector(ul li:nth-child(2))
console.log(li2.nextElementSibling)
console.log(li2.previousElementSibling)
2.3 增加节点
① 创建一个新节点
概念创造一个新的网页元素再添加到网页内一般先创建节点然后插入节点创建元素节点方法 document.createElement(标签名)
const div document.createElement(div)
console.log(div)
② 追加节点还需要插入到某个父元素中
插入到父元素的最后一个子元素: appendChild
const div document.createElement(div)
console.log(div)
document.body.appendChild(div)
插入到父元素的某个子元素的前面: insertBefore
const ul document.querySelector(ul)
const li document.createElement(li)
ul.insertBefore(li, ul.children[0])
2.4 克隆节点
① 语法 元素.cloneNode(布尔值)
② cloneNode 会克隆出一个跟原标签一样的元素括号中传入布尔值
如果传入的是true,则代表克隆时会包含后代节点一起克隆如果传入的是false则表示克隆时不包含后代节点默认为false ulli1/lili2/lili3/li/ulscriptconst ul document.querySelector(ul)const li1 ul.children[0].cloneNode(true)ul.appendChild(li1)/script 2.5 删除节点 ① 删除元素必须通过父元素删除 ② 语法 父元素.removeChild(要删除的元素) ③ 注意
如果不存在父子关系则删除不成功
三.M端事件
① 移动端也有自己独特的地方比如触屏事件touch,android和ios都有
② touch对象代表一个触摸点触摸点可能是一根手指也可能是一根触摸笔触屏事件可响应用户手指对屏幕或者触控板操作
③ 常见的触屏事件 const div document.querySelector(div)div.addEventListener(touchstart, function() {console.log(开始触摸)})div.addEventListener(touchmove, function() {console.log(一直触摸)})div.addEventListener(touchend, function() {console.log(停止触摸)})
四. JS插件 -- swiper
① 插件的概念就是别人写好的一些代码我们只需要复制对应的代码就可以实现对应的效果② 学习插件过程
熟悉官网了解这个插件可以完成什么需求看在线演示找到符合自己需求的demo查看基本使用流程查看API文档去配置自己的插件多个swiper同时使用的时候类名需要注意区分
swipper的 使用
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlelink relstylesheet href./css/swiper.min.cssstyle.box {width: 600px;height: 200px;background-color: pink;margin: 100px;}html, body {position: relative;height: 100%;}body {background: #eee;font-family: Helvetica Neue, Helvetica, Arial, sans-serif;font-size: 14px;color:#000;margin: 0;padding: 0;}.swiper-container {width: 100%;height: 100%;}.swiper-slide {text-align: center;font-size: 18px;background: #fff;/* Center slide text vertically */display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;}/style
/head
bodydiv classboxdiv classswiper-containerdiv classswiper-wrapperdiv classswiper-slideSlide 1/divdiv classswiper-slideSlide 2/divdiv classswiper-slideSlide 3/divdiv classswiper-slideSlide 4/divdiv classswiper-slideSlide 5/divdiv classswiper-slideSlide 6/divdiv classswiper-slideSlide 7/divdiv classswiper-slideSlide 8/divdiv classswiper-slideSlide 9/divdiv classswiper-slideSlide 10/div/div!-- Add Pagination --div classswiper-pagination/div/div /divscript src./js/swiper.min.js/scriptscriptvar swiper new Swiper(.swiper-container, {pagination: {el: .swiper-pagination,},autoplay: {delay: 1000,//1秒切换一次// 鼠标点击或触摸之后继续自动播放disableOnInteraction: false,},// 键盘keyboard: {enabled: true,onlyInViewport: true,},});/script
/body
/html
