用js如何实现点击加或减其数值做相应的改变_安全

<!DOCTYPE html>
<html>
<head>
<title>用js如何实现点击加或减其数值做相应的改变</title>
<meta charset="UTF-8" />
<script>
//调节器类
function Regulator(father){
thisinit = function(){
thisfather = father father : documentbody;
thisbox = documentcreateElement('span');
thissub = documentcreateElement('span');
thisnum = documentcreateElement('span');
thisadd = documentcreateElement('span');
thisboxclassName = 'regulator';
thissubclassName = 'regulator-sub';
thisnumclassName = 'regulator-num';
thisaddclassName = 'regulator-add';
thissubinnerHTML = '-';
thisnuminnerHTML = '0';
thisaddinnerHTML = '+';
thisboxappendChild(thissub);
thisboxappendChild(thisnum);
thisboxappendChild(thisadd);
thisnumvalue = 0; //设置初始数值
thissubonclick = (function(o){
return function(){
onuminnerHTML = --onumvalue;
}
})(this);
thisaddonclick = (function(o){
return function(){
onuminnerHTML = ++onumvalue;
}
})(this);
thisfatherappendChild(thisbox);
}
thisinit();
}
windowonload = function(){
var father = documentgetElementById('main'),
regulator1 = new Regulator(father);
regulator2 = new Regulator(father);
regulator3 = new Regulator(father);
regulator4 = new Regulator(father);
regulator5 = new Regulator(father);
regulator6 = new Regulator(father);
regulator7 = new Regulator(father);
regulator8 = new Regulator(father);
regulator9 = new Regulator(father);
}
</script>
<style>
regulator,
regulator-sub,
regulator-num,
regulator-add { display: inline-block; }
regulator { margin: 0px 5px; padding: 3px 0px; height: 30px; border: 1px solid #ccc; border-radius: 10px; overflow: hidden; box-shadow: 1px 2px 5px #ccc; box-sizing: border-box; }
regulator-sub,
regulator-num,
regulator-add { padding: 0px 10px; line-height: 22px; }
regulator-num { border-width: 0px 1px; border-style: solid; border-color: #ccc; }
regulator-sub,
regulator-add { cursor: default; user-select: none; }
</style>
</head>
<body>
<div id="main"></div>
</body>
</html>

编写一个Regulator类

每次new一个Regulator就可以了，省下很多重复的代码

使用方法

var test = new Regulator(documentbody)

只有一个参数，就是父元素

代码还有可以改进的地方

1初始化有重复可以封装成一个函数减少冗余

2还可以添加两个对象方法，setNum和getNum，用来设置数值和获取数值

3添加两个参数max，min用来限制调节器的范围

由于时间关系就没添加了

方法一：应该是程序里有了个for循环，for(var i=1;i=0;i++){alert(i)}，修改这个循环就好了。

方法二：窗口都是单独的类，把数据存到类的public变量中。然后新窗口访问旧窗口的变量就行了

js（JavaScript)一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

在1995年时，由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。

<input type="button" id="prev" value="上一页"/>
<span id="pageIndex">0</span>
<input type="button" id="next" value="下一页"/>
<script tyle="text/javascript">
var prev = documentgetElementById("prev"),
next = documentgetElementById("next"),
pageIndex = documentgetElementById("pageIndex");
prevonclick=function(){
if(parseInt(pageIndexinnerHTML) >1)
pageIndexinnerHTML = parseInt(pageIndexinnerHTML)-1;
}
nextonclick=function(){
pageIndexinnerHTML = parseInt(pageIndexinnerHTML)+1;
}
</script>

欢迎分享，转载请注明来源：内存溢出

原文地址: https://outofmemory.cn/yw/13361975.html

用js如何实现点击加或减其数值做相应的改变

发表评论

评论列表（0条）

用js如何实现点击加或减 其数值做相应的改变

发表评论

评论列表（0条）

用js如何实现点击加或减其数值做相应的改变