JS基础（四）

WangYunN
212 阅读4分钟

Date类型 在浏览器中处理时间 日期的类型

  1. 创建一个Date 实例 var a = new Date（）
  2. Date的实例方法
    • getFullYear() 获取4位年份 返回四位年份
var year = date.getFullYear();
console.log(year);

 - getMonth() 获取月份 返回0-11 的数字 0代表一月份
 - getDay() 获取星期几
 - getDate() 获取 今天是几号 
 - getHours() 获取当前几点的小时数
 - getMintutes() 获取分钟数
 - getSeconds() 获取秒数
 - getMilliseconds() 获取毫秒数
 - getTime() 获取时间戳 指当前时刻距离1970年0时0分0秒的毫秒数
  1. 定时器
    • window.setTimeout(function(){时间到了要执行的代码},时间间隔) 设置时间间隔 每隔多长时间执行一次
    • window.setInterval(function(){时间到了要执行的代码},时间间隔) 每隔时间间隔执行一次
  2. 清除定时器 停止定时器
 - clearTimeout(定时器ID) 清除setTimeout定时器
 - clearInterval(定时器ID) 清除setInterval定时器
  1. 倒计时 原理：计算从当前时间到目标时间的时间差，然后把这个时间差换算成多少小时，多少分钟，多少秒；
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    *{
        margin: 0;
        padding: 0;
    }
    #timeBox{
        margin: 1px auto;
        height: 200px;
        widows: 300px;
        line-height: 100px;
        font-size: 25px;
        text-align: center;
    }
    
    </style>
</head>
<body>
   <div id = 'timeBox'>--:--:--</div> 
</body>
</html>
<script>
    // 原理：计算从当前时间到目标时间的时间差(毫秒)，然后把这个时间差换算成多少小时，多少分钟，多少秒；

var timeBox = document.getElementById('timeBox');
function countDate() {
    var curDate = new Date();  //获取当前时间
    var curTime = curDate.getTime();  //获取时间戳
    var targetDate = new Date('2019-09-13 12:52:23');
    var targetTime = targetDate.getTime();
    var time1 = targetTime - curTime;
    
    if(time1 <= 0){
        clearInterval(timerId);
        timeBox.innerHTML = '00:00:00';
        return;
    }
    // 小时
    var h = Math.floor(time1/(60*60*1000));
    // 分钟
    var hm = h*60*60*1000  //小时占用的毫秒数
    var m = Math.floor((time1- hm) / (1000 * 60));  // 用总毫秒时间差 - 小时占用的毫秒数 再除以 一分钟的毫秒数

     //秒
    var ms = m*1000*60
    var s= Math.floor((time1 - hm - ms) / 1000);

     
    h = addZero(h);
    m = addZero(m);
    s = addZero(s);
    timeBox.innerHTML = `${h}:${m}:${s}`
}
function addZero(num) {
    return num < 10 ? '0' + num : num
}
countDate();
var timerId = setInterval(countDate, 1000);

</script>

排序

  1. 冒泡排序 数组间相邻的两个直接相互比较 哪个大哪个在下面
  2. 快速排序 将数组一分为二 left right 再去中间项与其他作比较 大的在右边 小的在左边 知道只剩一项或者为空 结束
  3. 插入排序 假设第一项为最小项 从第二项开始 和前面的项进行比较 大的放在后面

js中获取DOM的方法

  1. document.getElementById() 根据 id 获取 dom 元素对象 获取不到返回null ID名相同只获取第一个
  2. context.getElementsByTagName('标签名') context不是固定的
  3. context.getElementsByClassName() 在上下文中，根据元素 class 名获取元素集合 获取不到返回空集合
  4. document.getElementsByName（name属性） 通过 name 属性获取元素对象，一般用于表单元素集合
  5. document.documentElement 获取 html 元素对象
  6. document.body 获取 body 元素对象
  7. 根据选择器获取（可以在移动端使用，在PC端有兼容性问题）
    • context.querySelector(css选择器) 获取一个
    • context.querySelectorAll(css选择器) 获取所有

获取浏览器可视窗口的宽度和高度

var winW = document.documentElement.clientWidth || document.body.clientWidth; var winH = document.documentElement.clientHeight || document.body.clientHeight;

节点属性

  1. childNodes 获取当前元素节点的所有子节点，属性值是集合
  2. children: 获取当前元素的所有元素子节点，属性值是集合
  3. irstChild 获取当前元素的第一个子节点
  4. firstElementChild 获取当前元素的第一个元素子节点
  5. lastChild 获取当前元素的最后一个子节点
  6. lastElementChild 获取当前元素的最后一个元素子节点
  7. parentNode: 获取当前元素的父亲节点，属性值是对象
  8. previousSibling获取上一个哥哥节点
  9. previousElementSibling 获取上一个元素哥哥节点
  10. nextSibling 获取下一个弟弟节点
  11. nextElementSibling 获取下一个元素弟弟节点

动态操作DOM

  1. 动态创建DOM元素对象 document.createElement(html标签名)
  2. appendChild（元素对象）向元素容器的末尾添加一个元素
  3. 父级容器.removeChild()
  4. insertBefor（old ,new）e 把一个元素插入到指定容器中某一个元素标签之前
  5. cloneNode(布尔值) 把一个节点进行克隆 参数：true表示深度克隆，把当前节点的子孙节点都克隆；false表示只克隆当前节点

属性操作

  1. setAttribute(attr(属性名 ),value（属性值）) 给当前元素设置 html 行内属性
  2. getAttribute(attr) 获取当前 html 某个行内属性的属性值
  3. removeAttribute(attr) 删除指定的属性
avatar
文章
阅读
粉丝