JavaScript如何实现简单的计算器-创新互联
这篇文章主要介绍JavaScript如何实现简单的计算器,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
创新互联作为成都网站建设公司,专注网站建设公司、网站设计,有关成都企业网站建设方案、改版、费用等问题,行业涉及成都轻质隔墙板等多个领域,已为上千家企业服务,得到了客户的尊重与认可。具体内容如下
整个计算器实现由html文件、js文件和css样式表三部分组成
整体效果:body里放俩div,一个大的包一个小的,小的放键盘,键盘div里放键盘。
html:
计算器 7 8 9 ÷ 4 5 6 × 1 2 3 - 0 c = +
css:
*{margin: 0;padding: 0} li{list-style: none} .bor{margin: 0 auto;width: 400px;height: 520px;border: 2px solid #000; margin-top: 50px;overflow: hidden;text-align: center;} .s_text{margin: 0 auto;width: 330px;height: 80px;margin-top: 15px; border: 2px solid #000000;font-size: 30px;padding-left: 20px;} .main{margin: 0 auto;width: 350px;height: 400px;margin-top: 15px;} .main ul{display: flex;height: 100%;justify-content: space-between;flex-wrap: wrap;} .main ul li{width: 80px;height: 80px;border: 1px solid #000000; text-align: center; line-height:80px;font-size: 36px;cursor: pointer ;} .main ul li:hover{background: #eeeeee;}
js:(将这段代码写在body最下面)
以上是“JavaScript如何实现简单的计算器”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!
本文标题:JavaScript如何实现简单的计算器-创新互联
文章分享:http://scjbc.cn/article/dgeeog.html