求助query

980041382 · 发表于 2021-9-27 20:41

本帖最后由 980041382 于 2021-9-28 08:43 编辑

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>计算器</title>
</head>
<style>
    body{
        border: 2px #00FFFF;
    }
</style>
<body>
<p>
<h1>请输入两个数并进行计算</h1>
<input type="text" id="num1" width="50px" />
<select id="select">
    <option value="+">+</option>
    <option value="-">-</option>
    <option value="*">*</option>
    <option value="/">/</option>
</select>
<input type="text" id="num2" width="50px"/>
<input type="button" value="计算">
<input id="result"></input>
</p>
</body>
<script type="text/javascript">
    function cal(){
        var num1=document.getElementById("num1").value;
        var num2=document.getElementById("num2").value;
        var c = document.getElementById("select").value;
        num1=parseFloat(num1);
        num2=parseFloat(num2);
        switch(c){
            case "+":
                document.getElementById("result").value=parseInt(num1)+parseInt(num2);
                break;
            case "-":
                document.getElementById("result").value=parseInt(num1)-parseInt(num2);
                break;
            case "*":
                document.getElementById("result").value=parseInt(num1)-parseInt(num2);
                break;
            case "/":
                document.getElementById("result").value=parseInt(num1)/parseInt(num2);
                break;
        }
    }
</script>
</html>

这是我写的一个计算器想问一下坛友们如果用JQuery实现需要怎么修改

徒想er · 发表于 2021-9-27 20:56

[JavaScript] 纯文本查看 复制代码

document.getElementById("result").value

这种代码，全部换成

[JavaScript] 纯文本查看 复制代码

$('#result').val()

其他没差了

980041382 · 发表于 2021-9-27 22:05

徒想er 发表于 2021-9-27 20:56
这种代码，全部 ...

是dom对象都要换吗

980041382 · 发表于 2021-9-27 22:17

徒想er 发表于 2021-9-27 20:56
这种代码，全部 ...

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>计算器</title>
</head>
<style>
    body{
        border: 2px #00FFFF;
    }
</style>
<body>
<p>
<h1>请输入两个数并进行计算</h1>
<input type="text" id="num1" width="50px" />
<select id="select">
    <option value="+">+</option>
    <option value="-">-</option>
    <option value="*">*</option>
    <option value="/">/</option>
</select>
<input type="text" id="num2" width="50px"/>
<input type="button" value="计算" onclick="cal()">
<input id="result"></input>
</p>
</body>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js" type="text/javascript">
    function cal(){
        var num1=$('#num1').val();
        var num2=$('#num2').val();
        var c = $('#select').val();
        num1=parseFloat(num1);
        num2=parseFloat(num2);
        switch(c){
            case "+":
                $('#result').val(parseInt(num1)+parseInt(num2))
                break;
            case "-":
                $('#result').val(parseInt(num1)-parseInt(num2))
                break;
            case "*":
                $('#result').val(parseInt(num1)-parseInt(num2))
                break;
            case "/":
                $('#result').val(parseInt(num1)/parseInt(num2))
                break;
        }
    }
</script>
</html>

为什么我全部修改后输出框没有反应呀

Jack2002 · 发表于 2021-9-27 23:02

本帖最后由 Jack2002 于 2021-9-27 23:03 编辑

基础语法都不及格。

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>计算器</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
</head>
<style>
    body{
        border: 2px #00FFFF;
    }
</style>
<body>
<p>
<h1>请输入两个数并进行计算</h1>
<input type="text" id="num1" width="50px" />
<select id="select">
    <option value="+">+</option>
    <option value="-">-</option>
    <option value="*">*</option>
    <option value="/">/</option>
</select>
<input type="text" id="num2" width="50px"/>
<input type="button" value="计算">
<input id="result"></input>
</p>
</body>
<script type="text/javascript">
    function cal(){
        var num1=$('#num1').val();
        var num2=$('#num2').val();
        var c = $('#select').val();
        num1=parseFloat(num1);
        num2=parseFloat(num2);
        switch(c){
            case "+":
                $('#result').val(parseInt(num1)+parseInt(num2))
                break;
            case "-":
                $('#result').val(parseInt(num1)-parseInt(num2))
                break;
            case "*":
                $('#result').val(parseInt(num1)*parseInt(num2))
                break;
            case "/":
                $('#result').val(parseInt(num1)/parseInt(num2))
                break;
        }
    }
</script>
</html>

u1024i · 发表于 2021-9-27 23:06

jq这样引入

[HTML] 纯文本查看 复制代码

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
<script>


    function cal(){
        var num1=$('#num1').val();
        var num2=$('#num2').val();
        var c = $('#select').val();
        num1=parseFloat(num1);
        num2=parseFloat(num2);
        switch(c){
            case "+":
                $('#result').val(parseInt(num1)+parseInt(num2))
                break;
            case "-":
                $('#result').val(parseInt(num1)-parseInt(num2))
                break;
            case "*":
                $('#result').val(parseInt(num1)-parseInt(num2))
                break;
            case "/":
                $('#result').val(parseInt(num1)/parseInt(num2))
                break;
        }
    }
</script>

980041382 · 发表于 2021-9-27 23:07

Jack2002 发表于 2021-9-27 23:02
基础语法都不及格。
[mw_shl_code=html,true]

我确实是初学还在预习Jquery，你这个代码就把js引入jquery多弄出来了一行还是运行不了啊

980041382 · 发表于 2021-9-27 23:08

u1024i 发表于 2021-9-27 23:06
jq这样引入
[mw_shl_code=html,true]

学习群的小伙伴刚才提醒我了。。。

Jack2002 · 发表于 2021-9-27 23:10

980041382 发表于 2021-9-27 23:07
我确实是初学还在预习Jquery，你这个代码就把js引入jquery多弄出来了一行还是运行不了啊

制完整代码啊！我这儿正儿八经测试过的你说不行？

980041382 · 发表于 2021-9-27 23:11

Jack2002 发表于 2021-9-27 23:10
制完整代码啊！我这儿正儿八经测试过的你说不行？

是复制完整代码啊。。。确实是不行啊

帐号		自动登录	找回密码
密码			注册[Register]

[已解决] 求助query

免费评分

免费评分

免费评分

浏览过的版块

个人中心