深入理解RGBA、Math ceil()、floor()、round()、toFixed()随机数，取整方法

最新推荐文章于 2024-03-19 16:24:47 发布

最骚的就是你

最新推荐文章于 2024-03-19 16:24:47 发布

阅读量3.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端学习文章标签： math x

本文链接：https://blog.youkuaiyun.com/libin_1/article/details/50908896

web前端学习专栏收录该内容

301 篇文章

订阅专栏

本文详细介绍了JavaScript中三种基本的数学运算方法：向上取整（Math.ceil()）、向下取整（Math.floor()）及四舍五入（Math.round()）。通过具体的示例代码展示了这些函数如何处理正数和负数的小数部分，帮助读者更好地理解它们的工作原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这里写图片描述

Math.ceil()
功能：对一个数进行上取整。
语法：Math.ceil(x)
参数：
x：一个数值。
返回值：返回大于或等于x，并且与之最接近的整数。
注：如果x是正数，则把小数“入”；如果x是负数，则把小数“舍”。
例：
<script type="text/javascript">
document.write( Math.ceil(1.2)+", "+Math.ceil(1.8)+", "+Math.ceil(-1.2)+", "+Math.ceil(-1.8) );
</script>
输出结果为：
document.write( Math.ceil(1.2)+", "+Math.ceil(1.8)+", "+Math.ceil(-1.2)+", "+Math.ceil(-1.8) ); 2, 2, -1, -1



Math.floor()
功能：对一个数进行下取整。
语法：Math.floor(x)
参数：
x：一个数值。
返回值：返回小于或等于x，并且与之最接近的整数。
注：如果x是正数，则把小数“舍”；如果x是负数，则把小数“入”。
例：
<script type="text/javascript">
document.write( Math.floor(1.2)+", "+Math.floor(1.8)+", "+Math.floor(-1.2)+", "+Math.floor(-1.8) );
</script>
输出结果为：
document.write( Math.floor(1.2)+", "+Math.floor(1.8)+", "+Math.floor(-1.2)+", "+Math.floor(-1.8) ); 1, 1, -2, -2




Math.round()
功能：四舍五入取整。
语法：Math.round(x)
参数：
x：一个数值。
返回值：与x最接近的整数。
例：
<script type="text/javascript">
document.write( Math.round(1.2)+", "+Math.round(1.8)+", "+Math.round(-1.2)+", "+Math.round(-1.8) );
</script>
输出结果为：
document.write( Math.round(1.2)+", "+Math.round(1.8)+", "+Math.round(-1.2)+", "+Math.round(-1.8) ); 1, 2, -1, -2

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery-2.1.0.min.js"></script>
        <style type="text/css">
            .no1 {
                width: 200px;
                height: 200px;
                border: 1px solid red;
                margin-right: 10px;
                display: block;
                float: left;
                text-align: center;
            }

            .num {
                clear: both;
            }
        </style>
        <script type="text/javascript">
            $(function() {
                $('.num').text("RGBA(0,0,0,0)");
                $(".no1").click(function() {
                    alert(1);
                });
                $(".no1").click(function() {
                    alert(2);
                });
                $(".no1").click(function() {
                    alert(3);
                });
                var setint = setInterval(function() {
                    var r = Math.floor(Math.random() * 255);
                    var g = Math.floor(Math.random() * 255);
                    var b = Math.floor(Math.random() * 255);
                    var a = Math.random().toFixed(2);
                    $('.num').text("RGBA(" + r + "," + g + "," + b + "," + a + ")");
                    $(".no1").css("background", "rgba(" + r + "," + g + "," + b + "," + a + ")");
                }, 500);
            })
        </script>
    </head>

    <body>
        <span class="no1">aaa</span>
        <span class="no1">bbb</span>
        <div class="num"></div>
    </body>

</html>