栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

JavaScript实现简单的计算器

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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最下面) 

    
    
    

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持考高分网。

    转载请注明:文章转载自 www.mshxw.com
    本文地址:https://www.mshxw.com/it/71695.html
    我们一直用心在做
    关于我们 文章归档 网站地图 联系我们

    版权所有 (c)2021-2022 MSHXW.COM

    ICP备案号:晋ICP备2021003244-6号