javascript實(shí)現(xiàn)編寫網(wǎng)頁版計(jì)算器
本篇主要記錄的是利用javscript實(shí)現(xiàn)一個網(wǎng)頁計(jì)算器的效果，供大家參考，具體內(nèi)容如下
話不多說，代碼如下：
首先是html的代碼：
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>利用js實(shí)現(xiàn)網(wǎng)頁版計(jì)算器</title> <link rel='stylesheet' href='http://www.baoyu77737.com/bcjs/cal.css' ></head><body><div class='container'> <input class='result'> <div class='clearfix'><div class='fl'> <div class='clearfix'><input type='button' value='C'><input type='button' value='+/-'><input type='button' value='%'> </div> <div class='clearfix'><input type='button' value='7'><input type='button' value='8'><input type='button' value='9'><input type='button' value='4'><input type='button' value='5'><input type='button' value='6'><input type='button' value='1'><input type='button' value='2'><input type='button' value='3'><input type='button' value='0'><input type='button' value='.'> </div></div><div class='fr math'> <input type='button' value='/' onclick='onclicknum(’/’)'> <input type='button' value='＊' onclick='onclicknum(’*’)'> <input type='button' value='＋' onclick='onclicknum(’+’)'> <input type='button' value='－' onclick='onclicknum(’-’)'></div><input type='button' value='＝'> </div></div></body></html>
接下來是css樣式代碼：
* { margin: 0px; padding: 0px;}.clearfix:before, .clearfix:after { content: ’’; display: block;}.clearfix:after { clear: both;}.clearfix { _zoom: 1;}input { display: block;}.container { width: 240px; height: 400px; border: 2px solid #eb4509; margin: 100px auto;}.fl { float: left;}.fr { float: right;}input { width: 60px; height: 60px; border: 1px solid #000; float: left; background: #ddd; font-size: 24px; color: #eb4509; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}.math input { float: none;}input.zero { width: 120px;}#num { width: 180px;}#cal #math { width: 60px;}.result { width: 100%; height: 100px; line-height: 100px; border: none; background-color: #dfdfdf; font-size: 30px; float: none; outline: none; text-align: right; padding-right: 20px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
最后上js代碼：
<script type='text/javascript'> var numresult; var str; var flag; var bot = document.getElementById('bonttom'); var botInputs = bot.getElementsByTagName('input'); var clear = document.getElementById('clear'); var res = document.getElementById('res'); var math = document.getElementById('math'); var mathInputs = math.getElementsByTagName('input'); var antonymsBtn = document.getElementById('antonyms'); var remainderBtn = document.getElementById('remainder'); //點(diǎn)擊數(shù)字以及加減乘除 imporIn(botInputs);// imporIn(mathInputs); function imporIn(eles) {for (var i = 0; i < eles.length; i++) { eles[i].onclick = function () {onclicknum(this.value); }} } //點(diǎn)擊清空c按鈕 clear.onclick = function () {onclickclear(); } //點(diǎn)擊＝號得到結(jié)果 res.onclick = function () {onclickresult(); } //點(diǎn)擊＋／－ antonymsBtn.onclick = function () {antonyms(); } //點(diǎn)擊％ remainderBtn.onclick = function () {remainder(); } function onclicknum(nums) {if (flag) { console.log('num=' + nums); if (nums !== '/' && nums !== '+' && nums !== '-' && nums !== '*') {str.value = '';console.log('aa' + nums); }}flag = false;str = document.getElementById('result');str.value = str.value + nums; } //清空 function onclickclear() {str = document.getElementById('result');str.value = ''; } //得到結(jié)果 function onclickresult() {str = document.getElementById('result');numresult = eval(str.value);str.value = numresult;flag = true; } //正負(fù)數(shù) function antonyms() {str = document.getElementById('result');str.value = -str.value; } //% function remainder() {str = document.getElementById('result');str.value = str.value / 100; }</script>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. 基于javaweb+jsp實(shí)現(xiàn)企業(yè)車輛管理系統(tǒng)2. 如何使用ASP.NET Core 配置文件3. uni-app結(jié)合.NET 7實(shí)現(xiàn)微信小程序訂閱消息推送4. jscript與vbscript 操作XML元素屬性的代碼5. php使用正則驗(yàn)證密碼字段的復(fù)雜強(qiáng)度原理詳細(xì)講解 原創(chuàng)6. .NET中實(shí)現(xiàn)對象數(shù)據(jù)映射示例詳解7. ASP.NET MVC使用Boostrap實(shí)現(xiàn)產(chǎn)品展示、查詢、排序、分頁8. ASP.NET Core 7 Razor Pages項(xiàng)目發(fā)布到IIS的詳細(xì)過程9. XML在語音合成中的應(yīng)用10. asp.net core 認(rèn)證和授權(quán)實(shí)例詳解
網(wǎng)公網(wǎng)安備