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 分别设置了同一个颜色,看似是一个整体,其实本来就是分开的. 那么点击的时候,只 ...
随机推荐
- UITableViewCell的prepareForReuse方法
cell被重用怎样提前知道? 重写cell的prepareForReuse官方头文件里有说明.当前已经被分配的cell假设被重用了(一般是滚动出屏幕外了),会调用cell的prepareForReus ...
- php将数组或字符串写入文件
//将数组保存在文件里 function export_to_file($file, $variable) { $fopen = fopen($file, 'wb'); if (!$fopen) { ...
- 【数字图像处理】五.MFC图像点运算之灰度线性变化、灰度非线性变化、阈值化和均衡化处理具体解释
本文主要讲述基于VC++6.0 MFC图像处理的应用知识,主要结合自己大三所学课程<数字图像处理>及课件进行解说.主要通过MFC单文档视图实现显示BMP图片点运算处理.包含图像灰度线性变换 ...
- linux的vi或vim文件时，怎样消除刚才查找字符串的高亮？
有时候,自己在通过/查找字符串时,会出现: 但是呢,当你保存,再次进入还是会出现这么花的高亮显示,很令人苦恼. 解决办法 随便,输入没有的字符串,即可解决. 如下 /sssssssssssssssss ...
- SASS常用方法
cnpm install --save-dev sass-loader //sass-loader依赖于node-sass cnpm install --save-dev node-sass //实现 ...
- 经典的横线中间文字css布局---flex布局
html: <div class="title"> <div class="line"></div> <div cla ...
- 微信小程序从零开始开发步骤（四）自定义分享的功能
上一章节,实现了小程序的底部导航的功能,这一节开始实现一些简单的功能.本章节介绍的是小程序的自定义分享的功能. 可以分享小程序的任何一个页面给好友或群聊.注意是分享给好友或群聊,并没有分享到朋友圈.一 ...
- C# XML类学习整理（待补）
一.读取xml文件内容: #region "获取xml文件内容" //将xml文件加载进来 XDocument xdoc = XDocument.Load("F:\\6. ...
- POJ 1101 The Game（BFS+判方向）
The Game Description One morning, you wake up and think: "I am such a good programmer. Why ...
- 相似group by的分组计数功能
之前同事发过一个语句,实现的功能比較简单,相似group by的分组计数功能,由于where条件有like,又无法用group by来实现. SELECT a.N0,b.N1,c.N2,d.N3,e. ...