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 ...
随机推荐
- vue.js编程式路由导航 --- 由浅入深
编程式路由导航 实例中定义一个方法,这个方法绑定在标签上 然后就设置路由跳转 语法 this.$router.history.push('要跳转路由的地址') <!DOCTYPE html> ...
- [K/3Cloud]实现双击列表行后显示具体的某个单据明细。
列表插件重写void ListRowDoubleClick(ListRowDoubleClickArgs e)事件,在事件中处理具体逻辑,具体代码如下 public override void Lis ...
- Inversion
Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 4176 Accepted: 1857 Description The i ...
- 错误代码： 1045 Access denied for user 'skyusers'@'%' (using password: YES)
1. 错误描写叙述 GRANT ALL PRIVILEGES ON *.* TO root@"%" IDENTIFIED BY "."; 1 queries e ...
- 线段树+离散化 IP地址段检查 SEGMENT TREE
Problem: Give a series of IP segments, for example, [0.0.0.1-0.0.0.3], [123.234.232.21-123.245.21.1] ...
- 通达信版F10检索工具下载
通达信版的F10採用的是维赛特的F10资料. 维赛特的F10资料请前往:http://www.vsatsh.cn/xzzq.aspx 下载. 通达信版的F10检索工具下载地址:http://pan. ...
- Codeforces Round #327 (Div. 2)C. Median Smoothing 构造
C. Median Smoothing A schoolboy named Vasya loves reading books on programming and mathematics. He ...
- checkbox是否选中判断
三种方式: $('#checkAll').bind('click',function(){ //第一种 console.log(this.checked); //第二种 console.log($(t ...
- 通过代码获取log4net的文件路径
http://stackoverflow.com/questions/1343749/get-log4net-log-file-in-c-sharp Solution is quite easy in ...
- IDEA Spark Streaming Kafka数据源-Consumer
import org.apache.spark.SparkConf import org.apache.spark.streaming.kafka.KafkaUtils import org.apac ...