用css美化的简易计算器 |完整代码及注解

效果展示图：
思路：
1.确定计算机页面的具体内容，生成按钮，文本框等
2.实现按键的具体功能，编写函数
3.美化界面

计算器页面的完整代码
cal.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="style.css"><title>calculator</title>
</head>
<body><div id="cal"><!-- 输入“div#”就会自己完成基本语法,#后面如果有输入，id就是对应值 --><div id="kong"></div><div id="shuru"><input type="text" id="shu"></div><div id="anniu"><ul class="center"><li class="an3" onclick="clear_num()">C</li><li class="an3" onclick="show('.')">.</li><li class="an3" onclick="back_one()">←</li><li class="an3" onclick="show('/')">÷</li><li class="an1" onclick="show('1')">1</li><li class="an1" onclick="show('2')">2</li><li class="an1" onclick="show('3')">3</li><li class="an3" onclick="show('*')">×</li><li class="an1" onclick="show('4')">4</li><li class="an1" onclick="show('5')">5</li><li class="an1" onclick="show('6')">6</li><li class="an3" onclick="show('+')">+</li><li class="an1" onclick="show('7')">7</li><li class="an1" onclick="show('8')">8</li><li class="an1" onclick="show('9')">9</li><li class="an3" onclick="show('-')">-</li><li class="an3" onclick="show('(')">(</li><li class="an1" onclick="show('0')">0</li><li class="an3" onclick="show(')')">)</li><li class="an3" onclick="equal()">=</li></ul></div></div><script>function show(num){// value的意思是： 获取输入的值var result=document.getElementById('shu').value;document.getElementById('shu').value +=num;}function equal(){var shuchu=document.getElementById('shu').value;// eval是js提供的一个 计算表达式的函数var result=eval(shuchu);document.getElementById('shu').value =result;}function clear_num(){var result=document.getElementById('shu').value;document.getElementById('shu').value =' ';}function back_one(){var backone=document.getElementById('shu');// 转换成字符串backone.value=backone.value.substring(0,backone.value.length-1);}</script></body>
</html>

对应的css美化代码
style.css

*{/* 按键里面的字符无法被选中 */user-select: none;
}body{background-color: #60afe4;
}
/* 对于 id="cal" 模块*/
#cal{width: 280px;height: 440px;background-color:#f4f1f4;/* 改变形状 */-webkit-border-radius:10px;-moz-border-radius: 10px;border-radius: 10px;margin: 10% auto;
}/* 对于 id="kong" 模块*/
#kong{width: 100%;height: 35px;
}/* 对于 id="shuru" 模块*/
#shuru{width: 100%;height: 65px;background-color: #f4f1f4;
}
/* shuru 模块里面的input*/
#shuru input{margin: 6px;width: 95%;height: 60px;background-color:#e4dae4;/* border: 1px solid #f4f1f4; */text-align: right; border: none;/* 改变字体 */color:#60afe4;font-size: 30px;
}#anniu{width: 100%;height: 330px;/* background-color: cyan; */float: left;/* margin:3%; */
}
#anniu li{list-style-type: none;float: left;
}#anniu .an1{width: 50px;height: 50px;background-color: #7fc1ee;/* 添加li之间的间隔 */margin: 5px;/* 将形状变成圆形 */-webkit-border-radius:50px;-moz-border-radius: 50px;border-radius: 50px;/* 文字居中 */text-align: center;line-height: 50px;/* 改变字体 */color:#f4f1f4;font-size: 25px;
}#anniu .an2{width: 110px;height: 50px;background-color: #60afe4;/* 添加li之间的间隔 */margin: 5px;/* 改变形状 */-webkit-border-radius:50px;-moz-border-radius: 50px;border-radius: 50px;/* 文字居中 */text-align: center;line-height: 50px;/* 改变字体颜色 */color:#f4f1f4;font-size: 25px;
}
#anniu .center{position: relative;right: 20px;
}
#anniu .an3{width: 50px;height: 50px;background-color: #60afe4;/* 添加li之间的间隔 */margin: 5px;/* 改变形状 */-webkit-border-radius:50px;-moz-border-radius: 50px;border-radius: 50px;/* 文字居中 */text-align: center;line-height: 50px;/* 改变字体颜色 */color:#f4f1f4;font-size: 25px;
}

用css美化的简易计算器 |完整代码及注解相关推荐

java实现简易计算器完整代码
早晨起来没事,打开mac突然想写个小程序,就写来个简易的计算器,可以实现基本的运算,测试目前无bug,下面分享下自己的代码. 首先写了个简单的界面如下: 整个面板用了BorderLayout布局,分为 ...
java 编码正弦计算器_计算器完整代码(java).doc
计算器完整代码(java) 1． Calculator 类 import java.applet.*; import java.awt.*; import java.awt.event.*; impo ...
Html+Css+Js五星好评（完整代码+详解）
一,问题描述当鼠标滑过空白的五颗星星时,有预览的颜色填充,当点击鼠标后,颜色填充确定,确定的颜色是绿色,当鼠标预览时,依然有预览色,没有点击鼠标确定时,颜色依然是,上一次的记录,点击了则是当次的好评 ...
基于Python中tkinter做的可视化简易计算器（代码有注释，利于理解）
Python可视化简易计算器基于GUI库:tkinter做的一个简单计算器开发软件 Pycharm2019.3 代码如下:(有对代码的简单分析,易于理解) import re import tki ...
html + css + js 实现简易计算器
使用LICEcap工具截取的效果图: 计算器页面实现: 为计算器的input输入框添加disabled="disabled"属性,防止从键盘中直接输入除小数点之外的非数字符号:设置 ...
关于c基础实现简易计算器的代码（加减乘除）
输入为数字和算术符号组成的字符串,程序会根据运算级处理后输出结果,这是前段时间写的了,没有添加输入字母报错功能,当时我认为计算器上一般也没有字母按键,所以就没有写,但是现在想想计算器和这个代码实现的原 ...
Android——在线计算器完整代码
实现效果一.xml布局文件这里采用线性布局,关于计算器的布局,可以查看之前的文章. <?xml version="1.0" encoding="utf-8& ...
原生js+css 实现轮播图完整代码
利用原生的js实现轮播图,可以添加到自己的UI库中,在以后的项目中对其进行修改然后添加到已有项目中. 先写出css部分和html部分,直接上代码 <!DOCTYPE html> <h ...
Qt简易计算器的代码实现
大二用qt写的简易计算机,已经修改完bug,请放心食用输入的时候一定用按钮,不要直接在文本框中输入在qt中新建这几个文件,运行就OK了 main.cpp #include "calcu ...
HTML\CSS实现静态网页附完整代码【W3school主页】
实现这个静态网页主要是为了练习HTML\CSS语言,让自己加深印象. 选择的网页是W3school的主页一.效果对比从对比能看出,和原版还是有很多的不同.还是可以继续细细打磨的. 1.顶部 2.底 ...

用css美化的简易计算器 |完整代码及注解

用css美化的简易计算器 |完整代码及注解相关推荐

最新文章

热门文章