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

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

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

实现过程:

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;

}
效果预览:

背景图片:

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

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

目录
相关文章
|
JavaScript 程序员 开发者
Notion客户端不好看?手把手教你把它变好看。
Notion客户端不好看?手把手教你把它变好看。
|
监控 Python
手把手教你用 Python 制作一场炫酷烟花秀
本篇文章,带大家用 Python 制作一个炫酷烟花秀,来迎接即将到来的元旦佳节。开始之前先看一下最终效果
手把手教你用 Python 制作一场炫酷烟花秀
|
3月前
|
前端开发 容器
实战!小白切图,手把手教你完成音乐播放器页面
实战!小白切图,手把手教你完成音乐播放器页面
|
6月前
|
图形学
【Unity 3D】3D游戏跑酷小子实战教学(附源码和步骤 超详细)
【Unity 3D】3D游戏跑酷小子实战教学(附源码和步骤 超详细)
290 0
|
6月前
|
存储 开发者
彻底搞懂微信小游戏制作工具中的函数
彻底搞懂微信小游戏制作工具中的函数
154 0
|
6月前
|
Python
【python】实现五子棋小游戏(附源码 易上手)
【python】实现五子棋小游戏(附源码 易上手)
191 0
|
6月前
|
Python
python实现贪吃蛇小游戏(附源码 简单易上手)
python实现贪吃蛇小游戏(附源码 简单易上手)
347 0
|
编解码 芯片
实战贴:开源GUI STemWin在小熊派上的移植(显示很漂亮、很细腻,棒!)
实战贴:开源GUI STemWin在小熊派上的移植(显示很漂亮、很细腻,棒!)
403 2
微信小游戏制作工具中的等待积木应该如何使用?
生活中我们总避免不了要等待,整装待发的准备去公司开始新一天的奋斗,但是公交车却迟迟不来,需要等待。一家人订好了周末出游计划,正准备出门,老婆要再选件衣服,擦个脸,需要等待。打开电视看想看的节目,出来了 60 秒的广告,需要等待……
109 0
|
存储 Serverless
微信小游戏制作工具中的函数应该如何使用
在微信小游戏制作工具中是没有私有函数这个概念的,也就是说所有的函数都是公共的,大家都可以使用,而且函数也没有返回值的概念,想拿到函数运行的结果只能通过设置一个全局变量,将结果存储在全局变量中,然后通过这个全局变量来使用。这种方法有很多的弊端,尤其是在有大量的克隆体存在时,每个克隆体都使用同一个函数,都去设置同一个全局变量,就会造成意想不到的结果。
301 0