Math对象、随机验证码、对象、日期对象

h54211

于 2022-12-08 21:20:06 发布

阅读量122

点赞数

文章标签： javascript html5 开发语言

本文链接：https://blog.csdn.net/h54211/article/details/128243654

版权

Math： js的一个内置对象，js为我们提供了一系列的方法让我们使用

取整 parseInt()

保留小数 parseFloat()

1、Math.ceil() 向上取整，有小数直接向上进位

2、Math.floor() 向下取整，有小数直接舍弃

3、Math.round() 四舍五入

4、Math.PI

5、Math.abs() 取绝对值

6、Math.sqrt() 开根号

7、Math.pow(基数,次方数) 次方

8、Math.random() 随机数(0-1之间的数，包含0不包含1)

min-max之间的随机整数： Math.floor(Math.random()*(max-min+1)+min)

 // 20-50之间的随机整数   min-max之间的随机整数：   Math.floor(Math.random()*(max-min+1)+min)
<script>
    setInterval(function(){
        console.log(Math.floor(Math.random()*31+20))
},1000)
// 随机打印10个20-50的数
        for(var i = 0;i<10;i++) {
            console.log(random(20,50));
        }
</script>

随机验证码

<!DOCTYPE html>
<html lang="en">
<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>
    <style>
        .box {
            width: 60px;
            height: 40px;
            background: yellow;
            line-height: 40px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="box">sRQ1</div>
    <script>
        var str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'

        var  box = document.getElementsByClassName('box')[0]
        box.onclick  = function(){
            var str1 = ''
            for(var i = 0;i < 4; i++){
                var random = Math.floor(Math.random()*str.length) 
                str1 +=str[random]
       }
             box.innerHTML = str1

        }
    </script>
</body>
</html>

随机验证码颜色字体变化

<!DOCTYPE html>
<html lang="en">
<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>
    <style>
        .box {
            width: 200px;
            height: 100px;
            background: yellow;
            line-height: 100px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="box">sRQ1</div>
    <!-- <div class="box"><span style="color:rgb(255,0,0);font-size:30px">s</span>RQ1</div>  -->
    <script>
        var str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'

        var  box = document.getElementsByClassName('box')[0]

        //页面一刷新就得先调用一次随机验证码
        randomYZM()
        box.onclick = function() {
            randomYZM()
        }

        function randomYZM() {
             //随机生成四位的数字|字母---来源于str
             var str1 = ''
            
            for(var i = 0;i<4;i++) {
                //随机下标
                var random = Math.floor(Math.random()*str.length)
                // 随机颜色 0-255之间产生
                var r = Math.floor(Math.random()*256)
                var g = Math.floor(Math.random()*256)
                var b = Math.floor(Math.random()*256)
                // 随机字号   20-50
                var fs = Math.floor(Math.random()*31+20)
                str1 += '<span style="color:rgb('+r+','+g+','+b+');font-size:'+fs+'px">'+str[random]+'</span>'
            }
            // console.log(str1);
            box.innerHTML = str1
        }
    </script>
</body>
</html>

对象

例：var str = new String

日期对象

1、日期对象 Date

(1)创建日期

当前时间： new Date()

var date = new Date()

某个特点时间： new Date('年-月-日时:分:秒')

var date1 = new Date('2023,02,02 , 00,00,00')

                var date1 = new Date('2023-02-02   00:00:00')

                 var date1 = new Date('2023/02/02   00:00:00')

  var date2 = new Date('may,1,2022')

//1、格式化方法   转成一些特定的字符串
<script>
        var date1 = new Date()
        console.log(date1);

        var d1 = date1.toDateString()
        console.log(d1);   //Tue Dec 06 2022
        var d2 = date1.toLocaleDateString()
        console.log(d2);   //2022/12/6

        var d3 = date1.toTimeString()
        console.log(d3);  //14:26:08 GMT+0800 (中国标准时间)
        var d4 = date1.toLocaleTimeString()
        console.log(d4); //14:26:08

        console.log(d2 +' ' + d4);   //2022/12/6 14:26:08
    </script>

 <script>
        var date1 = new Date()
        // var date1 = new Date('2022-12-11')
        console.log(date1);

        var y = date1.getFullYear()
        console.log(y);  //2022 年
        var m = date1.getMonth() + 1
        console.log(m); //12  月份需要加1拿到的才是我们实际的
        var d = date1.getDate() 
        console.log(d); //6  日
        var d2 = date1.getDay()
        var week = ['星期天','星期一','星期二','星期三','星期四','星期五','星期六']
        console.log(d2);  //星期天0  
        console.log(week[d2]);  //星期 

        var h = date1.getHours()
        console.log(h);   //时
        var mm = date1.getMinutes()
        console.log(mm);  //分
        var s = date1.getSeconds()
        console.log(s);  //秒

        var time = date1.getTime()
        console.log(time);  //时间戳（毫秒数）    1970-1-1
    </script>

倒计时案例

<!DOCTYPE html>
<html lang="en">
<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 class="box"></div>
    <!-- 距离双十二还有多少天多少小时多少分钟多少秒 -->

    <script>
        var box = document.getElementsByClassName('box')[0]
        daojishi()
        setInterval(daojishi,1000)
        function daojishi(){
            //未来时间
            var futureDate = new Date('2022-12-12 00:00:00')
            //当前时间
            var currentDate = new Date()
            // console.log(futureDate,currentDate);
            //未来时间 - 当前时间     时间戳（单位的毫秒）    1秒 = 1000毫秒
            var time = parseInt((futureDate - currentDate) / 1000)
            console.log(time);  //秒
            // 天： 1天 = 24*60*60
            var t = parseInt(time / (24*60*60))
            console.log(t);
            //小时：  time % 86400   -----   不够一天的时间（秒）    1小时 = 60*60
            var h = parseInt((time % 86400) / (60*60))
            console.log(h);
            //分钟 ：   time % 3600 --- 不够1小时的时间(秒)    1分钟 = 60秒
            var m = parseInt((time % 3600) / 60)
            console.log(m);
            //秒  ：    time % 60 不到1分钟的时间（秒）
            var s = parseInt(time % 60)
            console.log(s);
            box.innerHTML = '距离双十二还有'+t+'天'+h+'小时'+m+'分钟'+s+'秒'
        }
        
    </script>
</body>
</html>

h54211

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Math对象、随机验证码、对象、日期对象

Math： js的一个内置对象，js为我们提供了一系列的方法让我们使用取整 parseInt()保留小数 parseFloat()1、Math.ceil() 向上取整，有小数直接向上进位2、Math.floor() 向下取整，有小数直接舍弃3、Math.round() 四舍五入5、Math.abs() 取绝对值6、Math.sqrt() 开根号7、Math.pow(基数,次方数) 次方。
复制链接

扫一扫