用Javascript编写的程序（计算器和验证非法字符）

最新推荐文章于 2020-06-10 18:43:14 发布
最新推荐文章于 2020-06-10 18:43:14 发布
阅读量1.3k 收藏 4
点赞数
分类专栏： 代码再现 文章标签： javascript button xhtml border input html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wo1354691371/article/details/7277307
版权
 

 新的学期开始了。作为新学期开始的起点，下面给大家呈现两个小程序,请大家多多指教：

1）  计算器

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>10-php简单计算器</title>

</head>

 

<script language="javascript" type="text/javascript">

/*分析步骤

1、排版布局

2、获取用户输入的内容

3、用户输入的内容进行计算

4、把计算的结果显示在文本框

*/

 var clearFlag=false;

 function getNum(num){

   var objresult = document.getElementById("result");

     if(clearFlag){

         objresult.value="";

      clearFlag=false;

    }

         objresult.value+=num;

  }

 

 function getResult(){

 

       var objr2 = document.getElementById("result");

       objr2.value=objr2.value+"="+eval(objr2.value);

       clearFlag=true;

 }

 

</script>

<body>

<table border="1" width="250" border="0">

<caption>计算器的应用</caption>

  <tr>

    <td colspan="4"><input type="text" name="result" ></td>

  </tr>

  <tr>

    <td><input type="button"   value="  1   " οnclick="getNum(1)"></td>

    <td><input type="button"   value="  2   " οnclick="getNum(2)"></td>

    <td><input type="button"   value="  3   " οnclick="getNum(3)"></td>

    <td><input type="button"   value="  +   " οnclick="getNum('+')"/></td>

  </tr>

  <tr>

    <td><input type="button"   value="  4   " οnclick="getNum(4)"></td>

    <td><input type="button"   value="  5   " οnclick="getNum(5)"></td>

    <td><input type="button"   value="  6   " οnclick="getNum(6)"></td>

    <td><input type="button"   value="  -   " οnclick="getNum('-')"></td>

  </tr>

  <tr>

    <td><input type="button"   value="  7   " οnclick="getNum(7)"></td>

    <td><input type="button"   value="  8   " οnclick="getNum(8)"></td>

    <td><input type="button"   value="  9   " οnclick="getNum(9)"></td>

    <td><input type="button"   value="  *   " οnclick="getNum('*')"></td>

  </tr>

  <tr>

    <td><input type="button"   value="  0   " οnclick="getNum(0)"></td>

    <td><input type="button"   value="  .   " οnclick="getNum('.')"></td>

    <td><input type="button"   value="  =   " οnclick="getResult('=')"></td>

    <td><input type="button"   value="  /   " οnclick="getNum('/')"></td>

  </tr>

</table>

 

</body>

</html>

2）  验证非法字符

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>非法字符的简单检测</title>

 

<script language="javascript" type="text/javascript">

function getCheck(){

 var cha=document.getElementById("name").value;

 

  var patrn=/^[A-Za-z0-9_]/;

  if(patrn.test(cha)){

    alert("输入的字符合法");

     return true;

  }else{

    alert("/您输入的字符不合法！");

       return false;

  }

}

</script>

</head>

<body>

用户名：

<input type="text" id="name" name="name" />

<input type="button" name="check" value="检测" οnclick="getCheck()">

</body>

</html>

duoduo220
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS判断非空至少输入两个字符的简单实现方法
01-19
dialog是我项目方法，你应该替换成alert(),或者你自己的 var str = $(#stuName).val(); if (str.length < 2) { dialog(提示, text:请输入至少两位字符, 300, auto, ); return false; } str = str.replace(/(^\s*)|(\s*$)/g, '');//去除空格; if (str == '' || str == undefined || str == null) { dialog(提示,
用js写本地应用程序
yangsh3002的专栏
09-30 3511
js一般被用来写网页前端，后来又出现了用js作为其语言的服务器技术，node.js。使用js作为语言来写本地应用程序？反正我没听说过，直到前两天想写一个小程序，尝试了一下新技术，才发现js原来还可以这么玩。         js一般与网页联系比较紧密，可以用来操作网页文档结构，Qt中的Quick技术与其很类似，使用了一种叫QML的语言，用来定义各种图形元素，文本、形状和图像等，它们以一种嵌套式j
JS基础及编写第一个JS程序
Dimples_54的博客
08-26 1336
1.导入JavaScript标签 script type=“text/javascript”>script> 2.在标签中间写js代码 alert(“hello world!”) ; document.write(“亲，我在页面上，跟alert不一样噢！”); console.log(“我是在控制台打印的, 以后常用我！”); 3.标签 script标签可以出现多次, 且可以
js 正则表达式判断非法字符以及常用正则表达式。
yihuliunian的博客
06-10 764
转载自品略图书馆http://www.pinlue.com/article/2019/11/2902/049818766740.html js 正则表达式判断非法字符 方法一： var re=/正则表达式/; re.test($("txtid").val()) 方法二： $("txtid").val.match(/正则表达式/)； 附常用正则表达式： 验证数字的正则表达式集（转载） 验证数字：^[0-9]*$ 验证n位的数字：^\d{n}$ 验证至少n位数字：^\d{n,}$ ..
js正则表达式判断非法字符 .(转)
weixin_30916125的博客
08-13 217
转自： http://blog.csdn.net/cdh1213/article/details/7109775 function checkForm() { var zyd_name=$("input[name='zydName']").val(); var patrn=/[`~!@#$%^&*()_...
HTMl编写计算器
weixin_34408717的博客
11-14 287
html ,css,javaScript完成的计算器程序： <html> <title>多动能计算器</title> <!-- 计算器version4.0 这一版本的计算器： 将所有的操作集合在同一个方法中 使用的方法为无参数的 样式...
使用JavaScript 编写简单计算器
10-25
主要介绍了使用JavaScript 编写简单计算器,需要的朋友可以参考下
JavaScript编写简单的计算器
10-23
主要介绍了JavaScript如何编写简单的计算器，功能很简单，可以实现加减乘除功能，感兴趣的小伙伴们可以参考一下
纯javascript代码编写计算器程序.pdf
09-29
纯javascript代码编写计算器程序.pdf
JavaScript 验证非法字符输入
12-03
采用最新JavaScript技术及正则表达式，无页面刷新效果，
javascript编写简易计算器
10-19
主要为大家详细介绍了javascript编写简易计算器的相关代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
js实现简单的计算器
起小点
05-22 706
js实现简单的计算器 1.实现代码如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> window.onload = functio...
javascript几个比较常用的输入脚本验证，包括验证整数、实数、非法字符
daizhe
05-17 159
/* 验证输入不能为非法字符'和\"以及&lt;&gt;#$%^&amp;*+ */ function isValidStr( inStr,name ){ ??? if(inStr.indexOf("\\") != -1) ??? { ?????? alert( name + "不能包含反斜杠\符号！"); ?? return false; ??? } ??? var igno...
计算器输入js方法
艾小逗
03-05 580
简单的样式，不带计算功能，只有清空、删除、确定获取输入值
两种方式实现省市县三级联动（利用解析文本和json方式）
03-05 4229
第一种： ajax-text-select.html 解析文本实现多级联动效果   var objectId="";   function getArea(id,objid){          objectId=objid;          var url="ajax-text-select-server.php";          var params
JS实现图片随机浮动效果
02-22 3826
图片随机浮动游戏 //对DIV进行绝对定位 div{      position:absolute;     }   var floatimg=document.getElementById("floatimg"); //定义初识坐标   var x=0,y=0; //获取图片随机浮动的可见范围   var w=document.body.cl
实现选项卡效果（CSS样式修饰）
02-23 2664
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 选项卡效果（包含CSS修饰） div{  display:none;  margin-left:-2px;  margin-top:-3px;    } span a:hover{  col
实现多张图片浮动的效果
02-24 1489
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 实现多个图片浮动的效果 img{     position:absolute;  filter:alpha(opacity=100);  -moz-opacity:1;  opacity: 1
使用 javascript 语言编写一个网页计算器 程序
最新发布
10-30
编写一个使用 JavaScript 语言编写的网页计算器程序是相对简单的，下面是一个简单的示例： HTML部分： ```html <!DOCTYPE html> <html> <head> <title>网页计算器</title> <style> #calculator { border: 1px solid #ccc; padding: 20px; width: 250px; } #result { margin-top: 10px; } </style> </head> <body> <div id="calculator"> <input type="text" id="num1" placeholder="第一个数字"> <br><br> <input type="text" id="num2" placeholder="第二个数字"> <br><br> <button onclick="add()">相加</button> <button onclick="subtract()">相减</button> <button onclick="multiply()">相乘</button> <button onclick="divide()">相除</button> <div id="result"></div> </div> <script src="calculator.js"></script> </body> </html> ``` JavaScript部分（保存为calculator.js）： ```javascript function add() { var num1 = parseInt(document.getElementById("num1").value); var num2 = parseInt(document.getElementById("num2").value); var result = num1 + num2; document.getElementById("result").innerHTML = "计算结果： " + result; } function subtract() { var num1 = parseInt(document.getElementById("num1").value); var num2 = parseInt(document.getElementById("num2").value); var result = num1 - num2; document.getElementById("result").innerHTML = "计算结果： " + result; } function multiply() { var num1 = parseInt(document.getElementById("num1").value); var num2 = parseInt(document.getElementById("num2").value); var result = num1 * num2; document.getElementById("result").innerHTML = "计算结果： " + result; } function divide() { var num1 = parseInt(document.getElementById("num1").value); var num2 = parseInt(document.getElementById("num2").value); var result = num1 / num2; document.getElementById("result").innerHTML = "计算结果： " + result; } ``` 这是一个基本的网页计算器程序，包含两个输入框，四个按钮，以及一个用于显示计算结果的div。根据按钮的点击事件，通过JavaScript获取输入框的值，并进行相应的计算，最后将结果显示在页面上。 需要注意的是，以上示例只实现了简单的计算功能，未进行错误处理及其它逻辑的完善。实际开发中还需要考虑更多的情况，例如输入的校验、异常处理等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值