JavaScript(小项目练习)

Exclusive_Cat

于 2024-09-01 17:11:04 发布

阅读量545

点赞数 12

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/2302_80464795/article/details/141786475

版权

这里做了一个网页版的计算器
利用form表单在页面中显示出来输入操作数的表单
通过点击下面的运算符按钮即可计算出结果
并显示在结果表单中
在<script>标签中写入逻辑
定义一个test方法，在点击表单中按钮的同时调用了test方法
把对应的符号传进函数，即可对应逻辑进行输出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算器</title>
</head>
<body>

<form name="cal">
    数字1:<input type="text" name="n1">
    <br/>
    数字2:<input type="text" name="n2">
    <br/>
    结果:<input type="text" name="res">
    <br/>
    <input type="button" οnclick="test('+')" value="+">
    <input type="button" οnclick="test('-')" value="-">
    <input type="button" οnclick="test('*')" value="*">
    <input type="button" οnclick="test('/')" value="/">


</form>

<script>

    function test(x) {
        //获取用户在输入框中输入的数据
        var a=parseInt(document.cal.n1.value);
        var b=parseInt(document.cal.n2.value);

        if (x=="+"){
            var c=a+b;
            document.cal.res.value=c;
        }else if (x=="-"){
            var c=a-b;
            document.cal.res.value=c;
        }else if (x=="*"){
            var c=a*b;
            document.cal.res.value=c;
        }else if (x=="/"){
            var c=a/b;
            document.cal.res.value=c;
        }

        //把数据写入到指定输入框

    }
</script>
</body>
</html>

这里点击了*号进行了乘法运算

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<a οnclick="test()">
    调用函数
</a>

<br/>

<h1 οnclick="test2()">
    打开新窗口
</h1>

<h2 οnclick="test3()">
    关闭窗口
</h2>

<script>

    function test3() {
        window.close()
    }

    function test2() {
        open("http://www.baidu.com","窗口名")
    }

    function test() {
        //弹出一个询问框，用户点击确定则返回true，否则返回false
        var a=confirm("确认关闭吗?")
        document.write("用户点击的结果是："+a)
    }
</script>
</body>
</html>

这段代码运用了超链接，与标签的点击事件来调用<script>标签中的函数

这里的confirm("确认关闭吗?")可以返回一个布尔类型的值

如果选择的是确定则输出true，如果选择是取消输出false

这里的open("http://www.baidu.com","窗口名")

在调用此方法时可以直接访问这里的网站

这里的window.close()

在调用此方法时会退出整个网页

以上就是本次的全部内容希望大家支持

byebye~

Exclusive_Cat

关注

12
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JavaScript(小项目练习)

open("http://www.baidu.com","窗口名")这里的open("http://www.baidu.com","窗口名")数字1:数字2:结果:document.write("用户点击的结果是："+a)这段代码运用了超链接，与标签的点击事件来调用标签中的函数。//获取用户在输入框中输入的数据。
复制链接

扫一扫