用js制作简易计算器及猜随机数字游戏
<!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制作简易计算器及猜随机数字游戏的更多相关文章
- 使用html+css+js实现简易计算器
使用html+css+js实现简易计算器, 效果图如下: html代码如下: <!DOCTYPE html> <html lang="en"> <he ...
- 项目：JS实现简易计算器案例
组件化网页开发下的: 步骤一:让页面动起来的JavaScript深入讲解 的 项目:JS实现简易计算器案例
- 用js制作一个计算器
使用js制作计算器 <!doctype html> <html lang="en"> <head> <meta charset=" ...
- Vue 制作简易计算器
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 原生JS实现简易计算器
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- 利用css+原生js制作简易钟表
利用css+原生js制作简单的钟表.效果如下所示 实现该效果,分三大块:html.javascript.css html部分html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期 ...
- js之简易计算器
<!DOCTYPE html PUBLIC "-//W3C//Dli XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JS编写简易计算器
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/html"> <head lang=" ...
- JS实现简易计算器的7种方法
先放图(好吧比较挫) 方法一:最容易版 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta ...
随机推荐
- 455. Assign Cookies
static int wing=[]() { std::ios::sync_with_stdio(false); cin.tie(NULL); ; }(); class Solution { publ ...
- XP+Android手机DIY家庭视频点播系统-历时3周全力打造吊丝的幸福生活
需求场景(纯熟虚构): 1. 哥电脑里有200G电影copy到手机上看没那么大空间,copy一部看一部删除一部,很是不方便也费时间. 2. 小林同学需求比较旺盛但是媳妇总有不方便的时候,家里有 ...
- UVa 12186 Another Crisis （DP）
题意:有一个老板和n个员工,除了老板每个员工都有唯一的上司,老板编号为0,员工们为1-n,工人(没有下属的员工),要交一份请愿书, 但是不能跨级,当一个不是工人的员工接受到直系下属不少于T%的签字时, ...
- [转]细说 ASP.NET Cache 及其高级用法
本文转自:http://www.cnblogs.com/fish-li/archive/2011/12/27/2304063.html 阅读目录 开始 Cache的基本用途 Cache的定义 Cach ...
- EventBus事件总线框架（发布者/订阅者模式，观察者模式）
一. android应用内消息传递的方式: 1. handler方式-----------------不同线程间传递消息. 2. Interface接口回调方式-------任意两个对象. 3. In ...
- 在github创建用户
在Github注册账户 第一个是创建用户名,第二个是填写邮箱,第三个是设置密码 进入给github会让你选择账户类型 第二步完成后会让你完成邮箱的验证 验证完邮箱以后此时就验证成功了点击绿色的 let ...
- 利用SQL表生成按日期序列的唯一ID
1. 创建一个表,用于存现在最大的ID SELECT [ID],[PreFix],[Code] FROM [DocumentNO] 2. 增加SP,利用锁表,生成相应的ID Create PROCED ...
- .net core执行dotnet ef migrations createmodel等命令出错
.net core执行dotnet ef migrations createmodel等命令出错 执行dotnet ef migrations createmodel.dotnet ef migrat ...
- C# 多线程task
1.异步和多线程的区别?没什么太大区别.异步是目的,使用多线程实现.想想AJAX异步加载,不就是不想让浏览器界面卡住嘛,所以在程序中对于某些单独的操作,比如写日志,我们不想等它完成后再执行其它操作(因 ...
- 开发者常用的十款Chrome插件
本文是稀土掘金投稿,虽然其中有倔金的私货,是篇推广文,但我看过后认为内容确实不错,有些好插件还是第一次知道,对我很有帮助,考虑过后还是决定推荐给大家,最近我比较关注各种提高开发效率的工具与技巧,今后看 ...