使用js制作计算器

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script type="text/javascript"> //相加
function add(){
var first=0;
jai=Number(document.getElementById("text").value); var scoent=0;
jia=Number(document.getElementById("text2").value); var sum=0;
sum=jai+jia;
document.getElementById("jieg").value=sum;
} //相减
function delect(){ var jian=0;
jian=jai-jia;
document.getElementById("jieg").value=jian;
} //相乘 function chen(){ var ce=0;
ce=jai*jia;
document.getElementById("jieg").value=ce;
} //相除 function chu(){ var cu=0;
cu=jai/jia;
document.getElementById("jieg").value=cu;
} </script> </head>
<body>
<table style="background:red">
<tr>
<td colspan="4" align="center">购物简易计算器</td> </tr> <tr>
<td>第一个数</td>
<td colspan="3"><input type="text" id="text"></td> </tr> <tr>
<td>第二个数</td>
<td colspan="3"><input type="text" id="text2"></td> </tr> <tr> <td><input type="submit" value="+" style="width:100% " onclick="add()"></td>
<td><input type="submit" value="—" style="width:100% " onclick="delect()"></td>
<td><input type="submit" value="X" style="width:100% " onclick="chen()"></td>
<td><input type="submit" value="/" style="width:100% " onclick="chu()"></td>
</tr> <tr>
<td>计算结果</td>
<td colspan="3"><input type="text" id="jieg" /></td> </tr> </table> </body>
</html>

用js制作一个计算器的更多相关文章

  1. 用JS制作一个信息管理平台完整版

      前  言 JRedu 在之前的文章中,介绍了如何用JS制作一个实用的信息管理平台. 但是那样的平台功能过于简陋了,我们今天来继续完善一下. 首先我们回顾一下之前的内容.   1.JSON的基础知识 ...

  2. JS制作一个创意数字时钟

    通过js代码制作一个创意数字时钟 通过JS代码实现创意数字时钟效果如下:由数字化的卡通形象图片取代常规的数字显示当前实时北京时间.具体效果示例: 核心重点: (1)Date方法的初步了解 (2)构建模 ...

  3. three.js 制作一个三维的推箱子游戏

    今天郭先生发现大家更喜欢看我发的three.js小作品,今天我就发一个3d版本推箱子的游戏,其实webGL有很多框架,three.js并不合适做游戏引擎,但是可以尝试一些小游戏.在线案例请点击博客原文 ...

  4. JS制作一个通用的商城版历史浏览记录

    正在开发一个b2c的国外商城,昨天做了一个历史浏览记录发出来跟大家分享一下. JS: //cookie相关函数 function getCookieVal(offset) {    var endst ...

  5. 通过JS制作一个简易数码时钟

    设计思路: 数码时钟即通过图片数字来显示当前时间,需要显示的图片的URL根据时间变化而变化. a.获取当前时间Date()并将当前时间信息转换为一个6位的字符串; b.根据时间字符串每个位置对应的数字 ...

  6. 使用JS写一个计算器

    先上效果图: 简单的加减乘除功能还是有的,所以我们就考虑怎么来实现这个功能. 根据预期效果,可以确定页面中的布局要用到table tr td. 所以先放上页面布局,table的边框宽度border,c ...

  7. 1000粉!使用Three.js制作一个专属3D奖牌🥇

    背景 破防了 !突然发现 SegmentFault 平台的粉丝数量已经突破 1000 了,它是我的三个博客平台掘金.博客园.SegmentFault中首个粉丝突破 1000 的,于是设计开发这个页面, ...

  8. 使用JS制作一个鼠标可拖的DIV(四)——缩放

    原理与鼠标拖动 DIV 相同. 下面就先实现一个在DIV的右上角显示一个小正方形(类似). 当鼠标按下并拖动时,DIV会以要拖动的元素的左下角的坐标点定位,根据鼠标的拖动,按比例的扩大或缩小. 一.思 ...

  9. 使用JS制作一个鼠标可拖的DIV(二)——限制区域移动

    这次是要对上一篇的内容进行扩展. 由于需要对可拖动的 DIV 进行一个区域范围的限制,所以要给于一个容器,让可拖动的 DIV 元素不能逃出该容器的大小范围. 一.思路 1.在外层增加一个 DIV 容器 ...

随机推荐

  1. 4 pandas模块,Series类

      对gtx图像进行操作,使用numpy知识 如果让gtx这张图片在竖直方向上进行颠倒.   如果让gtx这张图片左右颠倒呢?   如果水平和竖直方向都要颠倒呢?   如果需要将gtx的颜色改变一下呢 ...

  2. 编译器错误消息: CS0016: 未能写入输出文件“c:\Windows\Microsoft.NET\Framework64\v4.0.30319\Temporary ASP.NET Files\root\64b7b75e\4dfbfca6\App_Web_company.master.4611739e.l3t-kpke.dll”--“拒绝访问。 ”

    报错 原因:IIS没有权限操作TEMP文件夹 最后重新启动站点

  3. 洛谷 P1481 魔族密码

    P1481 魔族密码 题目描述 风之子刚走进他的考场,就…… 花花:当当当当~~偶是魅力女皇——花花!!^^(华丽出场,礼炮,鲜花) 风之子:我呕……(杀死人的眼神)快说题目!否则……-_-### 花 ...

  4. Openfire:通过Servlet群发消息

    在Openfire中自带有Broadcase插件,可以让我们群发消息给全部用户或者组.不过如果是我们通过Servlet来实现这一功能,那么是能够增加一定的灵活性的.具体做法直接看Demo代码: pub ...

  5. CSS Display属性与盒模型

    由于HTML流式文档的特性,页面布局往往是新手最为头疼的问题之中的一个. 每一个HTML元素都会渲染为一个Box,可分为inline Box和block Box. 依据display属性的不同.Box ...

  6. 3.2 Piecewise Linear Interpolation(站点)

    Newton Interpolation: https://www.youtube.com/watch? v=EyRQXA56asI Piecewise Linear Interpolation: h ...

  7. FFmpeg基础库编程开发学习笔记——音频常见格式及字幕格式

    声明一下:这些关于ffmpeg的文章仅仅是用于记录我的学习历程和以便于以后查阅,文章中的一些文字可能是直接摘自于其它文章.书籍或者文献,学习ffmpeg相关知识是为了使用在Android上,我也才是刚 ...

  8. [Fri 26 Jun 2015 ~ Thu 2 Jul 2015] Deep Learning in arxiv

    Natural Neural Networks Google DeepMind又一神作 Projected Natural Gradient Descent algorithm (PRONG) bet ...

  9. hdu 1010 Tempter of the Bone (奇偶性剪枝)

    题意:有一副二维地图'S'为起点,'D'为终点,'.'是可以行走的,'X'是不能行走的.问能否只走T步从S走到D? 题解:最容易想到的就是DFS暴力搜索,,但是会超时...=_=... 所以,,要有其 ...

  10. springboot-quartz 实现动态添加,修改,删除,暂停,恢复等功能

    任务相关信息:springboot-quartz普通任务与可传参任务 一.任务实体类 package cloud.app.prod.home.quartz; import java.io.Serial ...