IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> 【JavaScript】学习第九天(Math对象、Date对象)(倒计时、计时器) -> 正文阅读

[JavaScript知识库]【JavaScript】学习第九天(Math对象、Date对象)(倒计时、计时器)

Math 和 Date

  • Math 是 js 的一个内置对象,提供了一堆的方法帮助我们操作 数字
  • Date 是 js 的一个内置对象,提供了一堆的方法帮助我们操作 时间

Math

  • 没有什么多余的东西,就是一堆的方法来操作数字

random

  • Math.random() 这个方法是用来生成一个 0 ~ 1 之间的随机数
  • 每次执行生成的数字都不一样,但是一定是 0 ~ 1 之间的
  • 生成的数字包含 0 ,但是不包含 1
var num = Math.random()
console.log(num) // 得到一个随机数

round

  • Math.round() 是将一个小数 四舍五入 变成一个整数
var num = 10.1
console.log(Math.round(num)) // 10

var num2 = 10.6
console.log(Math.round(num2)) // 11

abs

  • Math.abs() 是返回一个数字的绝对值
var num = -10
console.log(math.abs(num)) // 10

ceil

  • Math.ceil() 是将一个小数 向上取整 得到的整数
var num = 10.1
console.log(Math.ceil(num)) // 11

var num2 = 10.9
console.log(Math.ceil(num2)) // 11

floor

  • Math.floor() 是将一个小数 向下取整 的到的整数
var num = 10.1
console.log(Math.floor(num)) // 10

var num2 = 10.9
console.log(Math.floor(num2)) // 10

max

  • Math.max() 得到的是你传入的几个数字之中最大的那个数字
console.log(Math.max(1, 2, 3, 4, 5)) // 5

min

  • Math.min() 得到的是你传入的几个数字之中最小的那个数字
console.log(Math.min(1, 2, 3, 4, 5)) // 1

pow

  • Math.pow得到你传入的对应次方值
console.log(Math.pow(2,3));//8

sqrt

  • Math.sqrt(num)对你传入的值开根号
console.log(Math.sqrt(81));//9

数字转换进制

1.toString() 方法可以在数字转成字符串的时候给出一个进制数

  • 语法: toString(你要转换的进制)
var num = 100
console.log(num.toString(2)) // 1100100
console.log(num.toString(8)) // 144
console.log(num.toString(16)) // 64

2.parseInt() 方法可以在字符串转成数字的时候把字符串当成多少进制转成十进制

  • 语法: parseInt(要转换的字符串,当作几进制来转换)
var str = 100
console.log(parseInt(str, 8)) // 64 把 100 当作一个 八进制 的数字转换成 十进制 以后得到的
console.log(parseInt(str, 16)) // 256 把 100 当作 十六进制 的数字转换成 十进制 以后得到的
console.log(parseInt(str, 2)) // 4 把 100 当作 二进制 的数字转换成 十进制 以后得到的

Date

  • js 提供的内置构造函数,专门用来获取时间的

new Date()

  • new Date() 在不传递参数的情况下是默认返回当前时间
var time = new Date()
console.log(time) // 当前时间 Thu Dec 09 2021 20:40:44 GMT+0800 (中国标准时间)
  • new Date() 在传入参数的时候,可以获取到一个你传递进去的时间
var time = new Date('2021-03-03 13:11:11')
console.log(time) // Thu Dec 09 2021 13:11:11 GMT+0800 (中国标准时间)
  • new Date() 传递的参数有多种情况

1.传递两个数字,第一个表示年,第二个表示月份

var time = new Date(2021, 00) // 月份从 0 开始计数,0 表示 1月,11 表示 12月
console.log(time) // Tue Jan 01 2021 00:00:00 GMT+0800 (中国标准时间)

2.传递三个数字,前两个不变,第三个表示该月份的第几天,从 1 到 31

var time = new Date(2021, 00, 05) 
console.log(time) // Sat Jan 05 2021 00:00:00 GMT+0800 (中国标准时间)

3.传递四个数字,前三个不变,第四个表示当天的几点,从 0 到 23

var time = new Date(2021, 00, 05, 22) 
console.log(time) // Sat Jan 05 2021 22:00:00 GMT+0800 (中国标准时间)

4.传递五个数字,前四个不变,第五个表示的是该小时的多少分钟,从 0 到 59

var time = new Date(2021, 00, 05, 22, 33) 
console.log(time) // Sat Jan 05 2021 22:33:00 GMT+0800 (中国标准时间)

5.传递六个数字,前五个不变,第六个表示该分钟的多少秒,从 0 到 59

var time = new Date(2021, 00, 05, 22, 33, 55) 
console.log(time) // Sat Jan 05 2021 22:33:55 GMT+0800 (中国标准时间)

6.传入字符串的形式

console.log(new Date('2021')) 
// Fri Jan 01 2021 08:00:00 GMT+0800 (中国标准时间)
console.log(new Date('2021-12')) 
// Wed Dec 01 2021 08:00:00 GMT+0800 (中国标准时间)
console.log(new Date('2021-12-09')) 
// Thu Dec 09 2021 08:00:00 GMT+0800 (中国标准时间)
console.log(new Date('2021-12-09 13:')) 
// Thu Dec 09 2021 13:00:00 GMT+0800 (中国标准时间)
console.log(new Date('2021-12-09 13:13:')) 
// Thu Dec 09 2021 13:13:00 GMT+0800 (中国标准时间)
console.log(new Date('2021-12-09 13:13:13')) 
// Thu Dec 09 2021 13:13:13 GMT+0800 (中国标准时间)

将日期字符串格式化成指定内容

  • 比如我们得到的时间字符串是 Thu Dec 09 2021 13:13:13 GMT+0800 (中国标准时间)
  • 我指向得到这个日期中是那一年,我们就要靠截取字符串的形式得到
  • 但是现在 js 为我们提供了一系列的方法来得到里面的指定内容

getFullYear

  • getFullYear() 方式是得到指定字符串中的哪一年
var time = new Date(2021, 12, 09, 08, 00, 22)
console.log(time.getFullYear()) // 2021

getMonth

  • getMonth() 方法是得到指定字符串中的哪一个月份
var time = new Date(2021, 12, 09, 08, 00, 22)
console.log(time.getMonth()) // 12
  • 这里要有一个注意的地方
  • 月份是从 0 开始数的
  • 0 表示 1月,1 表示 2月,依此类推

getDate

  • getDate() 方法是得到指定字符串中的哪一天
var time = new Date(2021, 12, 09, 08, 00, 22)
console.log(time.getDate()) // 09

getHours

  • getHours() 方法是得到指定字符串中的哪小时
var time = new Date(2021, 12, 09, 08, 00, 22)
console.log(time.getHours()) // 8

getMinutes

  • getMinutes() 方法是得到指定字符串中的哪分钟
var time = new Date(2021, 12, 09, 08, 00, 22)
console.log(time.getTime()) // 1641686422000

获取时间差

例子

例如:我们计算元旦的倒计时:

  1. 获取元旦的时间对象:
var date1 = new Date('2022-01-01 00:00:00');
  1. 获取当前时间对象:
var date2 = new Date();
  1. 获取毫秒差
var cha = date1.getTime() - date2.getTime();
 //获取秒
    var s = parseInt(cha / 1000 % 60); //余下了多少秒(0-59)
 // 获取分
    var m = parseInt(cha / 1000 / 60 % 60);//余下了多少分(0-59)
 // 获取小时
   var h = parseInt(cha / 1000 / 60 / 60 % 24);// 余下了多少时(0-23)

 // 获取多少天
   var d = parseInt(cha / 1000 / 60 / 60 / 24);

   console.log('还剩' + d + '天' + h + '小时' + m + '分钟' + s + '秒');
  1. 获取倒计时的功能封装成一个函数:
  2. 参数:两个日期
  3. 返回值:返回一个字符串的形式 '还剩' + d + '天' + h + '小时' + m + '分钟' + s + '秒'
function getCha(date1,date2) {
        var cha = date1.getTime() - date2.getTime();//毫秒
        //获取秒
        var s = parseInt(cha / 1000 % 60); //余下了多少秒(0-59)
        // 获取分
        var m = parseInt(cha / 1000 / 60 % 60);//余下了多少分(0-59)
        // 获取小时
        var h = parseInt(cha / 1000 / 60 / 60 % 24);// 余下了多少时(0-23)

        // 获取多少天
        var d = parseInt(cha / 1000 / 60 / 60 / 24);
        return '还剩' + d + '天' + h + '小时' + m + '分钟' + s + '秒';
    }
  1. 最后我们把结果输出就可以了
var date1 = new Date('2022-01-01 00:00:00');
    var date2 = new Date();
    document.write(getCha(date1,date2));

计时器的制作(例子)

1.计时器分为:

  • 间歇性定时器:每隔多久执行一次
  • 超时定时器:多久后执行一次(执行一次)

2.间歇性定时器:

  • 语法1:
   setInterval(function(){},毫秒为单位的时间)  
   setInterval(function(){},1000)  :1s执行一次函数体
  • 语法2:
   setInterval(fn,1000)
   function fn(){}
  • 语法3:
   setInterval("fn()",1000)
   function fn(){} //不常用
  • 语法1演示:
function getCha(date1, date2) {
        var cha = date1.getTime() - date2.getTime();//毫秒
        //获取秒
        var s = parseInt(cha / 1000 % 60); //余下了多少秒(0-59)
        // 获取分
        var m = parseInt(cha / 1000 / 60 % 60);//余下了多少分(0-59)
        // 获取小时
        var h = parseInt(cha / 1000 / 60 / 60 % 24);// 余下了多少时(0-23)

        // 进行一个补0操作
        s = s < 10 ? '0' + s : s;
        h = h < 10 ? '0' + h : h;
        m = m < 10 ? '0' + m : m;

        // 获取多少天
        var d = parseInt(cha / 1000 / 60 / 60 / 24);
        return '还剩' + d + '天' + h + '小时' + m + '分钟' + s + '秒';
    }


    var otxt = document.getElementById('txt')

    setInterval(function () {
        var date1 = new Date('2022-01-01 00:00:00');
        var date2 = new Date();
        otxt.value = getCha(date1, date2)
    }, 1000)
  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-12-10 10:58:30  更:2021-12-10 11:00:48 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 8:36:07-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码