<script>
window.onload = function(){
var aInp = document.getElementsByTagName('input');
var oSum = document.getElementsByTagName('span')[0];
var oBtn = document.getElementsByTagName('button')[0]; for (i = 0; i < aInp.length; i++)
{
aInp[i].onkeyup = function ()
{
this.value = this.value.replace(/[^\d]/,"")
// 限制输入框只能输入数字。
// 再看一遍正则的视频,以及replace用法。
};
}; oBtn.onclick = function(){
var num1 = parseInt(aInp[0].value);
var num2 = parseInt(aInp[1].value); (aInp[0].value == "" || aInp[1].value == "") ? // || 或运算符。 只要其中一个条件成立,就alert
alert("请输入数字!") :
oSum.innerHTML = num1 + num2; // 这种for循环写法不合理,会导致当2个输入框都为空时,alert两次。
// for(let i=0; i<aInp.length; i++){
// if(aInp[i].value)
// {
// oSum.innerHTML = num1 + num2;
// }else{
// alert('请输入数字');
// };
};
};
</script>

点击按钮自加1的练习

 <script>
window.onload = function()
{
var oBtn = document.getElementsByTagName('button')[0]; oBtn.onclick = function()
{
var oNum = parseInt(oBtn.innerHTML);
oNum += 1; oBtn.innerHTML = oNum;
alert(oBtn.innerHTML);
}; // 示例程序的写法:
// aBtn.onclick = function ()
// {
// aBtn.value = ++i;
// alert(i)
// }; // 在赋值时区别 i++ 和 ++i
// y=i++ y的值为i (先引用,后运算)
// y=++i y的值为i+1的结果 (先运算,后引用)
};
</script>

JS学习笔记 - fgm练习 - 限制输入框的字符类型 正则 和 || 或运算符的运用 i++和++i的更多相关文章

  1. JS学习笔记 - fgm练习 2-5 - 函数传参 设置div样式

    练习地址:http://www.fgm.cc/learn/lesson2/05.html <script> window.onload = function(){ var oDiv = d ...

  2. JS学习笔记 - fgm练习 2-12- 全选反选 判断CheckBox是否选中 &&运算符

    练习地址:http://www.fgm.cc/learn/lesson2/12.html 总结: 1.  && 运算符,从左向右依次执行,如果遇到 false,就不再继续执行后面的语句 ...

  3. JS学习笔记 - fgm练习 2-11- 改变图片路径 var img = new Image(); 图片预加载

    <style> *{ margin: 0;padding: 0; list-style: none; } body{ background: black; } .outer{ margin ...

  4. JS学习笔记 - fgm练习 - 输入数字求和 正则replace onkeyup事件

    <style> body{font-size: 12px;} .outer{ width: 500px; margin: 0 auto; } span{ color: #999; } in ...

  5. JS学习笔记 - fgm练习 - 鼠标移入/移出div样式改变

    思路: div的默认样式正常设置. 鼠标移入时,发生改变的样式有3个,即 边框颜色,div背景色,字体颜色. 把这三个css改变设置在一个类名下,再通过js给div动态 添加/去除这个类名,实现div ...

  6. JS学习笔记 - fgm练习 - 数字自增 定时器 数字比大小Math.max

    <script> window.onload = function(){ var oP = document.getElementsByTagName('p')[0]; var i = 0 ...

  7. JS学习笔记 - fgm练习 - 输入法下拉框 三元表达式

    <script> window.onload = function() { var oBtn = document.getElementsByTagName('input')[0]; va ...

  8. JS学习笔记 - fgm练习 - 网页换肤

    总结: 1. 点击按钮,div内部变色,边框保持颜色不变. 实现原理:其实本来就把background 和 border 分别设置了同一个颜色,看似是一个整体,其实本来就是分开的. 那么点击的时候,只 ...

  9. JS学习笔记 - fgm练习 - 多按钮控制同个div属性

    总结: 1. 注意body里的结构安排,全部装在大div,避免多次设置不同部分居中. 2. 一排按钮居中:装在大div里,text-align: center; 3. 把相同的部分封装成函数,即 同个 ...

随机推荐

  1. ImportError: cannot import name pxssh

    Traceback (most recent call last): File "/root/Desktop/JuniperBackdoor-master/JuniperBackdoor.p ...

  2. IOS基础学习日志(七)利用dispatch_once创建单例及使用

    自苹果引入了Grand Central Dispatch (GCD)(Mac OS 10.6和iOS4.0)后,创建单例又有了新的方法,那就是使用dispatch_once函数,当然,随着演进的进行. ...

  3. mongodb适用和不适用的应用场景

    近期考虑把订单历史数据从Oracle数据库迁移到Nosql数据库做历史数据查询和分析,一天千万级数据.打算使用mongodb数据库.使用nodejs做查询和统计API,对并发请求量要求低,不知道有没有 ...

  4. shell学习四十九天----进程建立

    进程 前言:进程指的是运行中程序的一个实例.新进程由fork()与execve()等系统调用所起始,然后运行,知道他们下达exit()系统调用为止. linux系统都支持多进程.尽管计算机看起来像是一 ...

  5. Intersection between 2d conic in OpenCASCADE

    Intersection between 2d conic in OpenCASCADE eryar@163.com Abstract. OpenCASCADE provides the algori ...

  6. [BZOJ3526][Poi2014]Card 线段树

    链接 题意:有一些卡牌,正反各有一个数,你可以任意翻转,每次操作会将两张卡牌的位置调换,你需要在每次操作后回答以现在的卡牌顺序能否通过反转形成一个单调不降的序列 题解 线段树上维护 \(f[o][0/ ...

  7. XHTML是什么?XHTML与HTML的区别

    经常看到web前端开发人员口中提到XHTML,相信很多web前端开发的新手们感到很疑惑,甚至有些时候认为XHTML就是HTML,这个观点是错误的,今天零度就给大家好好说道说道XHTML和HTML的区别 ...

  8. 基于 Web 的 Go 语言 IDE - Wide 1.1.0 发布!

    发布 1.1.0 这个版本改进了很多细节,已经完全可以用于正式项目的开发 同时我们上线了 Wide 在线服务 到目前,我们提供了 Wide 和 Solo 两个在线服务,详情请看这里. Wide 是什么 ...

  9. c# Dictionary

    Dictionary<string,string>是一个泛型  有集合的功能,也可以看成一个数组:结构是这样的Dictionary<[key],[value]> 存入的对象是需 ...

  10. 下载新浪android SDK

    下载新浪android SDK 必须去官网 开放平台下载 http://open.weibo.com/ 下载SDK 点击进入之后,看到的界面例如以下: 然后下载android SDK就可以.假设基于别 ...