利用原生js编写简单计算器-Sander的博客-CSDN博客

最新推荐文章于 2022-07-18 20:26:24 发布
最新推荐文章于 2022-07-18 20:26:24 发布
阅读量2.1k 收藏 8
点赞数 12
分类专栏： 笔记 文章标签： javascript css html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/syue779/article/details/109387156
版权 
<!DOCTYPE html><html lang="en">  
<head>    
<meta charset="UTF-8" />    
<meta name="viewport" content="width=device-width, initial-scale=1.0" />    
<title>Document</title>    
<style>      
	/*计算器盒子*/
	.divs {        
		width: 500px;        
		height: 600px;        
		border: 1px solid #000000;        
		margin: auto;      
	}
	/* 计算器的结果显示区  即input.value*/
	.divs > input {        
		width: 460px;        
		height: 45px;       
	 	margin-left: 18px;        
	 	margin-top: 10px;        
	 	font-size: 30px;        
	 	background-color: white;        
	 	text-align: right;      /* 让内容从最右侧开始 */
	 }
	 /* 给divs下面所有的div设置,即给计算器的按键进行设置 */      
	 .divs > div {        
	 	width: 100px;        
	 	height: 100px;        
	 	float: left;        
	 	border: 1px solid #000000;       
	 	margin-left: 18px;        
	 	margin-top: 25px;        
	 	font-size: 40px;        
	 	line-height: 100px;        
	 	text-align: center;        
	 	user-select: none;      /*禁止选中*/
	 }    
</style>  
</head>  
<body>    
	<div class="divs">      
		<input type="text" value="0" id="input1" disabled />
		<!-- value设置初始显示为0 -->      
		<div class="block">7</div>      
		<div class="block">8</div>      
		<div class="block">9</div>     
		<div class="block">-</div>      
		<div class="block">4</div>      
		<div class="block">5</div>      
		<div class="block">6</div>      
		<div class="block">+</div>      
		<div class="block">1</div>      
		<div class="block">2</div>      
		<div class="block">3</div>      
		<div class="block">*</div>      
		<div class="block">C</div>      
		<div class="block">0</div>      
		<div class="block">=</div>      
		<div class="block">/</div>    
	</div>
    <script>      
    	var blocks = document.getElementsByClassName("block");
    	// 获取类名为blocks的内容 形成数组      
    	var input = document.getElementById("input1");
    	// 获取input      
    	var firstValue = 0,
    	// 用于存储中间值的变量        
    	bool = false;
    	// bool 通过判断消除计算后input.value中的内容 从而使下次运算可以正常进行      
    	var type;
    	// 定义计算类型(+ - * /)  

	//for 遍历block数组    
    	for (var i = 0; i < blocks.length; i++) {        
    		blocks[i].onclick = function () {
    			//判断this.innerHTML是否为数字          
    			if (!isNaN(this.innerHTML)) {
    				//判断 当bool=true时进入,使其input.value重新归0            
    				if (bool) {              
    					input.value = "0";              
    					bool = false;            
    				}
    				//点击内容使其以字符串的形式累加显示到input.value中            
    				input.value = Number(input.value +this.innerHTML).toString();
    				} 
				//当this.innerHTML不是数字时
				else {
					// 判断this.innerHTML是否不等于C 或 = ;即判断this.innerHTML是否为 = - * /            
    					if (this.innerHTML !== "C" && this.innerHTML !== "=") {              
    						firstValue = Number(input.value);              
    						type = this.innerHTML;              
    						input.value = "0";            
    					} 
					// 点击C时的属性设置
					else if (this.innerHTML === "C") {              
    						firstValue = 0;
						// 暂存区归0
    						type = undefined;
    						// type设为未定义
    						input.value = "0";
    						// input.value设置为0 ,即重新显示为0            
    					} else {
    						//利用switch语句完成 = - * /运算,结果以的字符串形式统一输出
    						switch (type) {                
    							case "+":                  
    								input.value = (firstValue + Number(input.value)).toString();                  
    								break;                
    							case "-":                 
    								input.value = (firstValue - Number(input.value)).toString();                  
    								break;                
    							case "*":                  
    								input.value = (firstValue * Number(input.value)).toString();                  
    								break;                
    							case "/":                  
    							if (Number(input.value) === 0) input.value = "0";                  
    							else{                    
    								input.value = (firstValue / Number(input.value)).toString();                  
    								break;              
    							}              
    							bool = true;
    							// 当按下等号后 bool设置为true 进行上面的判断 使input.value="0",bool=false 进而不影响接下来的运算
    					}          
    				}        
    			};      
    		}    
    	</script>  
    </body>
    </html>

效果图：
在这里插入图片描述

yanchGod
关注
  • 12
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
简单计算器——JavaScript小实例
qq_62858590的博客
03-12 3341
简单计算器——JavaScript小实例
利用原生javascript制作简易计算器
PILIpilipala的博客
08-08 1786
第一步：利用html构建好计算器的大概形状样式 <table> <tr> <td colspan="4" ><input id="text" type="text" value="0" /></td> </tr> <tr> <td colspan="2"><button class="btn">del</button></t
JavaScript实现计算器
wangshiyi13的博客
07-18 5357
使用JavaScript编写了一个简易的计算器，基本与手机计算器一致。
js写一个简单的计算机,js实现一个简易计算器
weixin_34279705的博客
07-25 4295
本文实例为大家分享了JS实现简易计算器的具体代码，供大家参考，具体内容如下14th_test这是一个标题以下是一个简易计算器第一个数第二个数+-*/var res; //保存计算结果function add(){var first = document.getElementById("fir").value;var second = document.getElementById("sec").v...
js计算器
dianqi0560的博客
01-02 200
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;sty...
zenuwen-js：比利时经典的Zenuwen。 使用Phaser用Javascript编写
02-04
zenuwen的经典纸牌游戏，使用游戏引擎以JavaScript编写。 由Jonas，Mathias，Sander en Brecht开发。 用法 安装Node.js 下载或克隆此存储库 导航到存储库 安装npm软件包 npm install 启动开发服务器 npm run ...
sander-基于Promise的fs模块替代
08-10
1. **Promise化API**：sander将所有fs模块的方法包装成返回Promise的对象，这样可以利用Promise的链式调用来处理异步操作，避免了回调地狱，使代码结构更加清晰。 2. **错误处理**：在Promise的reject中处理错误，...
Sander-Server
03-10
总的来说，Sander-Server项目展示了如何利用Flask框架和其相关的扩展来构建和管理Python Web应用的数据库。通过理解和实践这些核心概念，开发者能够更好地设计和维护自己的Flask应用，确保数据的安全性和应用的稳定...
WX820LM.pdf 5-in-1 Multi Sander 5合1砂磨机
06-28
Use only good quality sandpaper. The sandpaper controls the sanding efficiency, not the amount of force you apply to the tool. Excessive force will reduce the sanding efficiency and cause motor ...
laravel-invoicable:轻松创建Laravel发票
05-15
$ composer require sander-van-hooft/laravel-invoicable 接下来，如果您使用Laravel 5.4，则必须安装服务提供程序： // config/app.php 'providers' => [ . . . SanderVanHooft \ Invoicable \ ...
用JS+HTML实现简单计算机源码
11-09
使用Js控制 实现简单计算机 主要用于获取表单元素的值
JS案例---计算器1.0
javasvince的博客
03-17 236
案例实现结果 实现思路 设置三个输入框 一个选择框 一个按钮 获取输入框1和选择框还有输入框2的值 点击按钮然后得出结果 学到的知识点 select.value的值是option标签里面的内容 Number()函数把对象的值转换为数字 例如 result=Number(“999”); 那么 result=999; //数字 代码实现 html &amp;amp;lt;!DOCTYPE html&amp;amp;gt;...
html计算器_JS代码实现计算器
weixin_39938746的博客
11-29 275
首先先代码献上<接下来是csstable,tr,td{ text-align: center; border: 1px ridge black; border-collapse: collapse; text-align: center; } .btnx{ font-weight: 900; } .btn,.btnx{ height: 100%; wid...
简单计算器(JavaScript)
无糖加冰
11-30 530
简单计算器(JavaScript) 简单计算器的实现,我们在C#中已经实现过了,其实在JS中大致的原理都是一样的. 运用C#进行简单计算器的实现 运用C#封装实现简易版计算器 闲话少说,直接上源码! HTML源码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,
JS小案例_简易计算器
changyeyu_的博客
06-28 240
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>简易计算器</title> </head> <body> <script> let s1 = prompt("请输入第一个数："); if (isNaN(s1)) { alert("输入错误！"); }
前端案例：简易计算器的实现（dom操作、target、eval函数、try catch、switch-case）
m0_67402026的博客
03-02 1266
目录 一、案例效果 二、涉及要点 三、完整代码+详细注释 一、案例效果 二、涉及要点 1. 文本域标签 的 readonly 属性用于设置文本域文字为只读； 2. DOM 获取元素，getElementById()获取带有指定 id 的节点； 3. DOM 事件中的 target 是指获取事件的目标，即**触发事件的真实元素。**如下代码中： btn.onclick = function (e) { //判断只有点击到按钮上才会将信息录入“显示屏” if (e.target.no
js写一个简单的计算机,JavaScript如何实现简单计算机
weixin_33791488的博客
07-25 2532
本篇教程介绍了JavaScript如何实现简单计算机，希望阅读本篇文章以后大家有所收获，帮助大家对JavaScript的理解更加深入。<html>Inserttitleherevarresult_1;//加法functionadd(){vara=getFirstNumber();varb=getTwiceNumber();varre=Number(a)+...
使用JS完成一个简单的计算器功能
chuisiqin5881的博客
05-08 2543
<!DOCTYPEhtml> <html> <head> <title>事件</title> <scripttype="text/javascript"> functioncount(){ ...
JavaScript经典案例：简易计算器
qq_44659826的博客
08-23 496
效果图： 逻辑： 1、首先通过遍历，为所有元素添加事件； 2、各个按钮功能分别实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </
如何利用Amber Tools 22做对多胺的分子动力学模拟
最新发布
03-26
以下是使用Amber Tools 22进行多胺分子动力学模拟的步骤： 1. 确定目标多胺的化学结构。 2. 制备输入文件：通常需要准备一个包含目标多胺结构的PDB文件，并使用ambpdb工具将其转换为Amber格式： ``` ambpdb -p input.pdb > input.prmtop ``` 其中，input.pdb为目标多胺结构的PDB文件，input.prmtop是输出的Amber格式拓扑文件。 3. 生成分子动力学模拟系统：使用tleap工具生成分子动力学模拟所需的所有输入文件： ``` tleap -f leap.in ``` 其中，leap.in文件包含以下内容： ``` source leaprc.protein.ff14SB #加载力场参数 source leaprc.water.tip3p #加载水分子参数 addions mymol Na+ 0 #添加离子，以平衡系统电荷 solvatebox mymol TIP3PBOX 10.0 #用水盒子包围系统，水盒的边界至少与分子中最远的原子相差10 Å savepdb mymol.pdb mymol #保存包含离子和水分子的PDB文件以及模拟系统的prmtop和inpcrd文件。 saveamberparm mymol mymol.prmtop mymol.inpcrd quit ``` 其中，mymol为自定义的系统名称。 4. 进行分子动力学模拟：使用pmemd或sander工具进行分子动力学模拟： ``` pmemd -O -i md.in -p mymol.prmtop -c mymol.inpcrd -o mdout -r md.rst ``` 其中，md.in为模拟输入文件，-p指定模拟系统的prmtop文件，-c指定初始结构的inpcrd文件，-o指定模拟输出文件，-r指定模拟结束后保存的结构文件。 5. 分析模拟结果：使用模拟输出文件进行模拟结果分析，例如分析能量、轨迹、结构变化等。 以上是利用Amber Tools 22进行多胺分子动力学模拟的一般步骤，具体操作需要结合实际情况和目标来进行调整。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值