用js制作简易计算器及猜随机数字游戏

最新推荐文章于 2024-04-08 16:41:28 发布

dengli3463

最新推荐文章于 2024-04-08 16:41:28 发布

阅读量197

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/tutu3518/p/10634876.html

版权

本文介绍了一个基于HTML和JavaScript实现的简易计算器代码，包括按钮点击事件处理、数值计算和显示更新。同时，还分享了一个猜数字游戏，通过随机数生成和用户输入对比，提供反馈。文章详细解析了代码中的关键部分，如eval函数的使用和随机数的生成及比较。

摘要由CSDN通过智能技术生成

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>JS简易计算器</title>
    </head>
<style>
    input[type="button"] {
        height:55px; width:55px; background-image: -webkit-linear-gradient(90deg, lightskyblue, white);
    }
</style>

<script type="text/javascript">
    var result = "";
    function calculator(num){

        if(num=="="){
            document.form1.text.value=eval(result);

        }else{
            if(num=="reset"){
                result="";
            }
            result = document.form1.text.value+num;
            document.form1.text.value=result;
        }

    }
</script>

<body style="text-align:center" >
<h3>简易计算器</h3>
<div class="box" style="margin: 0 620px;">
    <form action="" class="form1" name="form1" >
        <div class="header">
            <input type="text" id="text" name="text" class="text"/>
            <input id="reset" type="reset" value="清除" οnclick="calculator(this.id)">
        </div>

     <table class="table">
            <tr>
                <td>  <input id="1"  type="button" value="1" onClick="calculator(this.id)"/> </td>
                <td>  <input id="2"  type="button" value="2" onClick="calculator(this.id)"/> </td>
                <td>  <input id="3"  type="button" value="3" onClick="calculator(this.id)"/> </td>
                <td>  <input id="+"  type="button" value="+" onClick="calculator(this.id)"/> </td>
            </tr>
            <tr>
                <td>  <input id="4"  type="button" value="4" onClick="calculator(this.id)"/> </td>
                <td>  <input id="5"  type="button" value="5" onClick="calculator(this.id)"/> </td>
                <td>  <input id="6"  type="button" value="6" onClick="calculator(this.id)"/> </td>
                <td>  <input id="-"  type="button" value="-" onClick="calculator(this.id)"/> </td>
            </tr>
            <tr>
                <td>  <input id="7"  type="button" value="7" onClick="calculator(this.id)"/> </td>
                <td>  <input id="8"  type="button" value="8" onClick="calculator(this.id)"/> </td>
                <td>  <input id="9"  type="button" value="9" onClick="calculator(this.id)"/> </td>
                <td>  <input id="*"  type="button" value="*" onClick="calculator(this.id)"/> </td>
            </tr>
            <tr>
                <td>  <input id="/"  type="button" value="/" onClick="calculator(this.id)"/> </td>
                <td>  <input id="0"  type="button" value="0" onClick="calculator(this.id)"/> </td>
                <td>  <input id="."  type="button" value="." onClick="calculator(this.id)"/> </td>
                <td>  <input id="="  type="button" value="=" onClick="calculator(this.id)"/> </td>
            </tr>
        </table>

   </form>
</div>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>猜数字</title>

    <script>
        var num=Math.random()*99+1
         function rnum(a){
            if(a==parseInt(num)){
               document.write("恭喜你猜对了")
            }else if(a<num){
                document.getElementById("divId").innerHTML="猜小了";
                // $('#divId').html('猜小了');
            }else if(a>num){
                document.getElementById("divId").innerHTML="猜大了";
            }
            // alert(a)
             //alert(parseInt(num))
         }

    </script>
</head>
<body style="text-align: center">
<form name="form1">
    <h3>猜数字</h3>
    <input name="text"  type="text" placeholder="请输入数字">
    <input type="button" value="猜一下" οnclick="rnum(document.form1.text.value)">
    <div id="divId"></div>
<form action="">


</body>
</html>


1、随机数中
document.write()

会直接跳转到新页面
于是我使用了

document.getElementById("divId").innerHTML="猜小了";



2、计算器中

document.form1.text.value=eval(result);

可以直接计算文本框里的内容


3、计算器中

var num=Math.random()*99+1

num值为小数，用parseInt(num)可以将num转化为1-100的整数方便比较

以上是我遇到的问题，希望对和我一样新手学习js有所帮助，谢谢！

转载于:https://www.cnblogs.com/tutu3518/p/10634876.html

dengli3463

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫