JavaScript內置對象

一、字符串
（1） 字符串聲明
JavaScript語法中通過String表示字符串，語法中一般顯示為單引號或者雙引號包含的一串字符；聲明方式一般有兩種：
① 字面量（常見）

// 1、字面量方式
var  techVersion = "V2022.2"  // 'V2022.2'
console.log( techVersion, "字面量")

② 對象創(chuàng)建

// 2、對象方式
var techInfo = new String("JavaScript")
console.log(techInfo, "對象")

（2） 字符串內存分析

函數(shù) 描述
charAt() 查詢某個索引的字符
charCodeAt() 查詢某個字符的ascii碼
includes(s) 查詢是否包含某個字符串s
indexOf(s) 查詢某個字符第一次出現(xiàn)的索引
lastIndexOf(s) 查詢某個字符最后一次出現(xiàn)的索引
match(s) 查詢某個字符串中是否包含目標字符串(開頭位置)
search(s) 查詢某個字符串中是否包含目標字符串(所有位置)
startsWith(s) 查詢某個字符串是否以指定字符開頭
endsWith(s) 查詢某個字符串是否以指定字符結尾
toUpperCase() 將字符串所有字符轉換成大寫
toLowerCase() 將字符串所有字符轉換成小寫
replace() 替換字符串中的數(shù)據(jù)
repalceAll() 替換字符串中所有匹配的數(shù)據(jù)
slice() 截取字符串
substr(start, cnt) 截取字符串
substring(start, end) 截取字符串
trim() 剔除字符串兩側空格
trimLeft() / trimStart() 剔除字符串左側空格
trimRight() / trimEnd() 剔除字符串右側空格
split() 使用指定字符拆分字符串
padStart() 字符串位數(shù)補全ES6
padEnd() 字符串位數(shù)補全ES6

二、數(shù)學對象

屬性 函數(shù) 是否常用
Math.E 自然對數(shù)的底數(shù)，常量，2.718 基本不用
Math.LG10 10的對數(shù) 基本不用
Math.LN2 2的對數(shù)<br />Math.LOG10E 、Math.LOG2E.. 基本不用
Math.PI 圓周率，常量，3.14159 基本不用
Math.abs() abs: absolute，表示獲取一個數(shù)據(jù)的絕對值
Math.acos() 三角函數(shù)，反余弦值 基本不用
Math.asin() 三角函數(shù)，反正弦值 基本不用
Math.atan() 三角函數(shù)，反正切值 基本不用
Math.cos() 三角函數(shù)，余弦值 基本不用
Math.sin() 三角函數(shù)，正弦值 基本不用
Math.tan() 三角函數(shù)，正切值 基本不用
Math.floor() 向下取整，如1.2 -> 1; 1.6-> 1; 0.5 -> 0 常用
Math.ceil() 向上取整，如1.2 -> 2; 1.6 -> 2; 0.5 -> 1 常用
Math.trunc() 截斷小數(shù)部分，如1.2-> 1; 1.6-> 1, 0.5 -> 0 常用
Math.round() 四舍五入，如1.2 -> 1; 1.6 -> 2; 0.5 -> 1 常用
Math.max() 獲取一系列數(shù)據(jù)中的最大值 常用
Math.min() 獲取一系列數(shù)據(jù)中的最小值 常用
Math.pow(x, y) 獲取x數(shù)據(jù)的y次方，指數(shù)運算
Math.sqrt(x) 獲取x數(shù)據(jù)的平方根
Math.random() 獲取一個0~1之間的隨機數(shù) 常用

三、日期對象
（1） 創(chuàng)建日期對象
JavaScript針對日期時間，提供了一個內置對象Date，主要用于日期和時間的處理
創(chuàng)建一個當前日期對象：

var date = new Date()

創(chuàng)建一個指定的日期對象:

var date = new Date('2022-10-1 00:00:00')
函數(shù) 描述
date.getFullYear() 獲取年份
date.getMonth() 獲取月份，月份以0~11表示
date.getDate() 獲取一個月第幾天
date.getDay() 獲取一周第幾天
date.getHours() 獲取小時
date.getMinutes() 獲取分鐘
date.getSeconds() 獲取秒鐘
date.getMilliSeconds() 獲取毫秒
date.getTime() 獲取1970/1/1 0:0:0年到現(xiàn)在的毫秒數(shù)
date.setFullYear() 設置年份
date.setMonth() 設置月份

（2）日期時間展示案例

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div>尊敬的管理員，歡迎訪問本系統(tǒng)，現(xiàn)在時間是: <span id="time">xxxx-xx-xx xx:xx:xx</span></div>
  <script>
    // window.onload ：等待網(wǎng)頁中所有標簽加載完成后，再執(zhí)行事件中的代碼
    // 網(wǎng)頁加載事件：保障代碼運行時，網(wǎng)頁標簽已經(jīng)加載完成
    window.onload = function () {
      // 獲取當前時間的函數(shù)
      function getCurrentTime() {
        // 1、獲取當前時間
        var date = new Date()  // var date = Date.now()
        // 2、拼接時間
        var t = date.getFullYear() + "年"
          + (date.getMonth() + 1) + "月"
          + date.getDate() + "日 "
          + date.getHours() + ":"
          + date.getMinutes() + ":"
          + date.getSeconds()
        return t
      }
      // 3、填寫到頁面中
      var _time = document.getElementById("time")
      _time.innerText = getCurrentTime()
    }
  </script>
</body>
</html>

四、延時函數(shù)
JavaScript語法中針對需要經(jīng)過一定時間再去執(zhí)行的函數(shù)、或者間隔一定時間去執(zhí)行的函數(shù)，提供了兩種功能性延時函數(shù)：

  • setTimeout(fn, time)：代碼運行到該函數(shù)，等待time毫秒后執(zhí)行一次fn函數(shù)
    • clearTimeout() 清除延時函數(shù)
  • setInterval(fn, time)：代碼運行到該函數(shù)，每間隔time毫秒就會執(zhí)行一次fn函數(shù)
    • clearInterval() 清除即使函數(shù)
      （1） 基本語法
      ① setTimeout() 
<body>
  <div id="msg">普天之下莫非王土</div>
  <button id="btn">點擊測試setTimetout</button>
  <button id="cancel">清除延時函數(shù)</button>
  <script>
    // 1、setTimeout
    var _msg = document.getElementById("msg")
    var _btn = document.getElementById("btn")
    var _cancel = document.getElementById("cancel")
    var time;
    // 點擊添加延時延時
    _btn.onclick = function() {
      // 延時函數(shù)：2S后執(zhí)行
      time = setTimeout(function() {
        _msg.innerText = "率土之濱莫非王臣"
      }, 5000)
    }
    // 點擊取消延時函數(shù)
    _cancel.onclick = function() {
      clearTimeout(time)
    }
  </script>
</body>

② setInterval()

// 2、setInterval
var _start = document.getElementById("start")
var _end = document.getElementById("end")
var inter;
_start.onclick = function() {
  inter = setInterval(function() {
    console.log("setInterval執(zhí)行了...")
  }, 1000)
}
_end.onclick = function() {
  clearInterval

五、特效-倒計時

image.png

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  請輸入目標時間:
  <input type="text" id="target">
  <button id="btn">開始倒計時</button>
  <div id="show">00 天 00 時 00 分 000</div>
  <script>
    window.onload = function() {
      // 1、獲取要操作的標簽對象 | DOM對象
      var _btn = document.getElementById("btn")
      var _show = document.getElementById("show")
      var _target = document.getElementById("target")
      // 2、單擊按鈕
      var time;
      _btn.onclick = function() {
       
        time = setInterval( function() {
          // 間隔80毫秒，執(zhí)行一次倒計時函數(shù)
          var r = getTime()
          if(r){
            _show.innerText = r[0] + "天 " + r[1] + "時 " + r[2] + "分 " + r[3] + "秒 " + r[4]
          }
          
        }, 80)

        // getTime()
      }
      // 封裝：獲取倒計時時間的函數(shù)
      function getTime() {
        // 2-1 計算時差
        var now = new Date()
        var tgt = new Date(_target.value)
        console.log(now, tgt, "倒計時需要的時間數(shù)據(jù)")
        var distance = tgt - now
        // 兩個時間相減，得到這兩個日期之間的毫秒數(shù)
        // console.log(distance, " 時間差")
        if(distance <= 0) {
          alert("選擇的目標時間必須大于當前時間")
          clearInterval(time)
          return
        }
        // 2-2 計算 毫秒數(shù)-> ?天 ?時 ?分 ?:?:?:?
        var d = Math.floor(distance /( 1000*60*60*24))
        console.log(d, "剩余天數(shù)")

        var h = Math.floor(distance / (1000 * 60 * 60) % 24)
        console.log(h, "剩余小時")

        var m = Math.floor(distance / (1000 * 60) % 60)
        console.log(m, "剩余分鐘")

        var s = Math.floor(distance / (1000) % 60)
        console.log(s, "剩余秒鐘")

        var ms = distance % 1000
        console.log(ms, "剩余毫秒")

        return [d.toString().padStart(2, 0), 
                h.toString().padStart(2, 0), 
                m.toString().padStart(2, 0), 
                s.toString().padStart(2, 0),
                ms.toString().padStart(3, 0)]
      }
    }
  </script>
</body>
</html>
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容