<!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. centos搭建本地yum源,

    比如将文件夹:/opt/mir/这个文件夹做成本地源: 1.在/etc/yum.repos.d/目录下新建一个.repo文件,比如mir-base.repo,在里面加入如下: [local]name= ...

  2. Gym 101201G Maximum Islands (最大独立集)

    题意:给定一个图,L代表陆地,W代表水,C表示不确定,问你最多有多少岛. 析:首先给定的L周围必须是是W,只有这样才是最优的,因为如果是L,那么还得有另外的W来包围,不是最优的,那么剩下的就剩下C了, ...

  3. markdown你的生活 | markdown编辑器简介

    前言 你是否有这样的困扰?希望找一个笔记本记录东西,window自带的notepad(记事本)?,轻量但是功能太有限.word文档?功能虽多,但是很沉重,我们需要花很多时间去想如何排版会更记录会清晰, ...

  4. UIPickerView 修改必须滚动才修改值的bug

    //相应的选择转动 - (void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSI ...

  5. [LeetCode 题解]: Partition List

    Given a linked list and a value x, partition it such that all nodes less than x come before nodes gr ...

  6. 为Visual Studio添加一个“编码的UI测试生成器”的快捷方式

    在添加CodedUI测试用例时,经常需要查看捕获控件的属性.按照常规的方式,只有在添加一个全新的CodedUI编码测试时才能查看捕获控件的属性,这样很不方便. 下面介绍在Visual Studio工具 ...

  7. C# Using 开发随录

    Using 关键字有2个主要用途: 1.做为语句  用于定义一个范围,在此范围的末尾将释放对象 2.做为指令  用于为命名空间创建别名或导入其他命名空间中定义的类型 C# 通过 .NET Framew ...

  8. winform app.cpnfig 文件的引用

    1.app.config配置文件修改 <?xml version="1.0" encoding="utf-8"?> <configuratio ...

  9. jQuery查找标签--选择器,筛选器,模态对话框, 左侧菜单栏

    查找标签 选择器: 基本选择器(同css) id选择器 $("#id") 标签选择器 $('tagName') class选择器 $(".className") ...

  10. NOIP2015BLOCKADE c++ 代码

    #include<algorithm> #include<fstream> #include<functional> #include<iostream> ...