首页 > 软件开发 > JavaScript >

JavaScript向上取整;js向上取整

来源:互联网 2023-03-16 23:56:13 490

在制作分页的时候使用向上取整是非常方便的。当除以每页显示的行数有小数点时就会自动向上取一个整数(如:Math.ceil(5/2) 得到的结果为:3)。f3w办公区 - 实用经验教程分享!

JavaScript向上取整;js向上取整f3w办公区 - 实用经验教程分享!

方法/步骤

  • 1

    新建一个 html文件。如图:f3w办公区 - 实用经验教程分享!

    JavaScript向上取整;js向上取整f3w办公区 - 实用经验教程分享!

  • 1此文章未经许可获取自百度经验
  • 2

    在html文件上创建三个标签设置id,标签分别是输入框、按钮、div,然后给按钮添加一个向上取整的事件。如图:f3w办公区 - 实用经验教程分享!

    代码:f3w办公区 - 实用经验教程分享!

    input type="text" id="num" />f3w办公区 - 实用经验教程分享!

    input type="button" onclick="ceil()" value="向上取整" />f3w办公区 - 实用经验教程分享!

    div id="show">/div>f3w办公区 - 实用经验教程分享!

    JavaScript向上取整;js向上取整f3w办公区 - 实用经验教程分享!

  • 3

    创建按钮点击事件。点击按钮时需要做两个处理:一个是获取输入框的数字并把数字进行处理为向上取整;另一个就是把数据显示在div>上。如图:f3w办公区 - 实用经验教程分享!

    代码:f3w办公区 - 实用经验教程分享!

    script>f3w办公区 - 实用经验教程分享!

    function ceil(){f3w办公区 - 实用经验教程分享!

    var num=document.getElementById("num").value;f3w办公区 - 实用经验教程分享!

    document.getElementById("show").innerHTML=f3w办公区 - 实用经验教程分享!

    num "向上取整后为:" Math.ceil(num);f3w办公区 - 实用经验教程分享!

    }f3w办公区 - 实用经验教程分享!

    /script>f3w办公区 - 实用经验教程分享!

    JavaScript向上取整;js向上取整f3w办公区 - 实用经验教程分享!

  • 4

    保存html文件使用浏览器打开,在输入框输入一个浮点数然后点击向上取整按钮,就会显示出向上取整处理后的数字。如图:f3w办公区 - 实用经验教程分享!

    注意:向上取整使用的是JavaScript已封装好的Math.ceil()f3w办公区 - 实用经验教程分享!

    JavaScript向上取整;js向上取整f3w办公区 - 实用经验教程分享!

  • 5

    所有代码。可以直接把所有代码复制到新建的html文件上,保存好后运行即可看到效果。f3w办公区 - 实用经验教程分享!

    所有代码:f3w办公区 - 实用经验教程分享!

    !DOCTYPE html>f3w办公区 - 实用经验教程分享!

    html>f3w办公区 - 实用经验教程分享!

    head>f3w办公区 - 实用经验教程分享!

    meta charset="UTF-8">f3w办公区 - 实用经验教程分享!

    title>ceil向上取整/title>f3w办公区 - 实用经验教程分享!

    script>f3w办公区 - 实用经验教程分享!

    function ceil(){f3w办公区 - 实用经验教程分享!

    var num=document.getElementById("num").value;f3w办公区 - 实用经验教程分享!

    document.getElementById("show").innerHTML=f3w办公区 - 实用经验教程分享!

    num "向上取整后为:" Math.ceil(num);f3w办公区 - 实用经验教程分享!

    }f3w办公区 - 实用经验教程分享!

    /script>f3w办公区 - 实用经验教程分享!

    /head>f3w办公区 - 实用经验教程分享!

    body>f3w办公区 - 实用经验教程分享!

    input type="text" id="num" />f3w办公区 - 实用经验教程分享!

    input type="button" onclick="ceil()" value="向上取整" />f3w办公区 - 实用经验教程分享!

    div id="show">/div>f3w办公区 - 实用经验教程分享!

    /body>f3w办公区 - 实用经验教程分享!

    /html>f3w办公区 - 实用经验教程分享!

  • 以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!f3w办公区 - 实用经验教程分享!


    标签: JAVASCRIPT

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码