好程序员web前端教程：Math函数

川长思鸟来 2021-11-22 21:36 368阅读 0赞

好程序员web前端教程：Math函数

Math.round(3.6)  //四舍五入

random() //返回0-1之间的随机数

max(num1, num2) //返回较大的数

min(num1, num2)  //返回较小的数

abs(num)  //绝对值

ceil(19.3)  //12  向上取整

floor(11.8)  //11  向下取整

## 1. **获取四位数的验证码。** ##

# #

<!DOCTYPE html>
    
    <html>
    
    <head>
    
    <meta charset=utf-8" />
    
    <title>无标题文档</title>
    
    <script type="text/javascript">
    
    window.onload = function() {
    
    var arr = ['a', 'b', 'c']
    
    var oBtn = document.getElementById('btn');
    
    var oTxt = document.getElementById('txt');
    
    oBtn.onclick = function() {
    
    var iNum = parseInt(Math.random() * 10000)
    
    while (iNum < 1000) {
    
    iNum = parseInt(Math.random() * 10000)
    
    }
    
    oTxt.value = iNum
    
    }
    
    }
    
    </script>
    
    </head>
    
    <body>
    
    <input type="button" value="获取验证码" id="btn" />
    
    <input type="text" value="5345" id="txt" />
    
    </body>
    
    </html>

# #

**2、验证**

<!DOCTYPE HTML>
    
    <html>
    
    <head>
    
    <title>注册页面</title>
    
    <meta charset="utf-8" />
    
    <script type="text/javascript">
    
    //可以对输入的文本做简单校验
    
    function btnClick() {
    
    var oUsername = document.getElementById("box_username");
    
    var oPassname = document.getElementById("box_password");
    
    var oSpan = document.getElementById("box_span");
    
    //清楚掉两个文本中的空格
    
    var sUsername = oUsername.value.replace(/ /g, "");
    
    var sPassname = oPassname.value.replace(/ /g, "");
    
    //取出用户名第一个字符
    
    var unChar = sUsername.charAt(0);
    
    if (unChar >= '0' && unChar <= '9') {
    
    oSpan.innerHTML = "用户名首字母不可以是数字!";
    
    } else if (sUsername.length == 0) {
    
    oSpan.innerHTML = "用户名不能为空!";
    
    } else if (sUsername.length < 6 || sUsername.length > 20) {
    
    oSpan.innerHTML = "用户名长度应该不小于6并且不大于20！";
    
    } else if (sPassname.length == 0) {
    
    oSpan.innerHTML = "密码不能为空！";
    
    }
    
    //将处理完空格的文本替换掉原来错误的文本
    
    //替换文本框中的值
    
    oUsername.value = sUsername;
    
    oPassname.value = sPassname;
    
    }
    
    </script>
    
    </head>
    
    <body>
    
    <span id="box_span"></span>
    
    <input id="box_username" type="text" placeholder="用户名" οnblur="btnClick()" />
    
    <input id="box_password" type="password" placeholder="密码" οnblur="btnClick()" />
    
    <button type="button" onClick="btnClick()">登录</button>
    
    </body>
    
    </html>

思路：

布局（略）

1.获取需要操作的元素；

2.增加事件；

3.获取需要验证的字符串;

4.对字符串进行处理（1.用户名不能为空 。2.开头字母不能是数字。3.用户名长度应该小于6位但是不能大于20位。4.密码不能为空。）；

5.验证字符串，并将结果写入提示区域内；

注：空格也是字符；

3.计算器， 计算器思路。

布局。(略)

switch()语句和if类似，但是比if更复杂；

switch(sth){
    
         case sth1:
    
              代码块；
    
              break;
    
         default:
    
              代码块；
    
    }

一个小的计算器：

<!DOCTYPE html>
    
    <html lang="en">
    
    <head>
    
    <meta charset="utf-8">
    
    <script>
    
    window.οnlοad=function(){
    
                var oTxt1=document.getElementById('txt1');
    
                var oTxt2=document.getElementById('txt2');
    
                var oBtn=document.getElementById('resBtn');
    
                var oSelect=document.getElementById('opt');
    
                oBtn.οnclick=function(){
    
                   //数字;
    
                   var n1=Number(oTxt1.value);
    
                   var n2=Number(oTxt2.value);
    
                   if(isNaN(n1)||isNaN(n2)){
    
                        alert('请输入数字类型进行运算');
    
                        return
    
                   }
    
                   //操作符
    
                   switch(oSelect.value){
    
                        case '+':alert(n1+n2);
    
                        break;
    
                        case '-':alert(n1-n2);
    
                        break;
    
                        case '*':alert(n1*n2);
    
                        break;
    
                        case '/':alert(n1/n2);
    
                        break;
    
                        default:alert('操作符不正确')
    
                   }
    
                }
    
            }
    
            </script>
    
    </head>
    
    <body>
    
    <input type="text" id="txt1">
    
    <select id="opt">
    
    <option value="+">+</option>
    
    <option value="-">-</option>
    
    <option value="*">*</option>
    
    <option value="/">/</option>
    
    </select>
    
    <input type="text" id="txt2">
    
    <input type="button" value="计算" id="resBtn">
    
    </body>
    
    </html>

转载于:https://www.cnblogs.com/gcghcxy/p/10984764.html