JS学习笔记 - fgm练习 - 输入数字求和 正则replace onkeyup事件
<style>
body{font-size: 12px;}
.outer{
width: 500px;
margin: 0 auto;
}
span{
color: #999;
}
input{
width: 220px;
line-height: 20px;
border: 1px solid #ccc;
margin-bottom: 12px;
}
p{
font-size: 20px;
color: red;
font-weight: bold;
}
</style> <script>
window.onload = function()
{
var oBtn = document.getElementsByTagName('button')[0];
var oTxt = document.getElementsByTagName('input')[0];
// 在这里获取元素，在点击之后再获取元素的值。不能直接在这获取value，因为输入框的数字是变动的，不能以初始值为准。 var oP = document.getElementsByTagName("p")[0]; var oResult = 0; // 在鼠标 keyup 输入框的时候，判断输入的内容，除了数字和,逗号，其他的字符不能输入。
oTxt.onkeyup = function ()
{
this.value = this.value.replace(/[^(\d)|(,)]/,"") // 这里用的正则还不熟悉！
}; oBtn.onclick = function()
{
// var aNum = parseInt(oTxt.value.split(",")) ; // 不能直接把数组parseInt
var aNum = oTxt.value.split(","); for(var i=0; i<aNum.length; i++)
{
oResult += parseInt (aNum[i]);
}; oP.innerHTML = oResult;
// 这里必须先有对象，innerHTML是DOM用法。 oResult的值是赋给对象的！
}
};
</script>
</head>
<body>
<div class="outer">
<input type="text" value="1,2,3,4,5,6,7,8,9,10,11,12,13,14,15">
<span>输入数字求和，数字之间用半角","号分隔</span>
<br>
<button>求和</button>
<p></p>
</div>
</body>
JS学习笔记 - fgm练习 - 输入数字求和 正则replace onkeyup事件的更多相关文章
- JS学习笔记 - fgm练习 - 限制输入框的字符类型 正则 和 || 或运算符的运用 i++和++i
<script> window.onload = function(){ var aInp = document.getElementsByTagName('input'); var oS ...
- JS学习笔记 - fgm练习 - 数字自增 定时器 数字比大小Math.max
<script> window.onload = function(){ var oP = document.getElementsByTagName('p')[0]; var i = 0 ...
- JS学习笔记 - fgm练习 2-12- 全选反选 判断CheckBox是否选中 &&运算符
练习地址:http://www.fgm.cc/learn/lesson2/12.html 总结: 1. && 运算符,从左向右依次执行,如果遇到 false,就不再继续执行后面的语句 ...
- JS学习笔记 - fgm练习 2-11- 改变图片路径 var img = new Image(); 图片预加载
<style> *{ margin: 0;padding: 0; list-style: none; } body{ background: black; } .outer{ margin ...
- JS学习笔记 - fgm练习 2-5 - 函数传参 设置div样式
练习地址:http://www.fgm.cc/learn/lesson2/05.html <script> window.onload = function(){ var oDiv = d ...
- JS学习笔记 - fgm练习 - 鼠标移入/移出div样式改变
思路: div的默认样式正常设置. 鼠标移入时,发生改变的样式有3个,即 边框颜色,div背景色,字体颜色. 把这三个css改变设置在一个类名下,再通过js给div动态 添加/去除这个类名,实现div ...
- JS学习笔记 - fgm练习 - 多按钮控制同个div属性
总结: 1. 注意body里的结构安排,全部装在大div,避免多次设置不同部分居中. 2. 一排按钮居中:装在大div里,text-align: center; 3. 把相同的部分封装成函数,即 同个 ...
- JS学习笔记 - fgm练习 - 输入法下拉框 三元表达式
<script> window.onload = function() { var oBtn = document.getElementsByTagName('input')[0]; va ...
- JS学习笔记 - fgm练习 - 网页换肤
总结: 1. 点击按钮,div内部变色,边框保持颜色不变. 实现原理:其实本来就把background 和 border 分别设置了同一个颜色,看似是一个整体,其实本来就是分开的. 那么点击的时候,只 ...
随机推荐
- 本地运行github上的vue2.0仿饿了么webapp项目
在vue刚刚开始流行的时候,大多数人学习大概都见到过这样的一个项目吧,可以作为学习此框架的一个模板了 github源码地址:https://github.com/RegToss/Vue-SPA 课程教 ...
- Eclipse语言的切换方法
安装完中文语言包之后,如果想切换回英文,可以按照下边的方法来做: 创建一个快捷方式,然后鼠标邮件这个快捷方式,在属性里加入-nl "en_US" 记得加空格.应用就可以. 同理切换 ...
- Nagle和Cork
我觉得这篇讲的不错. http://blog.csdn.net/c_cyoxi/article/details/8673645 Nagle算法的基本定义是任意时刻,最多只能有一个未被确认的小段. 关闭 ...
- PHP 使用Apache 中的ab 測试站点的压力性能
打开Apacheserver的安装路径(我用的是 WampServer),在bin文件夹中有一个ab.exe的可运行程序,它就是要介绍的压力測试工具. watermark/2/text/aHR0cDo ...
- Android 简述touch事件中的MotionEvent
有关touchEvent的事件里都有一个 MotionEvent 參数,以下来简介一下它的属性的一些含义和使用的方法 通常单指操作时,一般例如以下: switch (event.getAction() ...
- 【iOS开发-88】事件传递原理解释哪个控件处理事件以及响应者链条的介绍
一.触摸事件传递原理 (1)大的方向是:从父控件传递给子控件. --父控件会先检查自己能否接受事件的处理 --然后再看看触摸在不在自己的范围内 --假设在的话,就遍历子控件.看看有没有合适的子控件能够 ...
- PHP开发常规安全问题总结
文章来源:PHP开发学习门户 地址:http://www.phpthinking.com/archives/575 php给了开发人员极大的灵活性,可是这也为安全问题带来了潜在的隐患,最近须要总结一下 ...
- intellij—idea14 注冊机
package com.qunar.fresh; import java.math.BigInteger; import java.util.Date; import java.util.Random ...
- JSP从选择到放弃
JSP为什么会出现?出现的原因? ①因为在开发web网站时候,返现servlet做界面比较麻烦,于是出现了jsp. 运行在服务端(Java server pages)基于servlet,对servle ...
- Linux 设置文件默认打开方式
比如说我安装了一个绿色版的sublime(.tar解压出来的不是.deb) 但是现在我右键不能打开,不能添加为默认打开方式...这个时候就比较尴尬了... 我总不能每次都cd到安装目录下然后termi ...