【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)

Guess you like

Origin blog.csdn.net/wu12378900/article/details/121842983