以下整理了，在学习JavaScript途中所练习的一些实例。

复利计算器

计算银行复利

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<html>
<head>
	<title>复利计算器</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<script>
		function get(){
			var p = Number(document.getElementById("p").value);
			var r = Number(document.getElementById("r").value)/100.0;
			var y = Number(document.getElementById("y").value);
			var m = Number(document.getElementById("m").value);
			var ps = p + m * (y-1);
			function mi(base,power){
				//定义幂函数
				var result = base;
				if(power == 0)
					return 1;
				if(power == 1)
					return base;
				for(var t = 0; t < power-1;t++){
					result = result * base;
				}
				return result;
			}
			function fuli(r,y){
				//计算复利
				var result = 0;
				for(var t = y; t > 0; t--){
					result = result + mi(r,t);
				}
				return result;
			}
			var s = m * fuli((1　+　r),(y　-　1)) + p * mi((1 + r),y);
			var rs = s - ps;
			document.getElementById("ps").value = ps;
			document.getElementById("rs").value = rs;
			document.getElementById("s").value = s;
		}
	</script>
</head>
<body>
	<h2 style="margin-left: 150px">复利计算器</h2>
	<div id="contain_l" style="float:left;width:200px;height:150px">
		<div id="c_p">
			<label>起始资金：</label><input type="text" id="p" style="width:100px"><label>￥</label>
		</div>
		<div id="c_r">
			<label>每年收益：</label><input type="text" id="r" style="width:100px"><label>%</label>
		</div>
		<div id="c_y">
			<label>复利年数：</label><input type="text" id="y" style="width:100px"><label>年</label>
		</div>
		<div id="c_m">
			<label>每年追加：</label><input type="text" id="m" style="width:100px"><label>￥</label>
		</div>
	</div>		
	<div id="contain_m" style="float:left;width:50px;height:25px; margin-top:40px;margin-left: 10px">
		<div id="btn">
		<input type="button" value="计算" onclick="get()">
		</div>
	</div>
	
	<div id="contain_r" style="float:left;width:200px;height:100px; margin-top:20px;margin-left: 10px;">
		<div id="c_m">
			<label>本金和：</label><input type="text" disabled="disabled" id="ps" style="width:100px"><label>￥</label>
		</div>
		<div id="c_m">
			<label>利息和：</label><input type="text" disabled="disabled" id="rs" style="width:100px"><label>￥</label>
		</div>
		<div id="c_m">
			<label>本息和：</label><input type="text" disabled="disabled" id="s" style="width:100px"><label>￥</label>
		</div>
	</div>
</div>
</body>
</html>

切换图片

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html>
<head>
	<title>切换图片</title>
	<meta charset="utf-8">
</head>
<body>
	<input type="button" id = "btn1" value="通过src属性切换图片" name="" onclick="get1()">
	<br>
	<input type="button" id = "btn2" value="通过属性节点切换图片" name="" onclick="get2()">
	<br>
	<img id = "im" src="imgs/t1.jpg" width="150" height="150">
	<br>
	<input type="button" value="上一张" name="" onclick="get3()">
	<input type="button" value="下一张" name="" onclick="get4()">
	<script type="text/javascript">
		/*思路：先通过getElementById()获取要操作的元素节点，再用src属性或者属性节点实现图片切换，然后根据将图片路径分成三个部分，根据中间的数字部分的改变来实现对图片的翻页操作*/
		var im = document.getElementById("im");
		var count = 1;
		var w1 = "imgs/t";
		var w2 = ".jpg";
		/*通过src属性切换图片到第一张*/
		function get1(){
			count = 1;
			var a = w1.concat(count).concat(w2);
			im.src = a;
		}
		/*通过属性节点切换图片到第二张*/
		function get2(){
			count = 2;
			var a = w1.concat(count).concat(w2);
			im.attributes["src"].nodeValue = a;
		}
		/*上一张*/
		function get3(){
			count = count-1;
			if(count < 1){
				return count = 1;
			}
			var a = w1.concat(count).concat(w2);
			im.src = a;
		}
		/*下一张*/
		function get4(){
			count = count+1;
			if(count > 5){
				return count = 5;
			}
			var a = w1.concat(count).concat(w2);
			im.src = a;
		}
	</script>
</body>
</html>

字符串替换工具

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<html>
	<head>
		<title>字符串替换工具</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<script>
			function get(){
				function getValue(id){
					return document.getElementById(id).value;
				}
				var a = getValue("in");
				var b = getValue("search");
				var c = getValue("replace");
				var regs = new RegExp(b,"g");
				var d = a.replace(regs,c); 
				document.getElementById("on").value = d;
			}
		</script>
	</head>
	<body>
		<h2>字符串替换工具</h2>
		<div id="contain">
			源字符串：<textarea id="in"></textarea>
			<br>
			查询：<input type="text" name="" id="search" style="margin-left: 32px;">
			<br>
			替换：<input type="text" name="" id="replace" style="margin-left: 32px;">
			<br>
			替换结果：<textarea id="on" disabled="disabled"></textarea>
			<input type="button" id="btn" value="替换" onclick="get()">
		</div>
	</body>
</html>

字符串排序工具

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html>
<html>
<head>
	<title>字符串排序工具</title>
	<meta charset="utf-8">
	<script type="text/javascript">
		/*按字母排序*/
		/*思路：先获取输入的字符串，然后转化为数组push给另一个新建的空数组，对该数组进行排序后再转化为字符串，返回结果*/
		function getByA(){
			var get = document.getElementById("in").value;
			get.split();
			var a = new Array();
			for(i in get){
				if(get[i] != " "){
					a.push(get[i]);
				}
				
			}
			a.sort();
			document.getElementById("r1").value = a.join();
			document.getElementById("r2").value = a.reverse().join();
		}
		/*按单词顺序进行排序*/
		/*思路：先获取输入的字符串，然后用空格作为分隔符转化为数组，通过localCompare函数对数组内容进行排序，最后转化为字符串，返回结果*/
		function getByW(){
			var get = document.getElementById("in").value;
			var b = get.split(" ");
			for(var i = 0; i < b.length; i++){
				var t;
				for(var f = i+1; f < b.length; f++){
					if(b[i].localeCompare(b[f]) > 0){
						t = b[f];
						b[f] = b[i];
						b[i] = t;
					}
				}
			}
			document.getElementById("r1").value = b.join(" ");
			document.getElementById("r2").value = b.reverse().join(" ");			
		}
	</script>
</head>
<body>
	<div id="contain">
		<div id = "d1">
			<label>随机输入英文字符串：</label><textarea id="in"></textarea>
		</div>
		<div id = "d2">
			<label>正排序结果：</label><textarea id="r1" style="margin-left: 63px" disabled="disabled"></textarea>
		</div>
		<div id = "d3">
			<label>倒排序结果：</label><textarea id="r2" style="margin-left: 63px" disabled="disabled"></textarea>
		</div>
		<div id = "d4">
			<input style="margin-left: 70px" type="button" value="按字母排序" name="" onclick="getByA()">
			<input type="button" value="按单词排序" name="" onclick="getByW()">
		</div>
	</div>
</body>
</html>

计算年龄

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>
<head>
	<title>计算年龄</title>
	<meta charset="utf-8">
	<script type="text/javascript">
		/*思路：先判断输入的日期是否合法，将输入的日期作为参数创建一个日期对象保存出生日期信息，再创建一个日期对象保存目前的日期信息，分别获取两个日期的年份并相减得到年龄*/
		function get(){
			var d = new Date((document.getElementById("birth").value).toString());
			if((d.getFullYear() > (new Date().getFullYear()))){
				alert("输入日期错误");
				return;	//终止函数
			}
			var b = new Date();
			var r = b.getFullYear()-d.getFullYear();
			document.getElementById("age").value = r;
		}
	</script>
</head>
<body>
	<h2>年龄计算工具</h2>
	<div id = "contain">
		<div >
			出生日期：<input id = "birth" type="text" name="">
		</div>
		<div ><input type="button" id = "btn" value="计算" name="" onclick="get()"></div>
		<div >
			当前年龄：<input id = "age" type="text" disabled="disabled" name="">
		</div>
	</div>
</body>
</html>

验证账号和密码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html>
<head>
	<title>验证账号密码是否为空</title>
	<meta charset="utf-8">
	<script type="text/javascript">
		function check(){
			var a = document.getElementById("user").value;
			var b = document.getElementById("pwd").value;
			var c = document.getElementById("age").value;
			var d = Number(c);
			if((a == "")||(b == "")){
				alert("账号和密码不能为空");
			}else{
				if((a.length < 4)||(a.length > 12)){
					alert("账号长度不合法");
				}
			}
			if(isNaN(c)){
				alert("年龄必须为数字");
			}else{
				for(i in c){
					if(c[i] == '.'){
						alert("必须输入整数");
						break;
					}
				}
			}
			
		}
	</script>
</head>
<body>
	账号:<input type="text" name="" id="user">
	<br>
	密码:<input type="password" name="" id="pwd">
	<br>
	年龄:<input type="text" name="" id="age">
	<br>
	<input type="button" value="注册" onclick="check()" name="">
</body>
</html>

下拉列表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!DOCTYPE html>
<!--思路：先将列表封装在div中，设置为隐藏，当移动到指定位置时则显示，离开列表则继续隐藏-->
<html>
<head>
    <title>下拉列表</title>
    <meta charset="utf-8">
    <style type="text/css">
        a{
            text-decoration:none ;/*去下划线*/
            font-size:14px;
            color:CornflowerBlue;
        }
 
        div.menu a{
            display:block; /*转化为块级元素*/
            color:#888;
            padding:10px 0 10px 15px;
        }
        div.menu{
            border:1px solid lightgray;/*设置边框的样式*/
            width:80px;
        }
        div#menu1{
            margin-left:20px; /*设置外边距定好DIV的位置*/
            margin-top: 5px;
        }
        div#menu2{
            margin-left:50px; /*设置外边距定好DIV的位置*/
            margin-top: 5px;
        }
        div#menu3{
            margin-left:80px; /*设置外边距定好DIV的位置*/
            margin-top: 5px;
        }
 
        div.menu a:hover{
            background-color:#f1f1f1;
        }
    </style>
</head>
<body>
<a href="#" id="wq" onmouseover="show1()">武器</a>
<a href="#" id="hj" onmouseover="show2()">护甲</a>
<a href="#" id="yx"  onmouseover="show3()">英雄</a>
<div id="menu1" class="menu"  onmouseleave="hid1()">
    <a href="#">倚天</a>
    <a href="#">屠龙</a>
    <a href="#">锤子</a>
    <a href="#">飞刀</a>
</div>
<div id="menu2" class="menu"  onmouseleave="hid2()">
    <a href="#">盾牌</a>
    <a href="#">铁锅</a>
    <a href="#">木盾</a>
    <a href="#">铁盾</a>
</div>
<div id="menu3" class="menu"  onmouseleave="hid3()">
    <a href="#">盖伦</a>
    <a href="#">提莫</a>
    <a href="#">安妮</a>
    <a href="#">死哥</a>
</div>
    <script type="text/javascript">
       var t1 = document.getElementById("menu1");
       t1.style.display = "none";
       var t2 = document.getElementById("menu2");
       t2.style.display = "none";
       var t3 = document.getElementById("menu3");
       t3.style.display = "none";
       //隐藏
       function hid1() {
           t1.style.display = "none";
       }
       //显示
       function show1(){
            t1.style.display = "block";
            t2.style.display = "none";
            t3.style.display = "none";
       }
        //隐藏
       function hid2() {
           t2.style.display = "none";
       }
       //显示
       function show2(){
            t2.style.display = "block";
            t1.style.display = "none";
            t3.style.display = "none";
       }
        //隐藏
       function hid3() {
           t3.style.display = "none";
       }
       //显示
       function show3(){
            t1.style.display = "none";
            t2.style.display = "none";
            t3.style.display = "block";
       }
    </script>
</body>
</html>

选中所有的checkbox

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html>
<head>
	<title>选中所有的checkbox</title>
	<meta charset="utf-8">
	<script type="text/javascript">
		/*思路：先获取所有checkbox组件的元素节点，然后判断是否全选，若全选，则将所有元素节点的checked属性设置为checked，没有全选就设置为空；反选，判断所有checkbox组件（全选除外）的元素节点checked属性的状态并置反*/
		var t = document.getElementsByTagName("input");
		/*全选*/
		function get(){			
			var a = document.getElementById("qx");
			if(a.checked){
				for(i in t){
					t[i].checked = "checked";
				}
			}
			else if(a.checked == ""){
				for(i in t){
					t[i].checked = "";
				}
			}
		}
		/*反选*/
		function getdf(){
			for(i = 1; i < t.length;i++){
				if(t[i].checked){
					t[i].checked = "";
				}else{
					t[i].checked = "checked";
				}
			}
		}
	</script>
</head>
<body>
	<h2>选中所有的checkbox</h2>
</body>
	<input id="qx" type="checkbox" name="" onclick="get()">全选<br>
	<input type="checkbox" name="">折纸<br>
	<input type="checkbox" name="">狂三<br>
	<input type="checkbox" name="">小四<br>
	<input type="checkbox" name="">琴里<br>
	<input type="checkbox" name="">七罪<br>
	<input type="checkbox" name="">九霄<br>
	<input type="checkbox" name="">十香<br>
	<input type="checkbox" name="">万由里<br>
	<a href="#" onclick="getdf()" style="text-decoration: none;">反选</a>
</html>

动态加载js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
	<title>动态加载js</title>
	<meta charset="utf-8">
</head>
<script type="text/javascript">
	function get(){
		var s = document.createElement('script'); //创建script元素节点
		s.src = 'test.js'; //设置其src属性
		var firstScript = document.getElementsByTagName("script")[0]; //获取第一个script元素节点
    	firstScript.parentNode.insertBefore(s,firstScript); //插入到第一个script前面
    	//firstScript.appendChild(s); //追加到第一个script后面
	}
</script>
<body>
	<input type="button" value="动态加载js" onclick="get()" name="">
</body>
</html>

最后更新： 2020年07月27日 03:39

原始链接： https://www.lousenjay.top/2018/02/12/JavaScript练习实例/