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

最新推荐文章于 2021-05-02 14:15:28 发布

贾斯伯

最新推荐文章于 2021-05-02 14:15:28 发布

阅读量551

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/jiakaishow/article/details/49386801

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

今天在学习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="请输入第一个数" οnfοcus="this.value='';this.style.color='#000';" οnblur="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="请输入第二个数" οnfοcus="this.value='';this.style.color='#000';" οnblur="if(this.value==''){this.value='请输入第二个数';this.style.color='#ccc';}" id="element2" style="color:#ccc">
<input type="button" id="done" value=" = " οnclick="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>

贾斯伯

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简易计算器（文本框灰色文字提示）

今天在学习JavaScript函数部分，根本慕课网的编程练习加入了自己的一些拓展，主要实现了文本框灰色文字提示。其中的技巧就是使用onfocus和onblur事件。onfocus事件的属性值不仅可以为函数名，还可以为表达式或者语句。HTML5中直接使用placeHolder属性更加方便。计算器 .element{width:100px;}
复制链接

扫一扫