js装修计算器java代码_JavaScript代码实现简单计算器
本文实例为大家分享了JavaScript代码实现简单计算器的具体代码,供大家参考,具体内容如下
一、实现功能
(1)利用css样式、javascript语言和html语言实现计算器的算法 (2)对计算器的页面进行规划以及对界面进行颜色的填涂 (3)对界面各个边框边距进行适当的调整
二、展示
1.代码展示
代码如下:
计算器
body{
padding:0;margin:0;
background-color:bisque;
}
#calculator{
position:absolute;
width:1200px;height:620px;
left:50%;top:50%;
margin-left:-600px;
margin-top:-310px;
}
#calculator #c_title{
margin:auto;
width:800px;
height:80px;
margin-left: 150px;
}
#calculator #c_title h2{
text-align:center;
font-size:33px;font-family:微软雅黑;color:#666666;
box-shadow: 1px 1px 1px 1px rgba(0, 0, 255, .2);
}
#calculator #c_text input{
padding-right:20px;
margin-left: 50px;
width:970px;
height:50px;
font-size:25px;font-family:微软雅黑;color:#666666;
text-align:right;
border:double 1px;
border:1px solid black;
}
#calculator #c_value{
widows: 1080px;
height:408px;
margin:20px auto;
}
#calculator #c_value ul{
margin:0px;
}
#calculator #c_value ul li{
margin:10px;
list-style:none;
float:left;
width:180px;
height:80px;
line-height:80px;
text-align:center;
background-color:coral;
border:0px solid black;
font-size:30px;
font-family:微软雅黑;
color:#666;
box-shadow: 12px 12px 2px 1px rgba(0, 0, 255, .2);
}
#calculator #c_value ul li button{
width: 160px;
height:40px;
font-size: 20px;
}
function onLoad(){
//加载完毕后光标自动对应到输入框
document.getElementById("input").focus();
}
//读取按钮的值,传给输入框
function inputEvent(e){
//把val的值改为每个事件的innerHTML值 innerHTML 属性
var val=e.innerHTML;
//获取input标签
var xsval=document.getElementById("input");
//标签里的value连接每个事件的innerHTML值
xsval.value+=val;
}
//计算出结果
function inputOper(){
var xsval=document.getElementById("input");//获取input标签
xsval.value=eval(document.getElementById("input").value); //eval()方法计算
}
//清零
function clearNum(){
var xsval=document.getElementById("input");//获取input标签
xsval.value="";
document.getElementById("input").focus();
}
//退格
function backNum(){
var arr=document.getElementById("input");//获取input标签
arr.value=arr.value.substring(0,arr.value.length-1); //substring()提取第一个至倒数第二个字符串
}
计算器
- 7
- 8
- 9
- 清零
- 退格
- 4
- 5
- 6
- *
- /
- 1
- 2
- 3
- +
- -
- 0
- 00
- .
- %
- =
2.效果展示
效果如下:
3.总结
由于第一次书写博客,页面过于丑陋,见谅。改demo学会了如何用js实现html计算器,熟悉了js的基础语法及基本使用。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
js装修计算器java代码_JavaScript代码实现简单计算器相关推荐
- 计算器android studio代码,Android studio实现简单计算器
本文实例为大家分享了Android studio实现简单计算器的具体代码,供大家参考,具体内容如下 需求分析 在Android studio中设计并实现一个简单的计算器,实现连续的加减乘除运算. 界面 ...
- java安卓编程计算器_菜鸟学Android编程——简单计算器《一》
菜鸟瞎搞,高手莫进 本人菜鸟一枚,最近在学Android编程,网上看了一些视频教程,于是想着平时手机上的计算器应该很简单,自己何不尝试着做一个呢? 于是就冒冒失失的开撸了. 简单计算器嘛,功能当然很少 ...
- html制作计算器val,JavaScript实现的超简单计算器功能示例
本文实例讲述了JavaScript实现的超简单计算器功能.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码: www.ddpool.cn JS计算器 // window.onload 获 ...
- python编程简易计算器_Python编程练习049:简单计算器实现
以下代码用于实现简单计算器实现,包括两个数基本的加减乘除运算: 定义函数 def add(x, y): """相加""" return x ...
- c语言设计程序计算器,C语言程序设计,做一个简单计算器
题目: C语言程序设计,做一个简单计算器 程序内容有:加减乘除和平方,立方,开方等.用if或者swith结构来编程. 算加法时只输出加法的结果,算减法时只出减法的结果,如此类推. 解答: 已发送, # ...
- c语言课程设计计算器软件,C语言课程设计简单计算器程序.docx
课程设计名称: C 语言课程设计课程设计题目: 简单计算器程序 目录 第1章 需求分析 0 设计要求 0 任务 0 第2章 总体设计 1 TOC \o "1-5" \h \z \o ...
- python实现简单计算器功能键介绍_Python实现的简单计算器功能详解
本文实例讲述了Python实现的简单计算器功能.分享给大家供大家参考,具体如下: 使用python编写一款简易的计算器 计算器效果图 首先搭建计算器的面板: 计算器面板结构 建造一个继承于wx.Fra ...
- C语言简单计算器报告5000字,c语言简单计算器报告.docx
c语言简单计算器报告 xxxx大学信息科学与工程学院 课程设计报告 班级:姓名:实验项目名称: 实验室(中心):指导教师: 实验完成时间: 通信工程一班 xxx 简易计算器信息科学与工程学院信息技术实 ...
- js异步与java多线程_JavaScript多线程详解
虽然有越来越多的网站在应用AJAX技术进行开发,但是构建一个复杂的AJAX应用仍然是一个难题. 造成这些困难的主要原因是什么呢?是与服务器的异步通信问题?还是GUI程序设计问题呢?通常这两项工作都是由 ...
最新文章
- grafana官方使用文档_可视化监控展示工具之Grafana,安装部署和使用
- C++中explicit关键字的使用
- 浮点数在内存中的存储方式
- 二级 计算机 vf,计算机二级(VF)笔试-144.doc
- Mac/Linux系统连接远端服务器以及相同IP地址的服务器账号密码重置,ssh失败问题
- 巧用TreeSet求解第k小整数(洛谷P1138题题解,Java语言描述)
- 研发团队绩效_如何在团队内部建立网络绩效文化
- Simulink与Flightgear联合仿真详细教程
- PreferenceActivity(首选项设置页)
- EL表达式和JSTL标签
- 华为服务器双系统教程,双系统安装教程
- 【youcans 的 OpenCV 学习课】10. 图像复原与重建
- Smart210学习记录-------内存初始化
- Ubuntu 10.04 HP LaserJet 无法打印 **** Unable to open the initial device, quitting 错误
- 高薪背后的“难言之隐”,热门职业最为真实的健康观察报告
- android布局靠底部,android – 使用layout_gravity =“bottom”放置在LinearLayout的底部
- 术语FXO和FXS的含义是什么
- Python基础--元组的创建、删除、修改、访问以及元组推导式
- 家用宽带的上传和下载速度
- 如何成功地安装OpenEXR