js中一些实用的小工具

js中一些实用的小工具

我们在使用js的过程中，会经常使用一些小的控件使我们的页面的功能更为强大和完善。当我们在浏览一些页面的时候，我们会发现许多随着我们的点击而出现的一些功能。现在，我来简单介绍一下我对于一些功能的实现。

1.密码框可见，这个功能我们经常使用。我们可以通过点击按钮使密码框可见。

这是我的html代码，是一个输入框。

密码:<input type="password" id="inputTest" name="password" value="123456" ><input type="button" value="点击此处密码可见" id="buttonValue" οnclick="changeType()" />

下面是我的js代码

var count = 0;
function changeType(){
	var inputTest = document.getElementById("inputTest");
	var buttonValue = document.getElementById("buttonValue");
	if(count%2==0){
		inputTest.type="text";
		buttonValue.value="点击密码不可见";
	}else{
		inputTest.type="password";
		buttonValue.value="点击此处密码可见";
	}
	count++;
}

可以看出我先声明了一个全局变量count，作为点击次数的计数器。然后根据count的值修改密码输入框的type属性，实现密码框的可见和不可见。

2.计算多选框的值

这个功能通常在购物车中会体现，当我们在选择购买的东西时，会在下方弹出我们的购买总值。

<input type="checkbox" value="1" name="number" onchange = "cal()">1
<input type="checkbox" value="2" name="number" onchange = "cal()">2
<input type="checkbox" value="3" name="number" onchange = "cal()">3

首先声明了三个多选框，之后我会获取这三个多选框的checked属性值，当checked的属性值为true时，进行叠加。

function cal(){
	var numberArray = document.getElementsByName("number");
	var counts = numberArray.length;
	var total = 0;
	for(var i=0;i<counts;i++){
		if(numberArray[i].checked==true){
			total =parseInt( total) +parseInt( numberArray[i].value);
		}
		
	}
	var totalTest = document.getElementById("total");
	totalTest.value=total;
}

3.实现数字的递增。

我们在购物的时候，通常会发现一件事。我们可以点击按钮实现购物数量的递增和递减。这个功能同样没有那么复杂。

<input type="button" id="reductionButton" value="-" οnclick="reduction()" >
<input type="text" value="1" id="testNumber">
<input type="button" value="+" οnclick="increment()">

当我们需要实现递减递加时，需要获取我们的输入框的数字值。

function increment(){
	var testNumber = document.getElementById("testNumber");
	var value = parseInt(testNumber.value);
	value++;
	if(value>0){
		reductionButton.disabled= false;
	}
	
	testNumber.value = value;
}
function reduction(){
	var testNumber = document.getElementById("testNumber");
	var reductionButton = document.getElementById("reductionButton");
	var value = parseInt(testNumber.value);
	value--;
	if(value>0){
		testNumber.value = value;
		reductionButton.disabled= false;
		testNumber.value = value;
	}else{
		testNumber.value =0;
		reductionButton.disabled = true;
	}
	
}

这需要两个函数来分别进行实现。

4.多选框的全选，全不选以及反选。

这个也是经常会遇到的问题，这个其实可以通过修改多选框的checked属性来实现

html代码如下

<center><h1>多选框测试</h1>
<hr>
<input type="checkbox" name="sports">足球<br>
<input type="checkbox" name="sports">篮球<br>
<input type="checkbox" name="sports">乒乓球<br>
<input type="button" value="全选" οnclick="selectAll()"><input type="button" value="反选" οnclick="reverseSelection()"><input type="button" value="全不选" οnclick="noChoice()">
</center>

一共有三个函数

全选函数

function selectAll(){
	var sports = document.getElementsByName("sports");
	for(var i = 0;i<sports.length;i++){
		sports[i].checked = true;
	}
}

反选函数

function reverseSelection(){
	var sports = document.getElementsByName("sports");
	for(var i = 0;i<sports.length;i++){
		if(sports[i].checked==true){
			sports[i].checked=false;
			continue;
		}else{
			sports[i].checked=true;
			continue;
		}
	}
}

全不选函数

function noChoice(){
	var sports = document.getElementsByName("sports");
	for(var i = 0;i<sports.length;i++){
		sports[i].checked = false;
	}
}

4.滚动图测试

我们需要两个函数，一个是setInterval()和clearInterval();

一个是设置定时执行某一个函数，一个是清除刚才设置的定时执行任务。

首先看一下我的html代码。

<img id="kobe" alt="kobe" src="../img/kobe01.jpg" width="100px" height="100px" >
<br><input type="button"  value="停止滚动" οnclick="stop()"></input>

然后是我的js代码，我是设置一个全局变量count，根据它的值来设置Img的src属性值.

var count = 0;
var test = setInterval("changePic()",1000);
function changePic(){
	var pic = document.getElementById("kobe");
	if(count%3==0){
		pic.src="../img/kobe01.jpg";
	}
	if(count%3==1){
		pic.src="../img/kobe02.jpg";
	}
	if(count%3==2){
		pic.src="../img/kobe03.jpg";
	}
	count++;
}

同样可以通过点击停止滚动按钮实现停止滚动

function stop(){
	clearInterval(test);
}