JavaScript内置对象

作者: t遇见 | 来源:发表于2022-10-10 17:42 被阅读0次

网络编程(十八） JavaScript（8）
1.4JavaScript 弹出框与内置对象
JS-day05-5.3
JavaScript（Day02）
js内置对象
11.JavaScript内置对象（Math对象、日期对象、数组
第九章 Web应用开发技术 JavaScript进阶和AJAX基
关于构造函数Object属性和方法总结
JS基础---06 内置对象
JavaScript三大对象及内置math对象

一、字符串
（1）字符串声明
JavaScript语法中通过String表示字符串，语法中一般显示为单引号或者双引号包含的一串字符；声明方式一般有两种：
① 字面量（常见）

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

② 对象创建

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

（2）字符串内存分析

函数	描述
`charAt()`	查询某个索引的字符
`charCodeAt()`	查询某个字符的`ascii`码
`includes(s)`	查询是否包含某个字符串`s`
`indexOf(s)`	查询某个字符第一次出现的索引
`lastIndexOf(s)`	查询某个字符最后一次出现的索引
`match(s)`	查询某个字符串中是否包含目标字符串(开头位置)
`search(s)`	查询某个字符串中是否包含目标字符串(所有位置)
`startsWith(s)`	查询某个字符串是否以指定字符开头
`endsWith(s)`	查询某个字符串是否以指定字符结尾

`toUpperCase()`	将字符串所有字符转换成大写
`toLowerCase()`	将字符串所有字符转换成小写

`replace()`	替换字符串中的数据
`repalceAll()`	替换字符串中所有匹配的数据

`slice()`	截取字符串
`substr(start, cnt)`	截取字符串
`substring(start, end)`	截取字符串

`trim()`	剔除字符串两侧空格
`trimLeft() / trimStart()`	剔除字符串左侧空格
`trimRight() / trimEnd()`	剔除字符串右侧空格

`split()`	使用指定字符拆分字符串
`padStart()`	字符串位数补全`ES6`
`padEnd()`	字符串位数补全`ES6`

二、数学对象

属性	函数	是否常用
`Math.E`	自然对数的底数，常量，`2.718`	基本不用
`Math.LG10`	10的对数	基本不用
`Math.LN2`	2的对数<br />`Math.LOG10E 、Math.LOG2E`..	基本不用
`Math.PI`	圆周率，常量，`3.14159`	基本不用
`Math.abs()`	`abs: absolute`，表示获取一个数据的绝对值
`Math.acos()`	三角函数，反余弦值	基本不用
`Math.asin()`	三角函数，反正弦值	基本不用
`Math.atan()`	三角函数，反正切值	基本不用
`Math.cos()`	三角函数，余弦值	基本不用
`Math.sin()`	三角函数，正弦值	基本不用
`Math.tan()`	三角函数，正切值	基本不用

`Math.floor()`	向下取整，如`1.2 -> 1; 1.6-> 1; 0.5 -> 0`	常用
`Math.ceil()`	向上取整，如`1.2 -> 2; 1.6 -> 2; 0.5 -> 1`	常用
`Math.trunc()`	截断小数部分，如`1.2-> 1; 1.6-> 1, 0.5 -> 0`	常用
`Math.round()`	四舍五入，如`1.2 -> 1; 1.6 -> 2; 0.5 -> 1`	常用

`Math.max()`	获取一系列数据中的最大值	常用
`Math.min()`	获取一系列数据中的最小值	常用

`Math.pow(x, y)`	获取x数据的y次方，指数运算
`Math.sqrt(x)`	获取x数据的平方根
`Math.random()`	获取一个0~1之间的随机数	常用

三、日期对象
（1）创建日期对象
JavaScript针对日期时间，提供了一个内置对象Date，主要用于日期和时间的处理
创建一个当前日期对象：

var date = new Date()

创建一个指定的日期对象:

var date = new Date('2022-10-1 00:00:00')

函数	描述
`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年到现在的毫秒数
`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>尊敬的管理员，欢迎访问本系统，现在时间是: <span id="time">xxxx-xx-xx xx:xx:xx</span></div>
  <script>
    // window.onload ：等待网页中所有标签加载完成后，再执行事件中的代码
    // 网页加载事件：保障代码运行时，网页标签已经加载完成
    window.onload = function () {
      // 获取当前时间的函数
      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>

四、延时函数
JavaScript语法中针对需要经过一定时间再去执行的函数、或者间隔一定时间去执行的函数，提供了两种功能性延时函数：

setTimeout(fn, time)：代码运行到该函数，等待time毫秒后执行一次fn函数
- clearTimeout() 清除延时函数
setInterval(fn, time)：代码运行到该函数，每间隔time毫秒就会执行一次fn函数
- clearInterval() 清除即使函数
  （1）基本语法
  ① setTimeout()

<body>
  <div id="msg">普天之下莫非王土</div>
  <button id="btn">点击测试setTimetout</button>
  <button id="cancel">清除延时函数</button>
  <script>
    // 1、setTimeout
    var _msg = document.getElementById("msg")
    var _btn = document.getElementById("btn")
    var _cancel = document.getElementById("cancel")
    var time;
    // 点击添加延时延时
    _btn.onclick = function() {
      // 延时函数：2S后执行
      time = setTimeout(function() {
        _msg.innerText = "率土之滨莫非王臣"
      }, 5000)
    }
    // 点击取消延时函数
    _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执行了...")
  }, 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毫秒，执行一次倒计时函数
          var r = getTime()
          if(r){
            _show.innerText = r[0] + "天 " + r[1] + "时 " + r[2] + "分 " + r[3] + "秒 " + r[4]
          }
          
        }, 80)

        // getTime()
      }
      // 封装：获取倒计时时间的函数
      function getTime() {
        // 2-1 计算时差
        var now = new Date()
        var tgt = new Date(_target.value)
        console.log(now, tgt, "倒计时需要的时间数据")
        var distance = tgt - now
        // 两个时间相减，得到这两个日期之间的毫秒数
        // console.log(distance, " 时间差")
        if(distance <= 0) {
          alert("选择的目标时间必须大于当前时间")
          clearInterval(time)
          return
        }
        // 2-2 计算 毫秒数-> ?天 ?时 ?分 ?:?:?:?
        var d = Math.floor(distance /( 1000*60*60*24))
        console.log(d, "剩余天数")

        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>

网络编程(十八） JavaScript（8）
一、 JavaScript内置对象 1.1 内置对象 JavaScript 中的对象分为3种：自定义对象、内置对...
1.4JavaScript 弹出框与内置对象
消息框 JavaScript内置对象JavaScript对象 :1. js内置对象、js事件对象、3.BOM浏览器...
JS-day05-5.3
内置对象 JavaScript中的对象分为3种：内置对象、浏览器对象、自定义对象 JavaScript 提供多个内...
JavaScript（Day02）
1、JavaScript数组 2、JavaScript对象的使用 3、JavaScript内置对象
js内置对象
1 - 内置对象 1.1 内置对象 JavaScript 中的对象分为3种：自定义对象、内置对...
11.JavaScript内置对象（Math对象、日期对象、数组
1 - 内置对象 1.1 内置对象 JavaScript 中的对象分为3种：自定义对象、内置对...
第九章 Web应用开发技术 JavaScript进阶和AJAX基
JavaScript内置对象： 1、JavaScript语言中有三种内置对象，分别是浏览器对象BOM、文档对象D...
关于构造函数Object属性和方法总结
@(JavaScript基础) JavaScript内置对象: Object Object对象（或Object构造...
JS基础---06 内置对象
JavaScript基础 1 - 内置对象 1.1 内置对象 1.2 查文档 1.3 Math对象属性、方法名功...
JavaScript三大对象及内置math对象
JavaScript三大对象 JavaScript中提供三种自带的对象, 分别是"本地对象"/"内置对象"/"宿主...