网页设计-多功能计算器实现

最新推荐文章于 2022-08-10 10:22:26 发布

云江sky

最新推荐文章于 2022-08-10 10:22:26 发布

阅读量1.2k

点赞数 2

分类专栏：网页设计文章标签： javascript css html

本文链接：https://blog.csdn.net/qq_42402803/article/details/105679588

版权

网页设计-计算器

使用Dreamweaver编写，JavaScript语言

实现不同功能的计算器，主要是展现思想，功能方面是随意加的，色调随个人喜好，不过要注意颜色的搭配，也许大红大绿挺好看，感兴趣的可以试一下。

普通模式：

在这里插入图片描述

多功能模式

–16 --8 --2 代表转16进制，8进制，2进制

在这里插入图片描述

代码：

标签跳转界面
在这里插入图片描述

普通计算器css布局：

<title>无标题文档</title>
</head>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
			list-style: none;
			font-size: 20px;
		}
		
		.calculator {
			width: 326px;
			height: 460px;
			margin: 80px auto;
			background-color:#F3DFFB;
			border-radius: 15px;
			box-shadow: 0 2px 15px black;
			overflow: hidden;
		}
		
		.calculator .c_screen {
			position: relative;
			width: 326px;
			height: 110px;
			background-color:#E7DDFF;
			border-radius: 15px;
			box-shadow: inherit;
		}
		
		.calculator .c_screen>p {
			position: absolute;
			top: 50%;
			margin-top: -28px;
			width: 236px;
			text-align: center;
			word-break: break-all;
			color:#BB92F3;
			font-size: 40px;
			font-weight: bold;
			padding: 10px 45px;
		}
		
		.calculator .c_row {
			margin: 0 23px;
		}
		
		button {
			cursor: pointer;
			width: 60px;
			height: 45px;
			margin: 20px 2px 0;
			border: 0px;
			border-radius: 20px;
			color: #fff;
			background-color:#CCD5F8;
			outline: none;
		}
		
		button::selection {
			color:#AB7AFC;
		}
		
		button:active {
			box-shadow: 0 0 5px 5px dodgerblue;
		}
		
		.c_func_btn {
			background: linear-gradient(to bottom, rgba(112,155,209,1) 0%, rgb(166,214,225) 100%);
		}
		
		.d {
			width: 60px;
			height: 110px;
			float: right;
			position: relative;
			bottom: 66px;
			right: 32px;
		}
		
		.z {
			width: 129px;
			height: 45px;
		}
	</style>

js部分：

<body>

        
        <a href="Untitled-3.html?name=caoy">科学</a>
        
	<div class="calculator">
		<div class="c_screen">
			<p></p>
		</div>
		<div class="c_btn_wrapper">
			<div class="c_row"> <button class="c_func_btn">/</button> <button class="c_func_btn">*</button> <button class="c_func_btn">CE</button> <button class="c_func_btn">AC</button> </div>
			<div class="c_row"> <button>7</button> <button>8</button> <button>9</button> <button class="c_func_btn">+</button> </div>
			<div class="c_row"> <button>4</button> <button>5</button> <button>6</button> <button class="c_func_btn">-</button> </div>
			<div class="c_row"> <button>1</button> <button>2</button> <button>3</button> </div> <button class="c_func_btn d">=</button>
			<div class="c_row"> <button class="z">0</button> <button>.</button> </div>
		</div>
	</div>
    
    
    
<script>
		var btnList = document.getElementsByTagName('button');
		var show = document.getElementsByTagName('p')[0];
		var symbolB = false; //记录符号 
		var symbol = null;
		//记录a值，b值,记录结果,保存计算结果 
		var aNum = 0,
			bNum = 0,
			result = 0,
			resultCookic = 0;
		for(var i = 0, len = btnList.length; i < len; i++) {
   
			btnList[i].onclick = function() {
   
				//结果 
				if(this.innerText == '=') {
   
					console.log(aNum, bNum);
					getResult(symbol, aNum, bNum);
					show.innerHTML = result;
					console.log("result" + result);
					resultCookic = result;
					result = 0;
					aNum = 0;
					bNum = 0;
					symbolB = false;
				} else {
   
					//初始化和归零

最低0.47元/天解锁文章

云江sky

关注

2
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
网页设计-多功能计算器实现

网页设计-计算器使用Dreamweaver编写，JavaScript语言实现不同功能的计算器，主要是展现思想，功能方面是随意加的，色调随个人喜好，不过要注意颜色的搭配，也许大红大绿挺好看，感兴趣的可以试一下。普通模式：多功能模式–16 --8 --2 代表转16进制，8进制，2进制代码：标签跳转界面普通计算器css布局：<title>无标题文档</tit...
复制链接

扫一扫