js实现计算器和计时器功能
更新时间：2022年07月21日 17:07:43 作者：肖帆咪
这篇文章主要为大家详细介绍了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>效果图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
本教程为大家介绍下使用js获取内联和链接中的样式，感兴趣的朋友可以参考下哈，希望对你有所帮助2013-04-04
本篇文章主要介绍了使用InstantClick.js让页面提前加载200ms，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
开发一个小程序在如今来讲是较为简单的,但其实还是有很多的知识点需要大家记住,这篇文章主要给大家介绍了关于微信小程序基本使用的相关资料,需要的朋友可以参考下2021-06-06
当select输入框中每输入一点内容的时候，在option中找出与内容匹配的选项显示在option的前面选项中，下面有个不错的示例，希望朋友们可以喜欢2013-11-11
这篇文章主要介绍了javascript如何实现多边形碰撞检测，帮助大家更好的理解和使用js，感兴趣的朋友可以了解下2020-10-10
这篇文章主要为大家详细介绍了采用访问器监听的方式实现简单数据双向绑定，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
如果你问我网站中最影响网站打开速度的是什么？我会告诉是网站中的javascript，简称JS。模板中引用的JS文件越多，打开速度越慢，这点我深有体会，不信你看看卢松松博客首页，使劲优化后依然有100K的文件2011-12-12
这篇文章主要给大家介绍了关于JS数组去重的九种高阶方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
这篇文章主要为大家详细介绍了JavaScript的面向对象，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-03-03
这篇文章主要介绍了12种JavaScript常用的MVC框架比较分析,以独特的视角分析了12中常见的JavaScript MVC框架各种优缺点,具有一定参考借鉴价值,需要的朋友可以参考下2015-11-11
最新评论