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 分别设置了同一个颜色,看似是一个整体,其实本来就是分开的. 那么点击的时候,只 ...
随机推荐
- 讲述ssh服务攻击案例及事件分析
修改中 本文出自 "李晨光原创技术博客" 博客,谢绝转载!
- 求s=a+aa+aaa+aaaa+aa...a的值，其中a是一个数字。 例如2+22+222+2222+22222(此时共有5个数相加)，几个数相加有键盘控制。
代码: package com.liron.p1; import java.io.IOException; import java.util.Scanner; /** * 求s=a+aa+aaa+aa ...
- c#程序打包、机器代码生成(Ngen.exe)
深入本机影像生成器(Ngen.exe)工具使用方法详解 先介绍一点背景知识:.Net程序在运行时会实时(JIT)编译,将.Net程序文件编译成cpu认识的汇编机器码.实时编译需要消耗额外的cpu和内存 ...
- c++操作当前窗体句柄
句柄 这一概念是MFC里的一个类.MFC有专门的函数来获取窗体句柄. HWND hwnd; hwnd=CreateWindow("my own windowshandle",&qu ...
- 有关cascade的结构体
/* internal cascade classifier */ typedef struct CvCascadeHaarClassifier { CV_INT_HAAR_CLASSIFIER_FI ...
- RelativeLayout-代码中成员控件width height
今天需要在代码中动态的设置一个textview的width跟height属性,记录下来. textview在xml中的布局如下 <RelativeLayout android:layout_wi ...
- 1.3 Quick Start中 Step 8: Use Kafka Streams to process data官网剖析（博主推荐）
不多说,直接上干货! 一切来源于官网 http://kafka.apache.org/documentation/ Step 8: Use Kafka Streams to process data ...
- Linux架设Jsp环境
本文已发表在2010年<网管员世界> 650) this.width=650;" onclick="window.open("http://blog.51ct ...
- Monkey服务器命令
- NET Framework 4.5 有更加简便的方法 Task.Run()
NET Framework 4.5 有更加简便的方法 Task.Run()