js计算器(复制成html文件即可用)

html篇:纯JavaScript 网页版计算器calc,支持多级运算 哈哈,这是第一次创作!不知道该说什么?只好先来一句 hello world!请多多关注!作者QQ:183 027 8686 第一篇不知道该写什么?但是,如果是一个IT小白,只是单纯的拥有一部电脑,那么,这部分代码绝对合适。 因为,这份代码无需其他支持,只要将它复制到后缀为.txt的文本文档中,通过浏览器运行即可。 这篇代码参考了部分的文章,再次感谢。 首先,是界面布局: <!DOCT... 阅读详情
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0035)http://l21.yunpan.cn/lk/QvevyNkkunxSP -->
<!-- 交流QQ群:26651479 -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>计算器</title>
    <META http-equiv='content-type' content="text/html; charset=utf-8"/>
<style type="text/css">
.btn {height:41px; width:67px; font-size:30px; font-weight:bolder;}
.text{height:41px; width:100%; font-size:23px; font-weight:bolder;}
</style>
</head>
<body>
    <table align="center">
        <tr><td colspan="4" style="text-align: center;"><input class="text" id='Text1' type="text"/></td></tr>
        <tr>
            <td><input class='btn' title="1" type="button" value="1"/></td>
            <td><input class='btn' title="2" type="button" value="2"/></td>
            <td><input class='btn' title="3" type="button" value="3"/></td>
            <td><input class='btn' title="加" type="button" value="+"/></td>
        </tr>
        <tr>
            <td><input class='btn' title="4" type="button" value="4"/></td>
            <td><input class='btn' title="5" type="button" value="5"/></td>
            <td><input class='btn' title="6" type="button" value="6"/></td>
            <td><input class='btn' title="减" type="button" value="-"/></td>
        </tr>
        <tr>
            <td><input class='btn' title="7" type="button" value="7"/></td>
            <td><input class='btn' title="8" type="button" value="8"/></td>
            <td><input class='btn' title="9" type="button" value="9"/></td>
            <td><input class='btn' title="乘" type="button" value="*"/></td>
        </tr>
        <tr>
            <td><input class='btn' title="小数点" type="button" value="."/></td>
            <td><input class='btn' title="0" type="button" value="0"/></td>
            <td><input class='btn' title="计算结果" type="button" value="=" onclick="ev()" /></td>
            <td><input class='btn' title="除" type="button" value="/"/></td>
        </tr>
        <tr>
            <td><input class='btn' title='开根号' type="button" value="√" onclick="SQRT()" /></td>
            <td><input class="btn" title='平方' type="button" value="²" onclick="Pow()" /></td>
            <td><input class="btn" title='清空' type="button" value="C" onclick="clean()" /></td>
            <td><input class="btn" title='删除一位' type="button" value="←" onclick="del()" /></td>
        </tr>
    </table>


    <div>运算记录:</div>
    <textarea style="width:98%" rows="15" id="logText"></textarea>
    注:输入框可键盘输入,也可用小键盘点击输入。输入框内按回车或者“=”会自动计算结果<br/>
    交流QQ群:26651479
</body>
</html>




<script language="javascript" type="text/javascript">
// 输入框
var inputText = document.getElementById('Text1');
// 运算记录
var logText = document.getElementById('logText');


// 给文本框赋值
function addText(event) {
    event = event || window.event;
    var element = event.target || event.srcElement;
    inputText.value += element.value;
    // 设置焦点
    inputText.focus();
}


// 计算文本框内的表达式
function ev() {
    var value = inputText.value;
    if (value) {
        try {
            var result = eval(value);
            // 显示结果
            inputText.value = result;


            // 记录结果
            logText.value = value + '=' + result + '\n' + logText.value;
        }
        catch (e) {
            alert(e.description);
        }
    }
    // 设置焦点
    inputText.focus();
}


//把文本框内的内容清空
function clean() {
    inputText.value = '';
    // 设置焦点
    inputText.focus();
}


//开根号
function SQRT() {
    inputText.value = Math.sqrt(inputText.value);
    // 设置焦点
    inputText.focus();
}


//平方
function Pow() {
    inputText.value = Math.pow(inputText.value, 2);
    // 设置焦点
    inputText.focus();
}


//删除一位
function del() {
    var value = inputText.value;
    if (value) inputText.value = value.substring(0, value.length - 1);
    // 设置焦点
    inputText.focus();
}


// 添加事件
(function() {
    var elements = document.getElementsByTagName('input');
    for (var i=0, len=elements.length; i<len; i++) {
        var element = elements[i];
        // 按钮, 点击事添加一个符号到输入框(有 onclick 事件的表示有自己独特的事件,这里不处理)
        if (element.type == 'button' && !element.onclick) {
            element.onclick = addText;
        }
        // 输入框, 输入“=”号或者按回车, 则计算结果
        else if (element.type == 'text') {
            element.onkeydown = function(event) {
                event = event || window.event;
                var currentKey = event.keyCode || event.charCode;
                // 13:回车键, “=”号在火狐是61,在IE是187
                if (13==currentKey || (event.shiftKey === false && (61==currentKey || 187==currentKey))) {
                    ev();
                    return false;
                }
                return true;
            }
        }
    }
    // 设置焦点
    inputText.focus();
})();
</script>
基于JavaScript的网页版【定期存款计算器 - DepositCaculator v1.0】 使用方法:复制全部源代码,另存为.html文件。 免责声明:此程序为作者练习作品,不保证结果100%正确,对使用本程序造成的任何损失概不负责。 定期存款计算器 - DepositCaculator v1.0 <!-- var principa 阅读详情

相关推荐

js如何计算年龄?如何创建Javascript 年龄计算器?

如何创建年龄计算器?要构建这个项目,我们需要HTML,CSS和Javascript。让我们来看看这个项目是如何工作的。项目由输入日期组成。用户必须单击它并选择他们的出生日期或任何所需的日期。在此之后,用户必须单击计算按钮。用户单击计算按钮后,我们会根据他们输入的日期(以年、月和日为单位)显示他们的年龄。

南北极之间 1270

js 加强 利用js实现计算器,带有正负号。

在原来的基础上,多定义两个变量 var flag=0;//用于判断正负号,0为负号,1为正号。 var temp3=1; //用于保存正负号 点击了正负号的事件为 function getFuHao(){ if(flag==1){ temp3=1; flag=0; }else{ temp3=-1; flag=1; } ...

u014164005的博客 1783

html+js+css实现简易计算器

通过这段简单的HTML、CSS和JavaScript代码,我们已经成功创建了一个基本的计算器。当然,这只是一个起点。你可以根据需要添加更多功能,比如支持更多的数学运算,或者改进用户界面。现在,打开你的文本编辑器,开始你的编码之旅吧!

m0_62237068的博客 1141

js css 实现简易计算器

JS+CSS3实现计算器特效 C 7 8 9 + 4 5 6 - 1 2 3 ÷ 0 . = x // Get all the keys from document var keys = document.querySelectorAll('#calculator

xyw10000 1438

基于STM32F103与AD8232的便携式心电监测系统设计与实现

本文详细介绍基于STM32F103微控制器与AD8232心电传感器模块的便携式心电监测系统设计与实现。系统通过ADC采集心电信号,结合软件滤波算法处理基线漂移和工频干扰,并利用OLED屏幕实时显示波形,具有低成本、高实用性的特点,适用于健康监测与嵌入式学习。

m5n6o7的博客 737

基于opencv-ANN的水果识别模型训练

本文通过opencv-ann-mlp训练模型,实现对五种水果进行分类识别。本文详细介绍该项目的各个过程,包括数据准备、预处理、样本读取、训练数据集制作、训练标签制作、模型参数设置、模型训练,模型测试验证等,总结该过程需要注意的事项。

qq_15985873的博客 3972

HTML、CSS、JavaScript 实现一个简单的计算器

计算器效果图: 代码如下: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;计算器&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;script&

slvayf.top 1553

采用超级电容设计的UPS不间断电源,用于掉电数据保存,可续航10-60秒

关键词:树莓派 CM4 UPS 不间断电源 掉电保存 超级电容 SuperCap 充电 升压 续航 10F 法拉电容 Mcuzone 野芯科技 概述:我们经常会遇到系统意外掉电的情况,对于一些可靠性要求很高的工业现场设备或者运行过程中有重要数据需要保存的平台就需要UPS电源了。常规的UPS采用后备锂电池设计,具备无缝切换、续航时间长、稳定可靠等特点,但同时也有价格过高、体积过大的缺点。对于不少仅需在检测到系统掉电后对数据进行保存即可的应用而言,这些标准的UPS电源就不太合适,为此我...

6603

HTML网页计算器

#first{/*第一个数字输入框*/ width:210px; border:0px; } #second{/*运算符号输入框*/ width:210px; border:0px; } #three{/*第二个数字输入框*/ width:70px; border:0px; } #four{/*结果输入框,设置文字方向为右*/ width:140px; border:0

huzijia888的博客 6271

2021-10-29 atcoder ABC157——B - Bingo

B - Bingo 先标记,然后暴力判断,这样最清晰最好想。 #include<iostream> #include<algorithm> #include<cstring> using namespace std; typedef long long LL; int a[110][110],b[110]; int main() { for(int i=1;i<=3;i++) for(int j=1;j<=3;j++) cin>>a[i]

honeistbutter的博客 337

自抗扰(ADRC)控制原理及控制器设计

自抗扰控制原理以及控制器设计

weixin_43487974的博客 3万+

JavaScript 模拟计算器

JavaScript:模拟简易计算器的实现 我是一名在校大学生,初次写博客,希望各位大佬不喜勿喷,这个小程序,仅供参考,希望对大家有所帮助。 效果展示: 分析过程: 使用 &amp;lt;marquee&amp;gt;&amp;lt;/marquee&amp;gt;标签,是Welcome to calcuators滚动效果的实现标,类似于跑马灯,从右向左。 定义5个&amp;lt;input&amp;gt;标签,其中3个text,1个sel.

涂涂写写的笔记 2607

从Palantir到AI时代:Forward Deployed Engineer模式的深度解析

《从Palantir到AI时代:FDE模式的创新与挑战》摘要:Palantir开创的前置部署工程师(FDE)模式正在成为AI创业公司的标配。该模式通过现场工程师深入了解客户需求,填补产品与实际应用间的鸿沟,颠覆了传统SaaS规模化路径。核心优势在于将定制化服务转化为产品发现机制,特别适合高度异质化的AI市场。成功关键在于平衡定制与标准化,通过合同价值增长、产品杠杆效应等独特指标衡量成效。FDE人才需要兼具领域洞察力与快速原型能力。这一模式表明,在AI等新兴领域,深入客户现场可能比单纯追求技术突破更能创造商业

老孙 | Ethan Sun 的博客:AI 智能体与 AI 原生软件的工程实践 4530

HTML+CSS+JS制作一个简单的计算器

用HTML+CSS+JS制作了一个简单的计算器,它的使用类似于生活中使用的计算器。暂时未发现有任何计算上的错误,有问题请联系我,谢谢。 最终成果图: HTML代码块: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&gt

Judy-Lin 1835

VS2019编译使用log4cplus 1.2.0

logger.properties 文件。第三步,创建项目来测试,配置库。第二步,使用VS2019编译。

h a 6 6 6 c k 为 你解决复杂难题! 527

71.qt quick-可伸展菜单-抽屉栏示例 通用QML界面(一键换肤)

特点: 支持动态添加item、删除item、自适应界面 附带添加删除、展开等动画 同时支持qwidget、qml加载 支持number提示(比如消息数量等) 侧边抽屉栏支持动画伸展 支持换肤、拖拽、最大化等

抵抗时间扭曲,坚持做一件有意义的事 5285

使用html+css+js实现简易计算器

使用html+css+js实现简易计算器,效果图如下: html代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible.

办公研究所 853

VB摄像头监控

该VB模块可对摄像头捕获的画面进行录像等,可在创建的窗口进行控制

html+css+js制作一个简易计算器

calculator.html <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymelea...

weixin_33749131的博客 3051

霍尼韦尔SoftMaster使用说明

霍尼韦尔SoftMaster使用说明

OV9734 DATASHEET,完整规格书

OV9734完整规格书,包括电气参数,尺寸规格,寄存器配置表等

计算器用js html css实现,使用html+css+js实现计算器的代码示例

使用html+css+js实现计算器的代码示例发布时间:2020-04-27 10:36:50来源:亿速云阅读:711作者:小新今天小编给大家分享的是使用html+css+js实现计算器的代码示例,相信很多人都不太了解,为了让大家更加了解html+css+js实现计算器的代码,所以给大家总结了以下内容,一起往下看吧。一定会有所收获的哦。效果图:代码如下,复制即可使用:/* 主体 */.counte...

weixin_39538693的博客 663

pscad IEEE标准系统搭建说明

pscad IEEE标准系统搭建说明,包含典型的IEEE 9节点、14节点、30节点、39节点和118节点系统。内含标准测试系统的原始数据和潮流结果。

使用html+css+js实现计算器

使用html+css+js实现计算器  使用html+css+js实现计算器,开启你的计算之旅吧   效果图:     代码如下,复制即可使用: &lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;    &lt;head&gt; &lt;meta charset="utf-8"&gt; ...

qq_36190858的博客 960

html css制作计算器,使用html+css+js实现计算器

使用html+css+js实现计算器,开启你的计算之旅吧效果图:代码如下,复制即可使用:/* 主体 */.counter{width: 396px;height: 486px;background-color: #F2F2F2;border: 1px solid #C2C3C6;margin: 50px auto;}/* 显示框 */#box {height: 70px;width: 336px;...

weixin_36465108的博客 765

计算器html js php代码,使用html+css+js实现计算器

使用html+css+js实现计算器,开启你的计算之旅吧效果图:代码如下,复制即可使用:/* 主体 */.counter{width: 396px;height: 486px;background-color: #F2F2F2;border: 1px solid #C2C3C6;margin: 50px auto;}/* 显示框 */#box {height: 70px;width: 336px;...

weixin_33773996的博客 370

html中函数eval,js代码借助函数eval制作简易计算器

之前我们实现一些简易的计算器功能,是通过判断运算符来实现简单的一元运算,但是eval这个函数可以将包含数字和运算符的字符串进行计算,得出运算结果。1.先写html+css代码,做出一个计算器样子。CSS样式代码://计算器样式table {border-collapse: collapse;font-size: 20px;margin: 50px auto;}td {text-align: cen...

weixin_29785723的博客 866

js虚拟计算器

今天分享一个计算器的代码实现效果 可以实现加,减,乘,除的简单运算 也是用js写的,喜欢的可以拿去玩玩, 有什么写得不好的,下面评论,我也好修改 这是HTML的效果图: 下面是一些代码的展示 这是HTML的代码 <h1>简易计算器</h1> <div id="display" style="height: 80px;width: 400px;backgrou...

Demo_csdn 657

利用HTML+JS+CSS实现简单的网页计算器,附html所有源代码,可直接黏贴运行

最终实现的效果图 源码 <!doctype html> <html> <head> <meta charset="utf-8"> <title>Calculator</title> </head> <style> *{ font-size...

Rosen's 6039

HTML+CSS+JS实现 ❤️基于Javascript简单计算器特效❤️

???? 作者主页:Java李杨勇 ???? 简介:Java领域优质创作者????、Java李杨勇公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我,都给你】 ???? 欢迎点赞 ???? 收藏 ⭐留言 ???? 效果演示:文末获取源码 代码目录: 主要代码实现: CSS样式: body { display: flex; justify-content: center; align-items: center; min-

java李阳勇的博客 1504
上一篇: ubuntu 操作笔记
daillo
博客等级 码龄18年 42粉丝 34原创
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值