<!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. 项目:JS实现简易计算器案例

    组件化网页开发下的: 步骤一:让页面动起来的JavaScript深入讲解  的 项目:JS实现简易计算器案例

  3. 用js制作一个计算器

    使用js制作计算器 <!doctype html> <html lang="en"> <head> <meta charset=" ...

  4. Vue 制作简易计算器

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. 原生JS实现简易计算器

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  6. 利用css+原生js制作简易钟表

    利用css+原生js制作简单的钟表.效果如下所示 实现该效果,分三大块:html.javascript.css html部分html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期 ...

  7. js之简易计算器

    <!DOCTYPE html PUBLIC "-//W3C//Dli XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. JS编写简易计算器

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/html"> <head lang=" ...

  9. JS实现简易计算器的7种方法

    先放图(好吧比较挫) 方法一:最容易版 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta ...

随机推荐

  1. DataStage 三、配置ODBC

    DataStage序列文章 DataStage 一.安装 DataStage 二.InfoSphere Information Server进程的启动和停止 1 配置ODBC需要了解的基础知识 配置O ...

  2. spark VS mapreduce

    Apache Spark,一个内存数据处理的框架,现在是一个顶级Apache项目. 这是Spark迈向稳定的重要一步,因为它越来越多地在下一代大数据应用中取代MapReduce. MapReduce是 ...

  3. java内存溢出异常

    名称 特征 作用 配置参数 异常 程序 计数器 占用内存小,线程私有, 生命周期与线程相同 大致为字节码行号指示器 无 无 虚拟机栈 线程私有,生命周期与线程 相同,使用连续的内存空间 Java 方法 ...

  4. Object 和 JSON 区别联系

    JavaScript Object-based JavaScript is almost entirely object-based. Object name Object property name ...

  5. MSP430G2553 Launchpad 硬件I2C驱动

    一.USCI I2C 驱动介绍 对于MSP430G2553,硬件I2C由外设USCI(Universal Serial Communication Interface)提供.USCI又分为USCI_A ...

  6. Solr特性:Schemaless Mode(自动往Schema中添加field)

    WiKi:https://cwiki.apache.org/confluence/display/solr/Schemaless+Mode 介绍: Schemaless Mode is a set o ...

  7. SQL字符串分割转列,Sql列转字符串

    declare @strVar varchar(2000)declare @ResultVar varchar(2000)set @ResultVar='[薄饼],[点心],[海鲜],[酒吧],[楼面 ...

  8. zTree设置选中节点之后出现重复节点

    1.用户离开页面时最后一次点击的节点信息我会保存到数据库. 2.用户打开页面时默认选中上一次离开时选中的节点. 现在发现在设置选中节点之后,会出现重复的节点(重复现象偶尔出现). 以下是代码: var ...

  9. SQL 判断数据库是否有相关表 字段

    --判断数据库是否有相关表 if exists (select 1 from sysobjects where id = object_id(' 表名 ') and type = ' U ' ); - ...

  10. Syncthing源码解析

    Gogland编译Syncthing 源码目录说明 Syncthing启动过程分析 在Gogland中对Syncthing的各个模块进行调试 第三方库