广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >js实现计算器和计时器功能
  • 957

0
分享到

js实现计算器和计时器功能

2024-04-02 19:04:59 957人浏览 泡泡鱼
摘要

本文实例为大家分享了js实现计算器和计时器的具体代码，供大家参考，具体内容如下 完成简单的计算器 <!DOCTYPE html> <html>     <

本文实例为大家分享了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>

效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: js实现计算器和计时器功能

本文链接: https://www.lsjlt.com/news/164876.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档
去做题
猜你喜欢
  • js实现计算器和计时器功能
    本文实例为大家分享了js实现计算器和计时器的具体代码，供大家参考，具体内容如下 完成简单的计算器 <!DOCTYPE html> <html>     <...
    99+
    2022-11-13
  • js版实现计算器功能
    本文实例为大家分享了js实现计算器功能的具体代码，供大家参考，具体内容如下 在老师的带领下完成了这个简单的计算器，这是一个神奇的过程，计算器的基本功能都是有的。虽然是个简单的计算器，...
    99+
    2022-11-12
  • js+css实现计算器功能
    本文实例为大家分享了js+css实现计算器功能的具体代码，供大家参考，具体内容如下 目前仅实现了最基础的运算功能 (因为是js的运算内核，有些小数点计算并不准确，懒得去做去小数点后几...
    99+
    2022-11-13
  • js中如何实现计算器功能
    这篇文章将为大家详细讲解有关js中如何实现计算器功能，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。代码如下：<!DOCTYPE html> ...
    99+
    2022-10-19
  • 原生JS实现简单计算器功能
    本文实例为大家分享了JS实现简单计算器功能的具体代码，供大家参考，具体内容如下 使用html和css写出计算器的基本结构和样式，用原生JS实现计算器的加减乘除运算功能，只能计算简单的...
    99+
    2022-11-13
  • js如何实现日期计算器功能
    这篇文章主要为大家展示了“js如何实现日期计算器功能”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“js如何实现日期计算器功能”这篇文章吧。日期计算器html代码...
    99+
    2022-10-19
  • js如何实现秒表计时器功能
    这篇文章主要介绍了js如何实现秒表计时器功能，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。效果图： 下面贴代码：<!DOCT...
    99+
    2022-10-19
  • js如何实现简单的计算器功能
    这篇文章主要介绍js如何实现简单的计算器功能，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！示例代码：<!DOCTYPE html>...
    99+
    2022-10-19
  • IO实现计算器功能
    本文实例为大家分享了IO实现计算器功能的具体代码，供大家参考，具体内容如下 代码： // // ViewController.m // Fraction_Calculato...
    99+
    2022-05-27
    IOS 计算器
  • C++实现计算器功能
    本文实例为大家分享了C++实现计算器功能的具体代码，供大家参考，具体内容如下 说明： 前面简单尝试过计算器，只能支持加减乘除，这次完善了计算器的功能：支持带括号的表达式；支持&plu...
    99+
    2022-11-13
  • C#实现计算器功能
    本文实例为大家分享了C#实现计算器功能的具体代码，供大家参考，具体内容如下 在刚刚接触c#的时候，就想做一个简单加减乘除计算器。这就是目标，可惜一直没有动手去做，今天特意把它简单做了...
    99+
    2022-11-13
  • Python实现计算器功能
    #!/usr/bin/python # -*- coding:UTF-8 -*- def sum(options,x,y):     t = options     if(t == "+"):...
    99+
    2023-01-31
    计算器 功能 Python
  • Android实现计时器功能
    本文实例为大家分享了Android实现计时器功能的具体代码，供大家参考，具体内容如下 计时器工具类 import android.annotation.SuppressLint;...
    99+
    2022-11-12
  • 原生JS怎么实现简单计算器功能
    本篇内容主要讲解“原生JS怎么实现简单计算器功能”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“原生JS怎么实现简单计算器功能”吧!使用html和css写出计算器的基本结构和样式，用原生JS实现计...
    99+
    2023-06-29
  • JS怎么实现倒计时功能
    本篇内容主要讲解“JS怎么实现倒计时功能”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“JS怎么实现倒计时功能”吧!HTML代码：<div id=...
    99+
    2022-10-19
  • js实现简易计数器功能
    本文实例为大家分享了js实现简易计数器功能的具体代码，供大家参考，具体内容如下 实现简易计数器 可进行三个操作,开始计数,暂停计数,复位操作 (使用计时函数事件) <html&...
    99+
    2022-11-13
    js 计数器
  • jquery实现计算器小功能
    本文实例为大家分享了jquery实现计算器功能的具体代码，供大家参考，具体内容如下 用jquery实现计算器对于我来说有三个难点 1.单纯的html页面，怎么实现计算2.显示屏用什么...
    99+
    2022-11-13
  • iOS实现计算器小功能
    本文实例为大家分享了iOS实现计算器小功能，供大家参考，具体内容如下 本文利用ios实现计算器app，后期将用mvc结构重构 import UIKit class CalculVi...
    99+
    2022-11-13
  • Python tkinter实现计算器功能
    本文实例为大家分享了Python tkinter实现计算器功能的具体代码，供大家参考，具体内容如下 python版本：3.5 一.计算器的功能描述 今天我们用python来实现一个计...
    99+
    2022-11-13
  • python实现计算器小功能
    本文实例为大家分享了python实现计算器功能的具体代码，供大家参考，具体内容如下 1. 案例介绍 本例利用 Python 开发一个可以进行简单的四则运算的图形化计算器，会用到 Tk...
    99+
    2022-11-12
软考高级职称资格查询
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作