js网页版手机计算器

来源：互联网 2023-03-16 23:57:34 455

js网页版手机计算器

工具/原料

adobe dreamweaver

方法/步骤

新建html文档。

js网页版手机计算器

1此文章非法爬取自百度经验

准备好需要用到的滑动图标。

js网页版手机计算器

书写hmtl代码。

div id="calc">

input class="f-text" type="text" readonly="readonly" maxlength="9" value="0" />

ul>

li class="btn-1">a href="#">c/a>/li>

li class="btn-1">a href="#">%/a>/li>

li class="btn-1">a href="#">÷/a>/li>

li class="btn-1">a href="#">×/a>/li>

li>a href="#">7/a>/li>

li>a href="#">8/a>/li>

li>a href="#">9/a>/li>

li class="btn-1">a href="#">-/a>/li>

li>a href="#">4/a>/li>

li>a href="#">5/a>/li>

li>a href="#">6/a>/li>

li class="btn-1">a href="#"> /a>/li>

li>a href="#">1/a>/li>

li>a href="#">2/a>/li>

li>a href="#">3/a>/li>

li class="btn-2">a href="#">=/a>/li>

li class="btn-3">a href="#">0/a>/li>

li>a href="#">./a>/li>

/ul>

input id="formula" type="text" readonly="readonly" value="" />

/div>

js网页版手机计算器

书写css代码。

body, div, p, ul, li, input { margin: 0; padding: 0; }

ul { list-style-type: none; }

a { color: #fff; outline: none; text-decoration: none; }

body { font: 700 24px/1.5 Arial; }

#calc { position: relative; width: 300px; background: #000; margin: 10px auto; }

#calc p { color: #fff; text-align: right; font: 12px/20px Arial; padding: 0 5px; }

#calc .f-text { border: 0; width: 290px; height: 84px; text-align: right; font: 700 50px/84px Arial; background: url(../images/inputBg.jpg) repeat-x; padding: 0 5px; }

#calc ul { position: relative; overflow: hidden; zoom: 1; background: url(../images/bg.jpg); padding: 0 0 17px 8px; }

#calc ul li { float: left; width: 63px; height: 41px; margin: 17px 10px 0 0; }

#calc ul li a { display: block; width: 63px; height: 41px; line-height: 41px; text-align: center; background: url(../images/btn.png) no-repeat; }

#calc ul li a:hover { background-position: -63px 0; }

#calc ul li.btn-1 a { background-position: 0 -41px; }

#calc ul li.btn-1 a:hover { background-position: -63px -41px; }

#calc ul li.btn-2 { position: absolute; top: 174px; right: 0; height: 99px; }

#calc ul li.btn-2 a { height: 99px; line-height: 99px; background-position: 0 -164px; }

#calc ul li.btn-2 a:hover { background-position: -63px -164px; }

#calc ul li.btn-3 { width: 136px; }

#calc ul li.btn-3 a { width: 136px; background-position: 0 -82px; }

#calc ul li.btn-3 a:hover { background-position: 0 -123px; }

#formula { position: absolute; top: 20px; background: none; border: 0; font: 700 12px/1.5 Arial; width: 280px; padding: 3px 15px 0 5px; text-align: right; }

js网页版手机计算器

书写并添加js代码。

window.onload = function ()

{

var oCalc = document.getElementById("calc");

var aA = oCalc.getElementsByTagName("a");

var aInput = oCalc.getElementsByTagName("input")[0];

var oFormula = document.getElementById("formula");

var s = false;

var i = 0;

for (i = 0; i aA.length; i ){

aA[i].onfocus = function ()

{

this.blur()

};

aA[i].onclick = function ()

{

switch(this.innerHTML)

{

case "c":

aInput.value = 0;

oFormula.value = "";

break;

case "%":

count("%")

break;

case "÷":

count("/")

break;

case "×":

count("*")

break;

case "-":

count("-")

break;

case " ":

count(" ")

break;

case "=":

s || (oFormula.value = aInput.value);

aInput.value = eval(oFormula.value.replace(/\%\/\*\-\ /,''));

aInput.value = aInput.value.substr(0,10).replace("NaN",0);

s = true;

break;

case ".":

if(aInput.value.search(/[\.\%\/\*\-\ ]/) != -1)

break;

default:

s && (aInput.value = 0, oFormula.value = "", s = false);

aInput.value.length 10 && (aInput.value = (aInput.value this.innerHTML).replace(/^[0\%\/\*\-\ ](\d)/,"$1"));

}

function count(a)

{

if(s)

{

oFormula.value = aInput.value a;

aInput.value = a;

s = false;

}

else

{

/[\%\/\*\-\ ]$/.test(aInput.value) || (oFormula.value = aInput.value);

aInput.value = a;

/[\%\/\*\-\ ]$/.test(oFormula.value) || (oFormula.value = aInput.value);

oFormula.value = oFormula.value.slice(-1) != a ? oFormula.value.replace(/.$/,a) : oFormula.value

}

js网页版手机计算器

代码整体结构。

js网页版手机计算器

查看效果。

js网页版手机计算器

以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！

标签： JAVASCRIPT

上一篇：js模拟QQ震动效果下一篇：JS怎样设置和清除定时器

js网页版手机计算器

工具/原料

方法/步骤

热门文章

标签列表