js实现计算器和计时器功能
本文实例为大家分享了js实现计算器和计时器的具体代码，供大家参考，具体内容如下
完成简单的计算器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box {
width: 250px;
height: 200px;
background-color: #C0C0C0;
}
input{
width: 50px;
height: 27px;
}
#text{
width: 229px;
}
</style>
<script type="text/javascript">
var num = 0;
function str(num) {
document.getElementById('text').value += document.getElementById(num).value;
}
function eva() {
var res = eval(document.getElementById("text").value);
document.getElementById("text").value = res;
}
function clearNum() {
document.getElementById("text").value = null;
}
</script>
</head>
<body>
<div id="box">
<table cellspacing="0" cellpadding="5px">
<tr>
<th colspan="4">
<input type="text" id="text" />
</th>
</tr>
<tr>
<th>
<input type="button" value="7" id="7" onclick="str(this.id)"/>
</th>
<th>
<input type="button" value="8" id="8" onclick="str(this.id)"/>
</th>
<th>
<input type="button" value="9" id="9" onclick="str(this.id)"/>
</th>
<th>
<input type="button" value="+" id="+" onclick="str(this.id)"/>
</th>
</tr>
<tr>
<th>
<input type="button" value="4" id="4" onclick="str(this.id)"/>
</th>
<th>
<input type="button" value="5" id="5" onclick="str(this.id)"/>
</th>
<th>
<input type="button" value="6" id="6" onclick="str(this.id)"/>
</th>
<th>
<input type="button" value="-" id="-" onclick="str(this.id)"/>
</th>
</tr>
<tr>
<th>
<input type="button" value="1" id="1" onclick="str(this.id)"/>
</th>
<th>
<input type="button" value="2" id="2" onclick="str(this.id)"/>
</th>
<th>
<input type="button" value="3" id="3" onclick="str(this.id)"/>
</th>
<th>
<input type="button" value="*" id="*" onclick="str(this.id)"/>
</th>
</tr>
<tr>
<th>
<input type="button" value="0" id="0" onclick="str(this.id)"/>
</th>
<th>
<input type="button" value="c" id="c" onclick="clearNum()"/>
</th>
<th>
<input type="button" value="=" id="=" onclick="eva()"/>
</th>
<th>
<input type="button" value="/" id="/" onclick="str(this.id)"/>
</th>
</tr>
</table>
</div>
</body>
</html>
效果图
制作一个计数器 如图，点击开始从1开始计数，点击停止，停止计数，点击复位归0并结束计数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="../js/jquery.1.8.3.min.js" charset="UTF-8">
</script>
<script type="text/javascript">
var second = 0;
var minutes = 0;
function star() {
$("#start").attr("disabled", true);
$("#stop").attr("disabled", false);
t = setInterval("sum()", 10);
}
function sum() {
if(second != 100){
second++;
if(minutes<10){
if (second < 10 ) {
$("#text").val("0"+minutes+".0" + second);
} else if (second < 100) {
$("#text").val("0"+minutes+"."+second);
}
}else{
if (second < 10 ) {
$("#text").val(minutes+".0" + second);
} else if (second < 100) {
$("#text").val(minutes+"."+second);
}
}
}else{
second = 0;
minutes++;
}
}
function stop() {
$("#start").attr("disabled", false);
$("#stop").attr("disabled", true);
clearInterval(t);
}
function res() {
second = 0;
minutes = 0;
$("#text").val("00.00");
clearTimeout(t);
$("#start").attr("disabled", false);
$("#stop").attr("disabled", false);
}
</script>
<style type="text/css">
#start,
#res,
#stop,
#text{
border-radius: 25px;
margin-right: 20px;
}
div{
background-color: aliceblue;
width: 120px;
height: 90px;
margin: auto;
}
</style>
</head>
<body>
<div>
<table >
<tr>
<th colspan="2"><input type="text" style="width:50px; text-align: center; " value="00.00" id="text" /></th>
</tr>
<tr>
<th><input type="button" id="start" style="background-color: #7FFFD4;" value="开始"
onclick="star()" />
</th>
<th><input type="button" id="stop" style="background-color: bisque;" value="停止" onclick="stop()" />
</th>
</tr>
<tr>
<th colspan="2"><input type="button" id="res" style="background-color: #8A2BE2;" value="复位"
onclick="res()" />
</th>
</tr>
</table>
</div>
</body>
</html>
效果图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
javascript实现计时器的简单方法
计时器, 在生活当中也是用得频繁的功能, 比如锻炼身体, 跑步比赛等等相关的活动. 我们用Javascript来完成一个计时器. 计时器, 主要就是对时间的一个逻辑处理, 比如60秒等于1分钟, 60分钟等于一个小时, 我们这里只做到小时的处理. 就这么一个简单的逻辑, 然后动态的显示在一个Input里面. 那现在我们来完成这个界面 <label>计时:</label> <input type="text" name="" id=&qu
-
JS 页面计时器示例代码
复制代码 代码如下: <html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <head> <script type="text/javascript"> var c=0 var t function timedCount() { document.getElementById('txt').value
-
javascript写的简单的计算器，内容很多，方法实用，推荐
最近用javascript写了一个简单的计算器,自己测试感觉还好,先给大家观赏下界面: 界面就是这样了,但是功能如何呢? 现在只是个简单的标准计算器,能进行加减乘除连续运算,以及求余运算.如果发生被除数为零的错误,下面会给出提示,就像这样: 自己不知道写的怎么样,但是对于新手来说,这肯定是一份大餐,里面可以接触到的东西不少,可以拿来学习.如果有高手看出里面的疏漏.错误等望不吝赐教,给予指点. 下面贴上代码,希望里面的注释足够多了. js部分: 复制代码 代码如下: var num=0,resul
-
原生js实现秒表计时器功能
本文实例为大家分享了带有开始.暂停.清除功能的js计时器,供大家参考,具体内容如下 效果图: 下面贴代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>计时器</title> <script> var hour,minute,second;//时 分 秒 hour=minute=secon
-
Node.js中使用计时器定时执行函数详解
如果你熟悉客户端JavaScript编程,你可能使用过setTimeout和setInterval函数,这两个函数允许延时一段时间再运行函数.比如下面的代码, 一旦被加载到Web页面,1秒后会在页面文档后追加"Hello there": 复制代码 代码如下: var oneSecond = 1000 * 1; // one second = 1000 x 1 ms setTimeout(function() { document.write('<p>Hello there.
-
js实现简单计算器
参考部分资料,编写一个简单的计算器案例,虽然完成了正常需求,但是也有不满之处,待后续实力提升后再来补充,先把不足之处列出: 1:本来打算只要打开页面,计算器的输入框会显示一个默认为0的状态,但是在输入框加入默认显示为0的时候,选择数据输入时,该0会显示输入数字的前面,例如"0123",由于能力有限,待后续实力提升再来补充完善! 2:目前只能实现鼠标控制选择按钮,待完善键盘录入功能. 3:乘法的那个符号在本来想改成"×"这个符号的,待后续完善. 附图片一张: html
-
简易js代码实现计算器操作
复制代码 代码如下: <html> <head> <title>JS版计算器</title> <link rel="stylesheet" type="text/css" href=""> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <!--
-
js实现倒计时器自定义时间和暂停
js倒计时器可自定义时间和暂停,效果如下,点击start 开始计时,end结束计时 分别复制 H5 css js 代码即可实现,具体的算法在js控制函数中(都写了注释) css html,body{ width:100%;height:100%; } .content{ height:100%;width:100%; } .row-center{ display:flex;flex-direction:row;justify-content:center; align-items:center;
-
html+js实现简单的计算器代码(加减乘除)
html+js实现简单的计算器代码(加减乘除) <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <table> <tr> <td&
-
js实现一个简易计算器
本文实例为大家分享了JS实现简易计算器的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <title>14th_test</title> <meta charset="gb2312"> </head> <body> <h1>这是一个标题</h1> <p>以下是一个简易计算器</p> <tab