idealist 9.15 web作业

最新推荐文章于 2023-06-30 10:45:44 发布

原创最新推荐文章于 2023-06-30 10:45:44 发布 · 197 阅读

CC 4.0 BY-SA版权

本文通过三个实例介绍了前端编程的基本概念：实现按钮点击事件的响应，计算水仙花数，以及创建一个简单的计算器。这些实例涵盖了HTML、JavaScript和基本的数学算法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>按钮点击事件</title>
</head>
<body>
<input type="button" id="btn" value="点我弹出">
</body>
<script>
    var btn=document.getElementById("btn");
    btn.onclick=function () {
        window.alert(btn.value);
    }
</script>
<ml>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水仙花数</title>
</head>
<body>

</body>
<script>
    var a,b,c;
    for (var m=100;m<1000;m++){
        a=m%10;
        b=parseInt(m/10)%10;
        c=parseInt(m/100);
        var sum=a*a*a+b*b*b+c*c*c;
        if(m==sum){
            document.write(m + "</br>");
        }
    }
</script>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算器</title>
</head>
<body>
<input type="text" id="x">
<select id="c">
    <option value="+">+</option>
    <option value="-">-</option>
    <option value="*">*</option>
    <option value="/">/</option>
</select>
<input type="text" id="y">
<input type="button" id="btn2" value="=">
<input type="text" id="result">
</body>
<script>
    var btn2=document.getElementById("btn2");
    btn2.onclick=function caculate() {
        var m;
        var x=parseInt(document.getElementById("x").value);
        var y=parseInt(document.getElementById("y").value);
        var c=document.getElementById("c").value;
        // var index=c.selectedIndex;
        // var text=c.options[index].text;
        var result=document.getElementById("result");
        if(c=="+"){
            m=x+y;
        }else if(c=="-"){
            m=x-y;
        }else if (c=="*"){
            m=x*y;
        }else if(c=="/"){
            m=x/y;
        }
        result.value=m;
    }
</script>
</html>