您的位置：首页 > 其它

简易计算器（文本框灰色文字提示）

2015-10-24 17:50 302 查看

今天在学习JavaScript函数部分，根本慕课网的编程练习加入了自己的一些拓展，主要实现了文本框灰色文字提示。

主要技能点就是使用onfocus和onblur事件。onfocus事件的属性值不仅可以为函数名，还可以为表达式或者语句。

HTML5中直接使用placeHolder属性更加方便。

<!DOCTYPE  HTML>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>计算器</title>
<style type="text/css">
.element{width:100px;}
</style>
</head>
<body>
<input class="element" type="text" value="请输入第一个数" onfocus="this.value='';this.style.color='#000';" onblur="if(this.value==''){this.value='请输入第一个数';this.style.color='#ccc';}" id="element1" style="color:#ccc">
<select id="compute">
<option value="add" selected>+</option>
<option value="sub">-</option>
<option value="mul">*</option>
<option value="divi">/</option>
</select>

<input class="element"  type="text" value="请输入第二个数" onfocus="this.value='';this.style.color='#000';" onblur="if(this.value==''){this.value='请输入第二个数';this.style.color='#ccc';}" id="element2" style="color:#ccc">
<input type="button" id="done" value=" = " onclick="count()">

<input class="element" type="text" id="result" >
<script type="text/javascript">
function count(){
var ele1=parseInt(document.getElementById("element1").value);
var ele2=parseInt(document.getElementById("element2").value);
var com=document.getElementById("compute").value;
var result='';
switch(com){
case "add":
result=ele1+ele2;break;
case "sub":
result=ele1-ele2;break;
case "mul":
result=ele1*ele2;break;
case "divi":
result=ele1/ele2;break;
default:
result=ele1+ele2;
}

document.getElementById("result").value=result;
}
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航