js中一些实用的小工具

古城微笑少年丶 2022-05-31 10:36 308阅读 0赞

# js中一些实用的小工具    #

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

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

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

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

下面是我的js代码

可以看出我先声明了一个全局变量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时，进行叠加。

3.实现数字的递增。

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

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

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

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 noChoice(){
    	var sports = document.getElementsByName("sports");
    	for(var i = 0;i<sports.length;i++){
    		sports[i].checked = false;
    	}
    }

4.滚动图测试

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

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

首先看一下我的html代码。

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

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

function stop(){
    	clearInterval(test);
    }