前端学习小白打卡13

最新推荐文章于 2024-09-16 22:49:41 发布

白潏

最新推荐文章于 2024-09-16 22:49:41 发布

阅读量79

点赞数

分类专栏：前端文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/qq_65719034/article/details/132675023

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

日期对象
日期对象：用来表示时间的对象
作用：可以得到当前系统时间

实例化
new 关键字 ---实例化
const date =new Date()

日期对象方法
getFullYear() 获得4位年份
getMonth() 获得月份0-11
getDate() 获取月份的每一天
getDay() 获取星期0-6 星期天是0
getHours() 获取小时0-23
getMinutes() 获取分钟 0-59
getSeconds() 获取秒 0-59

时间戳

使用场景：计算倒计时效果，前面方法无法直接计算，需要借住时间戳完成
时间戳：是指从1970年01月01日00时00分00秒至现在的毫秒数，是一种特殊的计量时间的方式
算法：
将来的时间戳-现在的时间戳=剩余时间毫秒数

1秒=1000毫秒

3种获得时间戳的方法
const date=new Date()
console.log(date.getTime())//必须实例化

console.log(+new Date())

console.log(Date.now())//只能得到当前的时间戳，前面2种可以返回指定时间的时间戳

节点操作
DOM节点：DOM树里每一个内容都称之节点
节点类型：
元素节点：
1 所有的标签，body，div
2 html是根节点
属性节点：
所有的属性比如href
文本节点：
所有的文本
其他

查找节点
节点关系：针对的找亲戚返回的都是对象
父节点子节点兄弟节点
父节点查找：
返回最近一级的父节点，找不到返回NULL
子元素.parentNode

<div class="cd">
<p class="clock">

</p>
</div>
const cl=document.querySelector('.clock')
console.log(cl.parentNode)

子节点查找：
childNodes：获得所有子节点，包括文本节点（空格，换行），注释节点
children：仅获得所有元素节点，返回的还是一个伪数组
父元素.children
<ul>
<li>
<p>sdasdas</p>
</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
const ul=document.querySelector('ul')
console.log(ul.children)
兄弟节点:
nextElementSibling:下一个
previousElementSibling：下一个
const li=document.querySelector('ul li:nth-child(2)')
console.log(li.nextElementSibling)
console.log(li.previousElementSibling)

增加节点
很多情况下，我们需要在页面中增加元素
比如，点击发布按钮，可以新增一条信息
一般情况下，我们新增节点，按照如下操作
创建一个新的节点
把创建的新的节点放入到指定的元素内部

创建节点
创造出一个新的网页元素，再添加到网页内，一般先创建节点，然后插入节点
创建节点方法：
document.createElement('标签名')

追加节点
想要看到创建的，就得插入到某个父元素之间
插入到父元素的最后一个子元素
父元素.appenChild(要插入的元素)
插入到父元素中某一个子元素的前面
父元素.insertBefore(要插入的元素，在哪个元素前面)
const div=document.createElement('div')
document.body.appendChild(div)
const li=document.createElement('li')
div.appendChild(li)
div.insertBefore(li,div.children[0])

增加节点：
特殊情况下，我们新增节点
复制一个原有的节点
把复制的节点放入到指定的元素内部

克隆节点：
元素.cloneNode(布尔值)
若为TRue，则代表克隆是包含后代节点一起克隆
若为false,则代表克隆时不包含后代节点
默认为false

改节点 innerHTML

删除节点
若一个节点在页面中已不需要时，可以删除它
在js原生DOM操作中，要删除元素，必须通过父元素删除
语法：父元素.removeChild(要删除的元素)
注：
若不存在父子关系则删除不成功
删除节点和隐藏节点有区别，隐藏节点还存在，删除就是从HTml中删除节点
ul.removeChild(ul.children[0])

M端事件
移动端有独特的地方，比如触碰事件touch
touch对象代表一个触摸点，
触屏touch事件
touchstart 手指触摸到一个DOM元素时触发
touchmove 手指在一个DOM元素上滑动触发
touchend 手指从一个DOM元素上移开时触发

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/my.css">
    <title>Document</title>
</head>
<body>  
    <div></div>
    <div class="cd">
        <p class="clock">
            
        </p>
    </div>
    <ul>
        <li>
            <p>sdasdas</p>
        </li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <script src="./js/my.js">
    </script>
</body>
</html>

css

div{
    width: 300px;
    height: 300px;
    border: 1px solid black;
}

// const date=new Date()
// console.log(date)
// // 指定时间
// const date1=new Date('2022-5-1 08:30:00')
// console.log(date1)

const div=document.querySelector('div')
function getMydate(){
    const date=new Date()
    let h=date.getHours()
    h=h<10?'0'+h:h
    let s=date.getMinutes()
    s=s<10?'0'+s:s
    let m=date.getSeconds()
    m=m<10?'0'+m:m
    return `今天是${date.getFullYear()}年${date.getMonth()}月${date.getDate()}号 ${h}:${s}:${m}`
}
// 定时器
div.innerHTML=getMydate()
setInterval(function(){
    div.innerHTML=getMydate()
},1000)

//简化 
// const date=new Date()
// div.innerHTML=date.toLocaleDateString()
// div.innerHTML=date.toLocaleString()
const now=+new Date()
const last=+new Date('2020-5-1 18:30:00')
// 转换秒
const count=(last-now)/1000
let d=parseInt(count/60/60/24)//小时
d=d<10?'0'+d:d
let h=parseInt(count/60/60%24)//小时
h=h<10?'0'+h:h
let m=parseInt(count/60%60)//小时
m=m<10?'0'+m:m
let s=parseInt(count%60)//小时
s=s<10?'0'+s:s

// const div=document.createElement('div')
// document.body.appendChild(div)
// const li=document.createElement('li')
// div.appendChild(li)
// div.insertBefore(li,div.children[0])

const ul=document.createElement('ul')
const li1=ul.children[0].cloneNode(true)
ul.appendChild(li1)
ul.removeChild(ul.children[0])