HTML网页之计算器代码

最新推荐文章于 2024-07-10 14:03:37 发布
最新推荐文章于 2024-07-10 14:03:37 发布
阅读量859 收藏 1
点赞数 1
文章标签： javascript ViewUI
原文链接：https://yq.aliyun.com/articles/10473
版权

计算器网页效果显示：点击这里！



<script> 
function show(){ 
var date = new Date(); //日期对象 
var now = ""; 
now = date.getFullYear()+"年"; //读英文就行了 
now = now + (date.getMonth()+1)+"月"; //取月的时候取的是当前月-1如果想取当前月+1就可以了 
now = now + date.getDate()+"日"; 
now = now + date.getHours()+"时"; 
now = now + date.getMinutes()+"分"; 
now = now + date.getSeconds()+"秒"; 
document.getElementById("nowDiv").innerHTML = now; //div的html是now这个字符串 
setTimeout("show()",1000); //设置过1000毫秒就是1秒，调用show方法 
} 
</script>


<!DOCTYPE html> 
<html> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head> 
<title>Calculator</title> 


<!--将按键内容以字符串形式存储在文字框中当按钮为“=”时，调用eval方法计算结果然后将结果输出文字框中--> 
<script type="text/javascript"> 
var numresult; 
var str; 
function onclicknum(nums) { 
str = document.getElementById("nummessege"); 
str.value = str.value + nums; 
} 
function onclickclear() { 
str = document.getElementById("nummessege"); 
str.value = ""; 
} 
function onclickresult() { 
str = document.getElementById("nummessege"); 
numresult = eval(str.value); 
str.value = numresult; 
} 
</script> 


<style type="text/css">
img{
  position:absolute;
  left:1100px;
  top:100px;
  }
</style>
</head> 
<body>   <!用来显示时间>
<h2 align=right><font color="#cc0033">
<body οnlοad="show()">   <!-- 网页加载时调用一次 以后就自动调用了--> 
<div id="nowDiv"></div> 
</font></h2>
</body>
<body bgcolor="#9900ff" > 
<a  href="../index.html"><img border="0" src="./image/4.jpg" alt="主页面" title="返回主页面"></a>


<font color="red" size="6"><center>网络人VS灰鸽子工作室</center></font>
<p></p>
<!--定义按键表格,每个按键对应一个事件触发--> 
<table border="1" align="center" bgColor="#6633CC" 
style="height: 350px; width: 270px"> 
<tr> 
<td colspan="4"> 
<input type="text" id="nummessege" 
style="height: 90px; width: 350px; font-size: 50px" /> 
</td> 
</tr> 
<tr> 
<td> 
<input type="button" value="1" id="1" οnclick="onclicknum(1)" 
style="height: 70px; width: 90px; font-size: 35px"> 
</td> 
<td> 
<input type="button" value="2" id="2" οnclick="onclicknum(2)" 
style="height: 70px; width: 90px; font-size: 35px"> 
</td> 
<td> 
<input type="button" value="3" id="3" οnclick="onclicknum(3)" 
style="height: 70px; width: 90px; font-size: 35px"> 
</td> 
<td> 
<input type="button" value="+" id="add" οnclick="onclicknum('+')" 
style="height: 70px; width: 90px; font-size: 35px"> 
</td> 
</tr> 
<tr> 
<td> 
<input type="button" value="4" id="4" οnclick="onclicknum(4)" 
style="height: 70px; width: 90px; font-size: 35px"> 
</td> 
<td> 
<input type="button" value="5" id="5" οnclick="onclicknum(5)" 
style="height: 70px; width: 90px; font-size: 35px"> 
</td> 
<td> 
<input type="button" value="6" id="6" οnclick="onclicknum(6)" 
style="height: 70px; width: 90px; font-size: 35px"> 
</td> 
<td> 
<input type="button" value="-" id="sub" οnclick="onclicknum('-')" 
style="height: 70px; width: 90px; font-size: 35px"> 
</td> 
</tr> 
<tr> 
<td> 
<input type="button" value="7" id="7" οnclick="onclicknum(7)" 
style="height: 70px; width: 90px; font-size: 35px"> 
</td> 
<td> 
<input type="button" value="8" id="8" οnclick="onclicknum(8)" 
style="height: 70px; width: 90px; font-size: 35px"> 
</td> 
<td> 
<input type="button" value="9" id="9" οnclick="onclicknum(9)" 
style="height: 70px; width: 90px; font-size: 35px"> 
</td> 
<td> 
<input type="button" value="*" id="mul" οnclick="onclicknum('*')" 
style="height: 70px; width: 90px; font-size: 35px"> 
</td> 
</tr> 
<tr> 
<td colspan="2"> 
<input type="button" value="0" id="0" οnclick="onclicknum(0)" 
style="height: 70px; width: 190px; font-size: 35px"> 
</td> 
<td> 
<input type="button" value="." id="point" οnclick="onclicknum('.')" 
style="height: 70px; width: 90px; font-size: 35px"> 
</td> 
<td> 
<input type="button" value="/" id="division" 
οnclick="onclicknum('/')" 
style="height: 70px; width: 90px; font-size: 35px"> 
</td> 
</tr> 
<tr> 
<td colspan="2"> 
<input type="button" value="Del" id="clear" 
οnclick="onclickclear()" 
style="height: 70px; width: 190px; font-size: 35px" /> 
</td> 
<td colspan="2"> 
<input type="button" value="=" id="result" 
οnclick="onclickresult()" 
style="height: 70px; width: 190px; font-size: 35px" /> 
</td> 
</tr> 
</table> 
    <font size="5" color="ff99ff">Design by:<a target="_blank" href="http://blog.csdn.net/qq_21792169/article/details/50629515" >网络人VS灰鸽子</a> 2016-3-3&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;邮箱：linux_drv@yeah.net</font>

<! 这里为了方便我就直接添加空格来布局了，这里可以使用style>
</body> 
</html> 

weixin_33973600
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
网页计算器 html代码原理,HTML网页之计算器代码
weixin_32757449的博客
05-31 1102
计算器网页效果显示：点击这里！function show(){var date = new Date(); //日期对象var now = "";now = date.getFullYear()+"年"; //读英文即可了now = now + (date.getMonth()+1)+"月"; //取月的时候取的是当前月-1假设想取当前月+1就能够了now = now + date.getDate...
HTML编写的计算器
爱吃蘑菇的小男孩
07-21 1万+
第一种：简易计算器代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>简易计算器</title> </head> <style> table { ...
WEB html计算器源码
07-31
web计算器简单列子，源代码在里面希望有所帮助。附加CSS界面美化功能。
html实现计算器
zmk0820的博客
03-24 4555
html实现计算器
简单网页计算器代码
热门推荐
qq_33721778的博客
11-13 1万+
注：本人为初学者，欢迎各位大神指教 简单计算器实现效果： HTML代码counter.html 计算器
做一个简易计算器
永无餍足的博客
04-14 3699
在学习js之后，结合html, css, js做出一个简易计算器
用JavaScript和HTML实现一个精美的计算器
黑夜开发者的博客
07-29 3016
计算器是我们日常生活中经常使用的工具之一，可以帮助我们进行简单的数学运算。在本博文中，我将使用JavaScript编写一个漂亮的计算器，并添加加减乘除功能。这个计算器将有一个精美的用户界面，包含9个数字按钮和加减乘除操作符。好了，本文的内容就分享到这里。希望你在使用这个精美计算器的过程中有所收获，它不仅能帮助你进行基本的数学运算，还能为你提供一个愉快的使用体验。如果你对编程感兴趣，也欢迎自行扩展功能，让这个计算器变得更加强大。
网页版计算器代码HTML手机计算器
04-27
网页版计算器代码HTML手机计算器是一种基于HTML、CSS和JavaScript实现的计算工具，它可以在网页上为用户提供基础的数学运算功能，如加法、减法、乘法和除法。这样的计算器设计简洁，易于使用，尤其在没有物理计算器...
js网页在线计算器工具代码
06-24
以下是对这个网页计算器工具的关键知识点的详细说明： 1. **HTML 结构**：计算器通常由一系列按钮和一个显示屏组成。HTML 用于创建这些元素的结构，例如`<input>`标签用于创建数字显示区域，`<button>`标签用于创建...
简单好看的html5网页计算器代码.zip
07-11
一款简单好看的html5网页计算器代码，精美的html5 css3计算器样式特效。 js代码  [removed]  function s(v) { document.getElementById('res').value = v }  function a(v) { document.getElementById('res...
js网页在线科学计算器代码
06-11
总之，这个“js网页在线科学计算器代码”项目提供了一个基础的计算框架，通过JavaScript实现了基本的计算功能。开发者可以根据自身需求进一步定制和优化，比如改进界面设计，增加更多高级功能，或者集成到其他项目中...
用 js+html 实现一个网页计算器
05-31
使用js + html 实现的简单的网页计算器，可以实现加、减、乘、除复杂运算，二进制、八进制、十六进制转换、sin、cos、tan三角函数运算、acos、atan、asin反三角函数运算、开平方、log、随机数生成、指数运算、四舍五...
用HTML实现简易版计算器
lkllkl123123的博客
08-13 1万+
计算器功能：实现了加减乘除、清零、回退、四则运算等等 HTML部分：用表格添加按键，用div块显示内容 CSS部分：将显示的内容定位到div块右下角 JavaScript部分：通过innerTHML属性添加 / 获取所需计算的内容，再调用eval方法将获取到的内容转换为js代码进行计算........................
好看的前端计算器代码分享（html+css+js制作计算器）
jakelihua
04-02 2223
简介：这里分享的html+css+js制作的几个计算器代码。demo演示
HTML程序大全(1)：简易计算器
joe_g12345的博客
12-05 2687
这是一个简单的计算器，使用HTML、CSS和JavaScript实现。HTML代码创建了一个计算器的界面，CSS代码设置了计算器的样式，JavaScript代码实现了计算器的功能。这个计算器可以执行加、减、乘、除和取模运算。同时，它还支持小数点和多位数运算。
HTML实现计算器
m0_62727420的博客
07-03 1万+
HTML实现计算器
【HTML】简易计算器
Sunny的博客
03-05 5335
设计一个简易计算器，在“操作数”标签右侧的两个文本框中输入操作数，当单击“+，-，*，/”按钮时，对两个操作数进行运算并将结果填入到“结果”标签右侧的文本框中。
html实现计算器源码
xcLeigh
11-21 1827
html实现计算器源码，计算器源码，简易计算器功能实现，加减乘除，平方，根号等基本算数功能实现，代码上手简单，代码独立，可以直接使用。也可直接预览效果。
Webkit简介以及工作流程
最新发布
读心悦
07-10 315
WebKit是一个开源的浏览器引擎，最初由苹果公司基于KHTML（K Desktop Environment的HTML渲染引擎）开发，并广泛应用于Safari浏览器。随着时间的推移，WebKit也被其他多款浏览器和应用所采用，成为Web技术生态中的重要一员。WebKit的核心功能包括解析HTML、CSS、JavaScript等网页内容，并将其渲染为可视化的网页页面。它主要由WebCore（负责HTML解析、CSS样式计算和布局）和JavaScriptCore（负责JavaScript解释执行）两大部分组成。
网页前端简单计算器代码
10-25
以下是一个简单的网页前端计算器代码，可以进行加、减、乘、除四则运算： ```html <!DOCTYPE html> <html> 简单计算器 input[type="button"] { width: 50px; height: 30px; font-size: 16px; ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值