【JS】Day08

GreatWillSSS

已于 2022-11-04 13:05:57 修改

阅读量78

点赞数

分类专栏：二阶段文章标签： html5

于 2022-11-03 19:41:19 首次发布

本文链接：https://blog.csdn.net/qq_62417130/article/details/127672731

版权

二阶段专栏收录该内容

34 篇文章 0 订阅

订阅专栏

学习内容

Math
猜拳游戏
猜数字
随机颜色
随机验证码
扁平化数组
计时器
如何创建日期对象
操作日期对象
创建日期对象
异步执行机制

Math

//圆周率
console.log(Math.PI);
 
//求绝对值
console.log(Math.abs(-4));
 
//求四舍五入
console.log(Math.round(4.5)); //5
console.log(Math.round(4.4)); //4
console.log(Math.round(-4.5)); //-4
console.log(Math.round(-4.50001)); // -5
console.log(Math.round(-4.6)); // -5
 
//向上取整
console.log(Math.ceil(4.1)); // 5
console.log(Math.ceil(4.9)); //5
console.log(Math.ceil(-4.1)); //-4
console.log(Math.ceil(-4.9)); // -4
 
//向下取整
console.log(Math.floor(4.1)); // 4
console.log(Math.floor(4.9)); //4
console.log(Math.floor(-4.1)); //-5
console.log(Math.floor(-4.9)); // -5
 
//最大值 最小值
//... 展开运算符
var arr = [4,3,2,5,3];
console.log(Math.max.apply(null,arr));
console.log(Math.min(... arr));
 
console.log(Math.pow(2,32));
console.log(Math.pow(2,64));
console.log(Math.floor(Math.random() * 10)); //0~9
console.log(Math.ceil(Math.random() * 10)); //0~10
console.log(Math.round(Math.random() * 10)); //0~10
//1~10
console.log(Math.floor(Math.random() * 10 + 1));
//3~6
console.log(Math.floor(Math.random() * (6 - 3 + 1) + 3));  //0 + 3  1 + 3  2 + 3  3 + 3
//9~18
console.log(Math.floor(Math.random() * (18 - 9 + 1) + 9));
 
//万能随机
function fnRandInt(min,max){
    //确保min < max
    if(min > max){
        var t = min;
        min = max;
        max = t;
    }
    return Math.floor(Math.random() * (max - min + 1) + min);
}
//console.log(fnRandInt(88,85));

猜拳游戏

//设计一个简单的猜拳游戏
//两个人：需要几个变量？ 2
//每一个人可以有多少种出拳方式：石头、剪刀、布
//玩家一
function fn(){
    while(1){
        var pc = fnRandInt(1,3);
        var player2 = parseInt(prompt('1: 石头、2: 剪刀、3: 布、0 ： 退出，三种方式\n请选择：'));
        switch(pc){
            case 1 : 
                switch(player2){
                    case 1 : alert('平局');break;
                    case 2 : alert('您输了');break;
                    case 3 : alert('您赢了');break;
                    case 0 : return;
                    default : alert('你耍赖');
                }
                break;
            case 2 : 
                switch(player2){
                    case 1 : alert('您赢了');break;
                    case 2 : alert('平局');break;
                    case 3 : alert('您输了');break;
                    case 0 : return;
                    default : alert('你耍赖');
                }
                break;
            case 3 : 
                switch(player2){
                    case 1 : alert('您输了');break;
                    case 2 : alert('您赢了');break;
                    case 3 : alert('平局');break;
                    case 0 : return;
                    default : alert('你耍赖');
                }
                break;
            default : alert('电脑中毒了！');
        }
    }
}
fn();

猜数字

//实现猜数字游戏（1~10，三次机会）
//一、获取页面元素
var o_btn = document.getElementById('btn');
//二、添加事件
o_btn.onclick = function(){
    //随机数
    var n = fnRandInt(1,10);
    //三次机会
    for(var i = 1;i < 4;i ++){
        //接收用户猜的数字
        var num = parseInt(prompt('请输入一个1~10中的一个整数：'));
        if(num === n){
            alert('开饭了');
            return;
        }else if(num < n){
            alert('来早了！');
        }else if(num > n){
            alert('来晚了');
        }
    }
    if(i === 4){
        alert('三次机会已用完，正确数字是：' + n);
    }
}

随机颜色

//获取body
var o_body = document.getElementById('body');
//封装一个随机颜色的函数（至少封装三种）
/*
    #ffffff
    rgb(0~255,0~255,0~255)
    单词
*/
function fnRandColor(){
    // 0x开头的数字，表示十六进制数
    return '#' + Math.floor(Math.random() * 0xffffff).toString(16);
}
function fnRandColor01(){
    var str = '#';
    for(var i = 0;i < 6;i ++){
        //                                0xf
        str += Math.floor(Math.random() * 16).toString(16);
    }
    return str;
}
function fnRandColor02(){
    var arr = [];
    for(var i = 0;i < 3;i ++){
        arr.push(Math.floor(Math.random() * 256));  //[22,34,56]
    }
    //               22,34,56
    return 'rgb(' + arr.toString() + ')';
}
console.log(fnRandColor());
console.log(fnRandColor01());
console.log(fnRandColor02());
o_body.style.background = fnRandColor02();

随机验证码

//封装一个4位验证码的函数（包含数字大写字母小写字母）
function authCode(n){
    var str = '';
    var letter = '0123456789qwertyuioplkjhgfdsazxcvbnmQWERTYUIOPLKJHGFDSAZXCVBNM';
    for(var i = 0;i < n;i ++){
        str += letter.charAt(Math.floor(Math.random() * letter.length));
    }
    return str;
}
console.log(authCode(6));

扁平化数组

//扁平化数组  如：[1,2,[3,[4,5],[6,7],8],9]  [1,2,3,4,5,6,7,8,9]
//[1,[2,3]]
// instanceof : 检测一个对象是否属于某一类。
function flattening(data){ //data : 数据
    //声明新数组
    var list = [];
    //检测data是否为数组
    if(data instanceof Array){
        //遍历数组
        for(var i = 0;i < data.length;i ++){
            list = list.concat(flattening(data[i]));  //[1]
        }
    }else{
        list.push(data);
    }
    return list;
}

console.log(flattening([1,2,[3,[4,5],[6,7],8],9]));
/*
    data = [1,[2,3]];
    list = [1,2,3];
    list = list.concat(flattening(1));  [1]  [2,3]
    return [1,2,3]
*/
/*
    data = 1
    list = [1];
    return [1]
*/
/*
    data = [2,3]
    list = [2,3];
    list = list.concat(flattening(3));
    return [2,3]
*/
/*
    data = 2
    list = [2]
    return [2];
*/
/*
    data = 3
    list = [3];
    return [3]
*/

计时器

<style>
    body{
        background-image: url(img/1.webp);
    }
</style>
<body id="body">
<input type="button" value="start" id="start">
<input type="button" value="stop" id="stop">
<script>
    // setInterval(function(){
    //     console.log('hello');
    // },2000)
    //图片数组
    var arr_img = ['img/1.webp','img/2.webp','img/3.webp','img/4.webp','img/5.webp'];

    //获取页面元素
    var o_body = document.getElementById('body');
    var o_start = document.getElementById('start');
    var o_stop = document.getElementById('stop');
    var index = 0;
    var timer = null;
    //添加事件
    o_start.onclick = function(){
        timer = setInterval(function(){
            o_body.style.background = 'url(' + arr_img[index ++ % arr_img.length] + ')';
            // if(index === arr_img.length){
            //     index = 0;
            // }
        },2000);
    }
    o_stop.onclick = function(){
        clearInterval(timer)
    }
</script>
</body>

<style>
    #box{
        width: 100%;
        height:150px;
        background: red;
        position: absolute;
        left: 0;
        top: 0;
    }
</style>
<body>
<div id="box">我是广告</div>
<script>
    var o_div = document.getElementById('box');
    var timer = null;
    function fn(){
        timer = setTimeout(function(){
            o_div.style.display = 'none';
        }, 3000);
    }
    
    fn();  //在打开页面是就启动计时器，3秒后广告消失
    //当前鼠标移入广告时，广告不再消失
    o_div.onmouseover = function(){
        clearTimeout(timer);
    }
    //当鼠标移出广告时，再启动计时器，3秒后消失
    o_div.onmouseout = function(){
        fn();
    }
</script>
</body>

如何创建日期对象

//创建日期对象
var date = new Date();
alert(date);

操作日期对象

<body>
<div id="box"></div>
<script>
    setInterval(fn,1000);

    function fn(){
        // 2022 年 十一 月 3 日  星期四  17:36:30
        //创建日期对象
        var date = new Date();
        console.log(date);
        //月份的数组
        var arr_month = ['一','二','三','四','五','六','七','八','九','十','十一','十二'];
        //星期数组
        var arr_week = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
        var o_div = document.getElementById('box');



        //设置日期信息
        //1. 年
        date.setFullYear(1984);
        //2. 月
        date.setMonth(2);
        //3. 日
        date.setDate(5);
        //4. 时
        date.setHours(18);
        //5. 分
        date.setMinutes(30);
        //6. 秒
        date.setSeconds(50);
        //7. 毫秒
        date.setMilliseconds(888);
        //8. 时间
        //date.setTime()



        //获取日期信息
        //1. 年
        var i_year = date.getFullYear();
        console.log(i_year);
        //2. 月  0~11
        var i_month = date.getMonth();
        console.log(i_month);  //10
        //3. 日  
        var i_date = date.getDate();
        console.log(i_date);
        //4. 星期
        var i_day = date.getDay();
        console.log(i_day);
        //5. 时
        var i_hours = date.getHours();
        console.log(i_hours);
        //6. 分
        var i_minutes = date.getMinutes();
        console.log(i_minutes);
        //7. 秒
        var i_seconds = date.getSeconds();
        console.log(i_seconds);
        //8. 毫秒
        var i_milliseconds = date.getMilliseconds();
        console.log(i_milliseconds);
        //9. 时间戳 : 从1970年1月1日0时整到现在的毫秒数
        var i_time = date.getTime();
        console.log(i_time);

        o_div.innerText = i_year + ' 年 ' + arr_month[i_month] + ' 月 ' + i_date + ' 日 ' + arr_week[i_day] + ' ' + i_hours + ':' + i_minutes + ':' + i_seconds;
    }
</script>
</body>

创建日期对象

//创建日期对象
// var date = new Date(2002,2,5);
// var date = new Date(1984,2,5,18,30,50);
// var date = new Date('1984-3-5 18:30:50');
var date = new Date('1984/3/5 18:30:50');
console.log(date.toLocaleString());
console.log(date.toLocaleDateString());
console.log(date.toLocaleTimeString());

异步执行机制

/*
    1. 什么是同步？按步骤执行
    2. 什么是异步？同时进行  （计时器）

    注：先执行所有的同步语句，再执行异步！！！！
*/
console.log(1); //同步
//异步：等待同步执行完毕，再执行异步
setTimeout(function(){
    console.log(2);
},0)
//同步
console.log(3);
//1  3  2