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 分别设置了同一个颜色,看似是一个整体,其实本来就是分开的. 那么点击的时候,只 ...
随机推荐
- Ajax学习总结（1）——Ajax实例讲解与技术原理
摘要:AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术.AJAX 是一种用 ...
- 如何形象的解释 webhook 这个词
就是一个 callback,只不过 callback 的操作是发送指定的 HTTP request 给一个指定的地址. callback 就是由甲传给乙,乙处理完之后通知甲传过来的方法或者请求甲方的 ...
- php将数组或字符串写入文件
//将数组保存在文件里 function export_to_file($file, $variable) { $fopen = fopen($file, 'wb'); if (!$fopen) { ...
- Codeforces 474D Flowers (线性dp 找规律)
D. Flowers time limit per test:1.5 seconds memory limit per test:256 megabytes We saw the little gam ...
- 聊聊高并发（十八）理解AtomicXXX.lazySet方法
看过java.util.concurrent.atomic包里面各个AtomicXXX类实现的同学应该见过lazySet方法.比方AtomicBoolean类的lazySet方法 public fin ...
- CSS Text
http://www.runoob.com/css/css-text.html 文本颜色 颜色属性被用来设置文字的颜色. 颜色是通过CSS最经常的指定: 十六进制值 - 如: #FF0000 一个RG ...
- geotif格式的波段描述信息探究
作者:朱金灿 来源:http://blog.csdn.net/clever101 有时打开一些geotif文件,可以看到它的波段描述,但是它究竟存储在文件的什么位置呢?今天研究了一下,大致搞清了这个问 ...
- javafx DropShadow
public class EffectTest extends Application { DropShadow shadow = new DropShadow(); public static vo ...
- 数据存储值归档Archive
先比較一下各个数据存储之间的关系: 关于归档.是ios中的shu'j数据存储中的一种数据存储方式.以下了解一下归档中的一个实例: 以下的是父类person #import <Foundation ...
- 使用STS新的工作空间无需再配置
在你的新的工作空间中找到比如 F:\java-wokespace\你的新的工作空间名称\.metadata\.plugins\org.eclipse.core.runtime\.settings 找到 ...