【JavaScript脚本】——T2事件操作

红目香薰

发布于 2022-11-29 16:32:12

35900

代码可运行

文章被收录于专栏：CSDNToQQCodeCSDNToQQCode

运行总次数：0

代码可运行

【JavaScript脚本】——T2事件操作

自定义函数

function 函数名 ( 参数1,参数2){ 执行语句 }

function fun(obj){
    return obj;
}

函数的使用

可以通过调用函数名称的方式直接使用函数：

<script>
    function max(x, y) {
        if (x > y) {
            return x;
        } else {
            return y;
        }
    }
    document.write(max(10, 20));
</script>

系统函数

格式化parseInt()与parseFloat()函数

<script>
    var num = 12345;
    document.write(num % 10);
    document.write("<br/>");
    document.write(num / 10 % 10);
    document.write("<br/>");
    document.write(num / 100 % 10);
    document.write("<br/>");
    document.write(num / 1000 % 10);
    document.write("<br/>");
    document.write(num / 10000);
    document.write("<hr/>");
    var num1 = parseInt(12345);
    document.write(parseInt(num1) % 10);
    document.write("<br/>");
    document.write(parseInt(num1 / 10) % 10);
    document.write("<br/>");
    document.write(parseInt(num1 / 100) % 10);
    document.write("<br/>");
    document.write(parseInt(num1 / 1000) % 10);
    document.write("<br/>");
    document.write(parseInt(num1 / 10000));
</script>

var num = "3.14f";
//输出3.14
document.write(parseFloat(num));

var num = "f3.14f";
//输出【NaN】
document.write(parseFloat(num));

var num = "123";
//输出false
document.write(isNaN(num));

eval() 函数

字符串公式计算

document.write(eval("5+6+11+99*12-7/3*66"));

JS计算器demo1、

一般计算方式:

<p>
    <input type="text" id="x" placeholder="请输入X值:" />
</p>
<p>
    <input type="text" id="ysf" placeholder="请输入运算符:" />
</p>
<p>
    <input type="text" id="y" placeholder="请输入Y值:" />
</p>
<p>
    <input type="button" onclick="calc()" value="计算" />
</p>
<div id="show"></div>
<script>
    function calc() {
        var x = document.getElementById("x").value;
        var ysf = document.getElementById("ysf").value;
        var y = document.getElementById("y").value;
        if (ysf == '+') {
            document.getElementById("show").innerText = parseFloat(x) + parseFloat(y);
        } else if (ysf == '-') {
            document.getElementById("show").innerText = parseFloat(x) - parseFloat(y);
        } else if (ysf == '*') {
            document.getElementById("show").innerText = parseFloat(x) * parseFloat(y);
        } else if (ysf == '/') {
            document.getElementById("show").innerText = parseFloat(x) / parseFloat(y);
        } else {
            document.getElementById("show").innerText = "无此运算";
        }
    }
</script>

JS计算器demo2、

eval() 计算方式:

<p>
    <input type="text" id="x" placeholder="请输入X值:" />
</p>
<p>
    <input type="text" id="ysf" placeholder="请输入运算符:" />
</p>
<p>
    <input type="text" id="y" placeholder="请输入Y值:" />
</p>
<p>
    <input type="button" onclick="calc()" value="计算" />
</p>
<div id="show"></div>
<script>
    function calc() {
        var x = document.getElementById("x").value;
        var ysf = document.getElementById("ysf").value;
        var y = document.getElementById("y").value;
        document.getElementById("show").innerText = eval(x + ysf + y);
    }
</script>

事件：

onblur失去焦点事件:

<p>
    <input type="text" id="x" placeholder="请输入X值:" onblur="REx(this)" />
</p>
<p>
    <input type="text" id="ysf" placeholder="请输入运算符:" onblur="REx(this)" 
</p>
<p>
    <input type="text" id="y" placeholder="请输入Y值:" onblur="REx(this)" />
</p>
<p>
    <input type="button" onclick="calc()" value="计算" />
</p>
<div id="show"></div>
<script>
    function calc() {
        var x = document.getElementById("x").value;
        var ysf = document.getElementById("ysf").value;
        var y = document.getElementById("y").value;
        document.getElementById("show").innerText = eval(x + ysf + y);
    }
    function REx(o) {
        if (o.value == "") {
            alert("不能有空值");
        }
    }
</script>

onchange值改变事件:

<p>
    <select onchange="change(this)">
        <optgroup label="三原色">
            <option value="red">红色</option>
            <option value="yellow">黄色</option>
            <option value="blue">蓝色</option>
            <option value="some">杂色</option>
        </optgroup>
    </select>
</p>
<div id="show"></div>
<script>
    function change(o) {
        var color = o.value;
        switch (color) {
            case "red":
                document.body.style.backgroundColor = "red";
                break;
            case "yellow":
                document.body.style.backgroundColor = "yellow";
                break;
            case "blue":
                document.body.style.backgroundColor = "blue";
                break;
            default:
                document.body.style.backgroundColor = "#ffffff";
                break;
        }
    }
</script>

onSubmit事件:

主要用于校验数据

<form onclick="test.html" onsubmit="chick(this)">
    <p>
        <input type="text" name="userName" placeholder="请输入用户名" />
    </p>
    <p>
        <input type="submit" value="提交" />
    </p>
</form>
<div id="show"></div>
<script>
    function chick(obj) {
        alert('阻止提交数据' + obj.userName.value);
        return false;
    }
</script>