HTML CSS, JavaScript 计算器
效果图：
代码：
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/* Basic Reset */ * {
border: none;
font-family: 'Open Sans', sans-serif;
margin: ;
padding: ;
} body {} .center {
background-color: #fff;
border-radius: %;
height: 600px;
margin: auto;
width: 600px;
} h1 {
color: #;
font-size: 30px;
margin-top: 20px;
padding-top: 50px;
display: block;
text-align: center;
text-decoration: none;
} a {
color: #;
font-size: 30px;
display: block;
text-align: center;
text-decoration: none;
padding-top: 20px;
} form {
background-color: #;
box-shadow: 4px 4px #3d4a65;
margin: 40px auto;
padding: 40px 30px 40px;
width: 280px;
} .btn {
outline: none;
cursor: pointer;
font-size: 20px;
height: 45px;
margin: 5px 5px 10px;
width: 45px;
} .btn:first-child {
margin: 5px 5px 10px;
} .btn,
#display,
form {
border-radius: 25px;
} #display {
outline: none;
background-color: #98d1dc;
box-shadow: inset 6px 6px 0px #3facc0;
color: #;
font-size: 20px;
height: 47px;
text-align: right;
width: 165px;
padding-right: 10px;
margin-left: 10px;
} .number {
background-color: #72778b;
box-shadow: 5px #5f6680;
color: #dededc;
} .number:active {
box-shadow: 2px #5f6680;
-webkit-transform: translateY(2px);
-ms-transform: translateY(2px);
-moz-tranform: translateY(2px);
transform: translateY(2px);
} .operator {
background-color: #dededc;
box-shadow: 5px #bebebe;
color: #72778b;
} .operator:active {
box-shadow: 2px #bebebe;
-webkit-transform: translateY(2px);
-ms-transform: translateY(2px);
-moz-tranform: translateY(2px);
transform: translateY(2px);
} .other {
background-color: #e3844c;
box-shadow: 5px #e76a3d;
color: #dededc;
} .other:active {
box-shadow: 2px #e76a3d;
-webkit-transform: translateY(2px);
-ms-transform: translateY(2px);
-moz-tranform: translateY(2px);
transform: translateY(2px);
}
</style>
</head> <body>
<div class="center">
<h1>HTML CSS, JavaScript 计算器</h1>
<a href="https://github.com/guuibayer/simple-calculator" target="_blank"><i class="fa fa-github"></i></a>
<form name="calculator">
<input type="button" id="clear" class="btn other" value="C">
<input type="text" id="display">
<br>
<input type="button" class="btn number" value="" onclick="get(this.value);">
<input type="button" class="btn number" value="" onclick="get(this.value);">
<input type="button" class="btn number" value="" onclick="get(this.value);">
<input type="button" class="btn operator" value="+" onclick="get(this.value);">
<br>
<input type="button" class="btn number" value="" onclick="get(this.value);">
<input type="button" class="btn number" value="" onclick="get(this.value);">
<input type="button" class="btn number" value="" onclick="get(this.value);">
<input type="button" class="btn operator" value="*" onclick="get(this.value);">
<br>
<input type="button" class="btn number" value="" onclick="get(this.value);">
<input type="button" class="btn number" value="" onclick="get(this.value);">
<input type="button" class="btn number" value="" onclick="get(this.value);">
<input type="button" class="btn operator" value="-" onclick="get(this.value);">
<br>
<input type="button" class="btn number" value="" onclick="get(this.value);">
<input type="button" class="btn operator" value="." onclick="get(this.value);">
<input type="button" class="btn operator" value="/" onclick="get(this.value);">
<input type="button" class="btn other" value="=" onclick="calculates();">
</form>
</div>
</body> </html>
<script type="text/javascript">
/* limpa o display */
document.getElementById("clear").addEventListener("click", function() {
document.getElementById("display").value = "";
});
/* recebe os valores */
function get(value) {
document.getElementById("display").value += value;
} /* calcula */
function calculates() {
var result = ;
result = document.getElementById("display").value;
document.getElementById("display").value = "";
document.getElementById("display").value = eval(result);
};
</script>
HTML CSS, JavaScript 计算器的更多相关文章
- html css javascript 加载的顺序
html /css /javascript 这三者的加载顺序影响整个页面的加载速度.而加载速度的快慢直接影响pv(访问量),而且会影响经济收入.在大网站中,可能打开速度快一秒,一年能多带来上亿的收入. ...
- Sublime Text插件：HTML+CSS+JAVASCRIPT+JSON快速格式化[转]
今天在github上乱逛,无意间找到victorporof分享的htmlpretty插件,特做推荐: 先看看他是怎么描述htmlpretty的: This is a Sublime Text 2 an ...
- html+css+javascript实现列表循环滚动示例代码
使用html+css+javascript实现列表循环滚动,设置时间定时,在规定的时间内替换前一个节点的内容,具体示例如下,感兴趣的朋友可以参考下 说明:设置时间定时,在规定的时间内替换前一个节点的内 ...
- HTML+CSS+JAVASCRIPT 总结
1. HTML 1: <!doctype html> 2: <!-- This is a test html for html, css, javascript --> 3: ...
- Umbraco（3） - CSS & Javascript（翻译文档）
原文地址:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/umbraco3css-javascript/ CSS & Jav ...
- 原创的基于HTML/CSS/JavaScript的层级目录树
之前参加过一些基于HTML/CSS/JavaScript的项目,当在页面中需要生成一颗目录树时,总是首先想着网上有没有现成的生成树的源代码,比如dtree.zthee,或者使用一些javascript ...
- MiniCodeEditor：只有168字节的在线Html/CSS/JavaScript编辑器
博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:MiniCodeEditor:只有168字节的在线Html/CSS/JavaScript编辑器.
- CSS+Javascript的那些框架
CSS CSS 制作框架 SASS http://www.oschina.net/p/sass Blueprint http://www.oschina.net/p/blueprintcss Ela ...
- 3 Ways to Preload Images with CSS, JavaScript, or Ajax---reference
Preloading images is a great way to improve the user experience. When images are preloaded in the br ...
随机推荐
- zoj——3556 How Many Sets I
How Many Sets I Time Limit: 2 Seconds Memory Limit: 65536 KB Give a set S, |S| = n, then how ma ...
- HDU——1130 How Many Trees?
How Many Trees? Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)T ...
- 用ZooKeeper做为注册中心搭建基于Spring Cloud实现服务注册与发现
前提: 先安装好ZooKeeper的环境,搭建参考:http://www.cnblogs.com/EasonJim/p/7482961.html 说明: 可以再简单的理解为有两方协作,一个是服务提供这 ...
- 简单解决 WIN10更新后 远程桌面提示 CredSSP加密Oracle修正的问题
更新WIN10后,打开远程桌面,提示: 以 管理员身份打开 cmd或者PowerShell,贴入: REG ADD HKLM\Software\Microsoft\Windows\CurrentVer ...
- Android实现微博分享及其注意事项
在前面我写了两篇关于QQ和微信的分享(http://blog.csdn.net/dawanganban/article/details/42015249)(http://blog.csdn.net/d ...
- 苹果iPhone连接wifi就进去www.apple.com主页 下边显示 <HTML><HEAD><TITLE>Success</TITLE></HEAD><BODY>Success</BODY>
苹果iPhone连接wifi就进去www.apple.com主页 下边显示 <HTML><HEAD><TITLE>Success</TITLE>< ...
- linux下uart应用编程
目的:在用户空间通过读写uart设备文件,控制uart串口发送和接收数据. 在用户空间设置uart波特率.奇偶校验使能等操作是通过termios结构体和termios库函数完毕.须要在应用程序中包括t ...
- ObjectiveC开发教程--字符串的连接
NSString *type = @"hello"; NSString *subtype = @"good"; NSString *typesub = [NSS ...
- Android开发：Eclipse中SqliteManager插件使用
通常开发Android的时候要使用到数据库操作,会遇到下面小问题: 数据库文件在哪?怎样訪问或操作? 能够通过:打开DDMS->File Explorer看到的sqlite数据库在eclipse ...
- LeetCode 438. Find All Anagrams in a String （在字符串中找到所有的变位词）
Given a string s and a non-empty string p, find all the start indices of p's anagrams in s. Strings ...