手把手教你制作简易计算器

简介: 手把手教你制作简易计算器

这个是预览效果链接简易计算器预览

实现过程:

HTML+Css+JS

具体通过标签实现计算器整个的框架
通过Css样式实现计算器页面布局及框架优化

通过JavaScript+算法实现计算器计算过程

次实验过程:

背景图片+背景音乐(看个人意愿加!)

安排:

HTML:

Css样式:

*{

padding:0;

margin:1px;

}

calculater{

margin: auto;

margin-top: 30px;

border: solid 6px #2371D3;

border-spacing: 0px;

}

display{

width: 100%;

height: 30px;

border-bottom: solid 4px #2371D3;

font-weight: bold;

color: #193D83;

font-family: 黑体;

padding-left: 2px;

}

.numberkey{

cursor: pointer;

width: 40px;

height: 30px;

border: solid 1px #FFFFFF;

background: #2371D3;

color: #ffffff;

text-align: center;

font-weight: bold;

font-family: 黑体;

}

equality{

cursor: pointer;

width: 40px;

height: 100%;

background: #2371D3;

border: solid 1px #FFFFFF;

color: #ffffff;

text-align: center;

font-weight: bold;

font-family: 黑体;

}

.numberkey:hover{

background: #EA6F30;

}

equality:hover{

background: #EA6F30;

}
JavaScript脚本:

var results="";

var calresults="";

function calculater(){

if (event.srcElement.innerText=="=") {

return;

}

results+=event.srcElement.innerText;

display.innerText=results;

}

function resultscalcaulte(){

calresults=eval(results);

display.innerText=calresults;

}
效果预览:

背景图片:

图片发不过来,想要图片的可以联系我,也可以根据自己需求添加自己喜欢的图片

今天就到这了,感谢支持!

目录
相关文章
|
监控 Python
手把手教你用 Python 制作一场炫酷烟花秀
本篇文章,带大家用 Python 制作一个炫酷烟花秀,来迎接即将到来的元旦佳节。开始之前先看一下最终效果
手把手教你用 Python 制作一场炫酷烟花秀
|
3月前
|
前端开发 容器
实战!小白切图,手把手教你完成音乐播放器页面
实战!小白切图,手把手教你完成音乐播放器页面
|
6月前
|
人工智能 Go Python
Python 实现 五子棋小游戏【附源码】
Python 实现 五子棋小游戏【附源码】
568 0
|
6月前
|
前端开发
好看的前端计算器代码分享(html+css+js制作计算器)
好看的前端计算器代码分享(html+css+js制作计算器)
127 0
|
6月前
|
存储 Python
10分钟教你用Python写一个贪吃蛇小游戏,适合练手项目
10分钟教你用Python写一个贪吃蛇小游戏,适合练手项目
191 0
10分钟教你用Python写一个贪吃蛇小游戏,适合练手项目
|
6月前
|
存储 开发者
彻底搞懂微信小游戏制作工具中的函数
彻底搞懂微信小游戏制作工具中的函数
152 0
|
6月前
|
Python
【python】实现五子棋小游戏(附源码 易上手)
【python】实现五子棋小游戏(附源码 易上手)
173 0
|
6月前
|
Python
python实现贪吃蛇小游戏(附源码 简单易上手)
python实现贪吃蛇小游戏(附源码 简单易上手)
338 0
|
存储 Serverless Python
怎么用Python制作一个七夕爱心?
怎么用Python制作一个七夕爱心?
116 0
|
前端开发 JavaScript 容器
在inscode中轻松实现坦克大战(内含源码)
在inscode中轻松实现坦克大战(内含源码)