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 分别设置了同一个颜色,看似是一个整体,其实本来就是分开的. 那么点击的时候,只 ...
随机推荐
- 00075_BigInteger
1.Java中long型为最大整数类型,对于超过long型的数据如何去表示呢.在Java的世界中,超过long型的整数已经不能被称为整数了,它们被封装成BigInteger对象.在BigInteger ...
- UVALive 6869 Repeated Substrings
Repeated Substrings Time Limit: 3000MS Memory Limit: Unknown 64bit IO Format: %lld & %llu Descri ...
- BZOJ 刷题记录 PART 5
拖了好久才写的. [BZOJ2821]接触分块大法.这道题略有点新颖.首先我们先分块.然后统计每块中每一个数出现的个数. 以下是联立各个方块,预处理出第I个方块到第J个方块出现正偶数次数的个数. fo ...
- 【iOS开发-88】事件传递原理解释哪个控件处理事件以及响应者链条的介绍
一.触摸事件传递原理 (1)大的方向是:从父控件传递给子控件. --父控件会先检查自己能否接受事件的处理 --然后再看看触摸在不在自己的范围内 --假设在的话,就遍历子控件.看看有没有合适的子控件能够 ...
- 湖南省第八届大学生计算机程序设计竞赛（A,B,C,E,F,I,J)
A 三家人 Description 有三户人家共拥有一座花园,每户人家的太太均需帮忙整理花园.A 太太工作了5 天,B 太太则工作了4 天,才将花园整理完毕.C 太太因为正身怀六甲无法加入她们的行列, ...
- python 数字计算模块 decimal（小数计算）
from decimal import * a = Decimal('0.1')+Decimal('0.1')+Decimal('0.1')+Decimal('0.3') float(a) >& ...
- 几个不错的开源的.net界面控件
转自原文 几个不错的开源的.net界面控件 (转) 几个不错的开源的.net界面控件 - zt 介绍几个自己觉得不错的几个开源的.net界面控件,不知道是否有人介绍过. DockPanel Suite ...
- 简单的WINFORM窗口，体验WINFORM带来的快感
当习惯成为一种自然,就不再喜欢那种条条框框的规则 using System; using System.Windows.Forms; namespace Window{ class Window{ s ...
- 非对称算法，散列(Hash)以及证书的那些事
转载请注明出处 http://blog.csdn.net/pony_maggie/article/details/35389657 作者:小马 这几个概念在金融电子支付领域用得比較多,我忽然认为把它们 ...
- code blocks常用快捷键
CodeBlocks常用操作快捷键 编辑部分: Ctrl + A:全选 Ctrl + C:复制 Ctrl + X: 剪切 Ctrl + V:粘贴 Ctrl + Z:撤销(后退一步) Ctrl + S: ...