<!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="清除" onclick="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="猜一下" onclick="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有所帮助，谢谢！

												


											
用js制作简易计算器及猜随机数字游戏的更多相关文章
	

    
								
  1. 使用html+css+js实现简易计算器
		
    使用html+css+js实现简易计算器, 效果图如下: html代码如下: <!DOCTYPE html> <html lang="en"> <he ...
    
		
    2. 
						
  2. 项目：JS实现简易计算器案例
		
    组件化网页开发下的: 步骤一:让页面动起来的JavaScript深入讲解  的 项目:JS实现简易计算器案例
    
		
    3. 
						
  3. 用js制作一个计算器
		
    使用js制作计算器 <!doctype html> <html lang="en"> <head> <meta charset=" ...
    
		
    4. 
						
  4. Vue 制作简易计算器
		
    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
    
		
    5. 
						
  5. 原生JS实现简易计算器
		
    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
    
		
    6. 
						
  6. 利用css+原生js制作简易钟表
		
    利用css+原生js制作简单的钟表.效果如下所示 实现该效果,分三大块:html.javascript.css html部分html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期 ...
    
		
    7. 
						
  7. js之简易计算器
		
    <!DOCTYPE html PUBLIC "-//W3C//Dli XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
    
		
    8. 
						
  8. JS编写简易计算器
		
    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/html"> <head lang=" ...
    
		
    9. 
						
  9. JS实现简易计算器的7种方法
		
    先放图(好吧比较挫) 方法一:最容易版 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta  ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. centos7下查看tomcat是否启动/系统日志等
			
    centos7下查看tomcat是否启动/系统日志等  方法一: 首先,进入Tomcat下的bin目录 cd /usr/local/tomcat/bin 使用Tomcat关闭命令 ./shutdown ...
    
			
    2. 
						
  2. Android-MediaPlayer-音频播放-异步准备
			
    在上一篇博客,Android-MediaPlayer-音频播放-普通准备,介绍了普通准备的播放: 一般在开发中,要使用异步准备比较好,因为准备是要去准备硬件来播放,是耗性能的 异步准备和普通准备的区别 ...
    
			
    3. 
						
  3. Homework 4
			
    Homework 4 开发工具:dev c++ 开发语言:c++ 源代码上传至github:上传一直失败... 合作人:曹权 博客地址:http://www.cnblogs.com/c2016/ 这里 ...
    
			
    4. 
						
  4. Python学习-5.Python的变量与数据类型及字符串的分割与连接
			
    在Python中,变量类型是固定的,一旦声明就不能修改其类型(在Python里感觉不应该用声明,而应该用使用) 正确: var = 1 print(var) var = 2 print(var) 依次 ...
    
			
    5. 
						
  5. 翻译，NTLM和频道绑定哈希（EPA）
			
    为了过NTLM 的EPA认证, 参考了这篇文章,现在翻译过来,备查. 如果你知道NTLM,并且需要过EPA, 那么这篇文章一定是你最想知道的. 原文地址: NTLM and Channel Bindi ...
    
			
    6. 
						
  6. Tomcat启动报错Invalid character found in method name. HTTP method names must be tokens
			
    1.tomcat服务器需配置三个端口才能启动,安装时默认启用了这三个端口,当要运行多个tomcat服务时需要修改这三个端口,不能相同. 端口一: 修改http访问端口(默认为8080端口),配置文件为 ...
    
			
    7. 
						
  7. asp.net——XML格式导出Excel
			
    下面介绍一种导出Excel的方法: 此方法不需要在服务器上安装Excel,采用生成xml以excel方式输出到客户端,可能需要客户机安装excel,所以也不会有乱七八糟的权限设定,和莫名其妙的版本问题 ...
    
			
    8. 
						
  8. 关于SqlServer连接错误
			
    以前用数据库好好的,今天突然就出现连接错误,贴出出错误消息 出现这种错误的原因:服务里面sqlserver服务没有打开. 解决方案 : 计算机右键,打开管理,找到服务,把服务里面的SQL Server ...
    
			
    9. 
						
  9. Django博客项目思路整理
			
    首先明确一点,我目前学习Django是为了做一个博客,那么以博客为目标进行实践的话,按照Django的MTV模型的顺序来思考的话,要考虑如下几个事情: (Models) 1.在博客里的各种数据模型:  ...
    
			
    10. 
						
  10. 自己从0开始学习Unity的笔记 IV （C#循环练习输出素数）
			
    来测试一下循环....刚刚学了while循环,测试一下输出1-100的素数 我想了一下,素数就是只能被1和本身整除,那就是只能被整除2次,我是顺着这个思路写的代码,如果被整除超过2次,那么肯定不是素数 ...
    
			
    11.