JavaScript内置对象,时间日期获取——倒计时案例

今天又是愉快的一天,学的知识点不算太多吧,但是这些知识点都好玩啊,有趣啊。

今天主要是内置对象,我学会了之后封装了三个函数,一个获取当前时间,一个获取当前日期,
还有一个倒计时案例。

可根据目录跳转,需要的自取。
我会把js文件放置在坚果云内,不想复制代码的可直接下载,文件内都有详细的注释。

好了,下边开始正题。

点我下载
JavaScript内置对象,时间日期获取——倒计时案例_第1张图片

文章目录

    • 内置对象
    • 产生随机数
      • 猜数游戏
      • 随机点名
    • 内置Date函数
      • 获取当前的日期
      • 获取当前时间
      • 产生倒计时效果

内置对象

js中,对象分自定义对象,内置对象,浏览器对象。

自定义对象: 我们自己创建的对象。

内置对象:js语言自带的对象,提供过了一些常用或是基本而必要的功能(属性和方法)。

浏览器对象:大概是DOM 和BOM对象吧,我还没学。

今天主要学习了内置对象,下边的几个案例都是内置对象。

函数名就是文件的名字,可以对照着照js文件。

产生随机数

学了随机数,下边是用随机数写的一个小游戏。

猜数游戏

function getRandom(min, max) {
     
    return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值,含最小值
}

var random = getRandom(1, 100);
var count = 0;
while(true) {
     
    var num = prompt("猜数游戏,请输入1~100的数字");
    count++;
    if (num > random) {
     
        alert("你输入的数字大了一点点ei~");
    } else if (num < random) {
     
        alert("你输入的数字小了一丢丢哦~")
    } else {
     
        alert("恭喜你,答对了");
        if (count < 10) {
     
            alert("哇!你只用了" + count + "次就猜对了,你太聪明了");
        } else {
     
            alert("你好笨哦~用了" + count + "次才猜到!");
        }
        break;
    }
}

这个是学生都有恨又爱的环节,随机点名。

随机点名

// 产生随机值
function getRandom(min, max) {
     
    return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值,含最小值 
}

// 随机点名
var arr = ["张三", "李四", "小明", "小红", "小白", "小狗"];
// 会随机返回一个数字,把这个返回的数字作为数组的下标,形成随机点名
console.log(arr[getRandom(0, arr.length - 1)]);

内置Date函数

获取当前的日期

function getDate() {
     
    var date = new Date();
    var year = date.getFullYear(); // 年
    var month = date.getMonth() + 1; // 月 返回0~11, 所以取得的月份需要+1
    month = month < 10 ? '0' + month : month; // 小于10 在前边补0
    var dates = date.getDate(); // 日
    dates = dates < 10 ? '0' + dates : dates;
    var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
    var day = date.getDay(); // 星期

    // 返回现在的时间
    return year + '年' + month + '月' + dates + '日 ' + arr[day];
    // console.log(year + '年' + month + '月' + dates + '日 ' + arr[day]);
}

console.log(getDate());

获取当前时间

function getTimer() {
     
    var time = new Date();

    var h = time.getHours(); // 小时
    h = h < 10 ? '0' + h : h;  // 小于10在前边补0
    var m = time.getMinutes(); // 分钟
    m = m < 10 ? '0' + m : m;
    var s = time.getSeconds(); // 秒
    s = s < 10 ? '0' + s : s;

    return h + ':' + m + ':' + s;
}

console.log(getTimer());

产生倒计时效果

function countDown(time) {
     
    var nowTime = +new Date(); // 当前时间的毫秒数
    var inputTime = +new Date(time); // 用户输入时间的毫秒数
    var times = (inputTime - nowTime) / 1000; // 当前时间到输入时间的秒数

    var d = parseInt(times / 60 / 60 / 24); // 天
    d = d < 10 ? '0' + d : d;
    var h = parseInt(times / 60 / 60 % 24); // 时
    h = h < 10 ? '0' + h : h;
    var m = parseInt(times / 60 % 60); // 分
    m = m < 10 ? '0' + m : m;
    var s = parseInt(times % 60); // 秒
    s = s < 10 ? '0' + s : s;

    return d + '天' + h + '时' + m + '钟' + s + '秒'; // 返回倒计时
}

console.log(countDown('2021-5-28 0:0:0'));

你可能感兴趣的:(前端,经验分享,文章,javascript,html5,程序人生)