用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 ...
随机推荐
- ASP.NET MVC与ASP.NET Web API的区别（转）
出处:http://blog.csdn.net/wangzl1163/article/details/72676616 MVC主要用来构建网站,既关心数据也关心页面展示,而Web API只关注数据 W ...
- FCLK、HCLK、PCLK
一,PLL S3C2440 CPU主频可达400MHz,开发板上的外接晶振为12M,通过时钟控制逻辑的PLL(phase locked loop,锁相环电路)来倍频这个系统时钟.2440有两个P ...
- ARKit对安卓的提示 ARKit与Google Tango
我们知道安卓是Google开发的,那么关于AR谷歌有哪些作为呢?就是开发了Google Tango,尽管Tango还未开源,但是用户可以免费使用,可是一般的安卓手机是无法运行的,它对硬件有要求,这对它 ...
- Bootstrap导航栏
导航栏: <div id="menu-nav" class="navbar navbar-default navbar-inverse navbar-fixed-t ...
- struts2+websocket报错：failed: Error during WebSocket handshake: Unexpected response code:404
最近把websocket集成进项目里面来,打开网页总是会遇到这样的错误. 网上说的原因有3种,但是都不适合我,但是也记录下. 1.struts2截拦掉了ws的请求.这种援用可以尝试把web.xml清空 ...
- 使用memset初始化C++自定义类型
当类型本身或者类型的成员变量带有虚函数以及像std::vector这类复杂数据结构的时候.就会出错,原因是memset把类型本身所带的一些隐含的信息也给置0了.如:虚表指针.std::vector的内 ...
- zabbix监控cpu jumps
cpu监控图形分为三种 cpu jumps cpu突发 包含 context switches per second 进程线程切换 interrupts per second 每秒的中断次数 cpu ...
- Linux 批量管理工具
pssh/pscp(Python) ansible(Python) saltstack(Python) chef puppet(Ruby) fabric(Python)
- 今天踩过的坑——structs和mysql
1 在action中写了interceptor-ref就不会用defaultStack啦.得自己补上2 继承CookiesAware是不够的,得在action中配置一下 <interceptor ...
- 窗口间传送数据wsprintf,WM_SETTEXT,SendMessage的理解
对wsprintf API函数的理解: int wsprintf ( LPTSTR lpOut, // pointer to buffer for output LPCTSTR lpFmt, // ...