Weekly Practice

1. 列表隔行换色

简单的循环和JS获取元素样式（style）运用

1
2
3
4
5
6
7
<ul>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ul>
1
2
3
4
5
6
7
8
9
var lis = document.getElementsByTagName('li');
for(var i=0;i<lis.length;i++){
	if( i%2 ){   //偶数行
		lis[i].style.background = 'red';
	}
	else{   //奇数行
		lis[i].style.background = 'blue';
	}
}

只要能判断奇偶行，别的就没啥难的了。

九九乘法表

嵌套循环、修改DOM内容的结合训练，当然，也可以直接用document.write()打印在页面上

1
<div id="elem"></div>
1
2
3
4
5
6
7
8
var elem = document.getElementById('elem');

for(var i=1;i<=9;i++){
	for( j=1; j<=i; j++ ){
		elem.innerHTML +=  i +'*'+ j +'=' + i*j + ' ';
	}
	elem.innerHTML += '<br>';
}

内循环中的j <= i着实巧妙，让代码呈梯形打印，如果让变量j小于9的话，那么输出会打印两遍

V字排列

就是对每一个div绝对定位，分别定义他们的top和left,从而呈V字排列

1
2
3
4
5
6
7
8
9
10
11
<ul>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ul>
1
2
3
4
5
6
7
8
9
10
var lis = document.getElementsByTagName('li');
for(var i=0;i<lis.length;i++){
lis[i].style.left = i * 50 + 'px';
if( i > Math.floor(lis.length/2) ){
	lis[i].style.top = (lis.length - i - 1) * 50 + 'px';
}
else{
	lis[i].style.top = i * 50 + 'px';
}
}

注意一下关于字符串拼接的时候引号和+号的使用技巧

求第七位的斐波那契数列

这里只使用循环来实现，递归方法后面会提到并实现

1
2
3
4
5
6
7
8
9
10
11
12
var number = 8;
var result = 0; 
var one = 1;
var two = 1;   

for(var i=2;i<number;i++){
	result = one + two;
	one = two; 
	two = result;
}

console.log( result );

因为前两项我们定义了为one = 1和two = 1，所以循环从2开始。

题目太长……

假设某人有 100,000 现金。 每经过一次路口需要进行一次交费。 交费规则为当他现金大于50,000 时每次需要交 5% ，如果现金小于等于 50,000 时每次交 5,000 。 请写一程序计算此人可以经过多少次这个路口？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var all = 100000;
var count = 0;

while( all >= 5000 ){
	if( all > 50000 ){
	  all -= all * 0.05;
	  count++;
	}
	else{
		all -= 5000;
		count++;
	}
}

console.log( count );   //23

没啥好说的……挺经典的一道题，各种语言的版本都有

找出虽有三位数中的水仙花数

找出所有三位数中的水仙花数，即a³ + b³ + c³ = abc ，例如 153就是一组水仙花数，1³ + 5³ + 3³ = 153

首先需要分离这个三位数，假设三位数为123，可以看成 1 * 100 + 2 * 10 + 3,那就好办了，只需要如下操作，三位数就被分离出来了

1
2
3
4
5
6
7
8
9
//老师的办法
var ge = number%10;
var shi = Math.floor(number%100/10);
var bai = Math.floor(number/100);
//我的办法
var ge = i % 10;		
var shi = Math.floor( i / 10 % 10);
var bai = Math.floor( i / 100 % 10);
//大同小异，喜欢哪个用哪个

然后套到循环里，进行判断就好

1
2
3
4
5
6
7
8
for( var i = 100;i < 1000; ++i ){
   var a = Math.floor( i / 100 % 10);
   var b = Math.floor( i / 10 % 10);
   var c = i % 10;
   if( i == Math.pow(a,3) + Math.pow(b,3) + Math.pow(c,3) ){
	   document.write( i + '&nbsp;');
   }
}

8月7日

（此日答案均为摸鱼王自己做的，可能不够简单明了，等以后更新优化）

1.阶乘、四则运算计算器

自己的解法

1
2
3
4
5
6
7
8
9
//阶乘
function jc( m ){
	var result = 1;
	for(var i = 1;i <= m ; ++i){
		result *= i;
	}
	console.log( result );
}
jc(3);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//四则运算计算器
function calc( a, b, f){
	var result = 0;
	switch(f){
		case '+':
			result = a + b;
			break;
		case '-':
			result = a - b;
			break;
		case '*':
			result = a * b;
			break;
		case '/':
			result = a / b;
			break;
	}
	console.log( result );
}

2. 实现反选全选功能

自己无聊把全选、全不选、反选和联动全选都写出来了

页面部分

1
2
3
4
5
6
7
<input type="checkbox" id="allChoose"><label for="allChoose">全选</label>
  <input type="button" id="noChoose" value="全不选">
  <input type="button" id="otherChoose" value="反选">
  <input type="checkbox" class="choose">
  <input type="checkbox" class="choose">
  <input type="checkbox" class="choose">
  <input type="checkbox" class="choose">

js部分

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
var qx = document.getElementById('allChoose');
var cbs = document.getElementsByClassName('choose');
var qbx = document.getElementById('noChoose');
var fx = document.getElementById('otherChoose');
//全选
qx.onclick = function () {
	if (this.checked == true) {				//用了一下this，比较方便
		for (var i=0;i<cbs.length;i++) {
			cbs[i].checked = true;
		}
	} else {
		for (var i=0;i<cbs.length;i++) {
			cbs[i].checked = false;
		}
	}
}
//全不选
qbx.onclick = function(){
	for(var i = 0; i < cbs.length; ++i){
		cbs[i].checked = false;
	}
	qx.checked = false;
}
//反选
fx.onclick = function(){
	var n = 0;
	for(var i = 0; i < cbs.length;++i){
		if(!cbs[i].checked){
			cbs[i].checked = 1;
			n++
		}else{
			cbs[i].checked = 0;
			qx.checked = false;
		}
	}
	if(n == cbs.length){
		qx.checked = true;
	}

}
//联动全选
for (var i=0;i<cbs.length;i++) {					
	cbs[i].onclick = function()
	{
		var n = 0;           
		for (var i = 0; i < cbs.length; ++i) {
			if (cbs[i].checked == true) {
				n++;
			}
		}               
		if (n == cbs.length) {
			qx.checked = true;
		} else {

			qx.checked = false;
		}
	}
}

逻辑其实很简单，即全选时让checkbox的checked属性为真，全不选的时候为假，注意如果使用checkbox制作全选，那只要不是全选，它的状态都是假，只要所有checkbox的checked属性为真，那它就是真，联动全选就是判断一下你勾选的checkbox数量和获取时候的集合长度是否一致，一致则勾选全选，反之不勾选。

3. 猜数字小游戏

毕竟立志摸鱼，所以就直接使用prompt()内置函数写了一个，看看周围都是用input写的额，我好像是有点……emmmm

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 var a=parseInt(Math.random()*99+1);
console.log(a);
var b;
outer : for( i = 1; i <= 10; ++i){
	b=Number(prompt("请输入一个数字"));
	//点击确定返回输出值，点击取消返回null值
	console.log( prompt() ); 
	if(b == ''){
		alert('输入不能为空');
		b=Number(prompt("请重新输入一个数字"));
	}else if(b > a){
			alert("猜大了,猜了："+ i +"次");
	}else if(b < a){
			alert("猜小了,猜了："+ i +"次");
	}else if(b == a){
		alert("恭喜猜中了,你一共猜了"+ i +"次,中奖数字为："+ a);
		break;
	}

}
if(i>10){
	alert("请重新开始游戏！");
}

需要注意的是，经过console.log()证明这里的prompt()的确定取消按钮的返回值均为输入框的内容。

4. 切换列表项(往返) + 列表随机背景颜色

这里暂时提供自己的写法，我的想法是当count == lis.length - 1即切换到最后一个li 的时候，设置一个flag，并将它置一个新状态代表向上，并让count--，当向上状态下count == 0的时候再将flag置原状态即向下切换，实现的时候有些麻烦，还在寻求简便操作，至于随机颜色就很简单了。

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
var btn = document.getElementsByTagName('button')[0];
var lis = document.getElementsByTagName('li');
var count = 0;
var flag = 1;
btn.onclick = function(){
	for(var i = 0;i < lis.length;++i){
		lis[i].style.background = '';

	}
	lis[count].style.background = 'rgb('+ getRandom() +','+ getRandom() + ',' + getRandom() + ')';
	if(count < lis.length - 1 && flag == 1){	//向下切换li
		count++;
	}else if(count == lis.length -1 && flag == 1){	//切换到最后一个li，更改切换方向
		flag = 0;
		count--;
	}else if(flag == 0 && count < lis.length - 1){	//方向是向上的时候
		flag = 0;
		count--; 
		if(count == 0){	//如果到了第一个li，变更flag的状态
			flag = 1;
		}
	}

}
//随机颜色
var getRandom = function(){
	var a = parseInt(Math.random()*255);
	return a;

}

5. 微信聊天

就是实现一个聊天框

头像可以点击，切换用户
难点不是很多，给每个用户即每个头像一个类，用以区分聊天者，图片用一个数组存起来，当onclick事件发生的时候，切换数组元素。

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
104
105
106
107
108
109
*{margin:0; padding:0}
li{list-style: none;}
.container{ 
	width:256px; 
	height:540px; 
	margin:20px auto 0; 
	background-image: url('../../iPhone.png');
	background-size: cover; 
	position:relative;
}
#name{
	width:24px; 
	height:28px;
	border:1px solid darkgrey; 
	border-radius: 8px; 
	padding:1px; 
	cursor:pointer;
	position: absolute;
	left: 4px;
	bottom:0;
}
.main{
	bottom:81px; 
	left:22px; 
	border-top:1px solid darkgrey; 
	position:absolute;
	padding:6px 4px 4px 7px;
	width: 206px;
}
#import{
	border-radius: 4px; 
	height:18px; 
	line-height:18px; 
	border: 1px solid #b8b8b8; 
	outline:0;
	padding:5px 0; 
	bottom:5px; 
	position:relative; 
	bottom:-2px;
	left: 30px;
	width: 128px;
}
#enter{
	font: 18px 'Microsoft YaHei';
	bottom: -5px;
	left: 29px;  
	position: relative; 
	cursor:pointer;
	font-size: 20px;
}
.content{
	width: 206px;
	height: 336px;
	top: 84px; 
	position: relative;
	overflow: auto;
	padding: 0 0 0 28px;
}
.content li{ 
	line-height:28px;
	margin-bottom: 15px;
	overflow: hidden;
	position: relative;
}
#inHtml img{
	width:25px; 
	height:25px;
	position: relative;
}
.th{
	text-align: right;
}
.th img{
	float:right; 
	margin-left:15px;
}
.ds img{    
	width: 25px;
	height: 25px;
	position: relative;
	float: left;
	margin-right: 15px;
}
.th p{
	background: forestgreen; 
	text-align: left;
	padding: 3px 5px;
	border-radius: 4px;
	color: white; 
	float:right;
	max-width: 182px;
	font:14px 'Microsoft YaHei'; 
}
.ds p{
	background: dimgrey;
	float: left;
	text-align: left;
	padding: 3px 4px;
	border-radius: 4px;
	color: white;
	left: 32px;
	max-width: 190px; 
	font:14px 'Microsoft YaHei';
}
.ds{ 
	text-align: left;
}
.sent1{width:0; height:0; border:solid 8px; border-color: white white white forestgreen; position: absolute;right: 24px;top: 4px;}
.sent2{width:0; height:0; border:solid 8px; border-color: white dimgrey white white ; position: absolute;left: 24px;top: 4px;}

聊天框的三角可以用边框实现，具体不说了，百度一下

1
2
3
4
5
6
7
8
9
10
<div class="container">
	<div class="content">
		<ul id="inHtml"></ul>
	</div>
	<div class="main">
		<img id='name' src="../../qq1.gif">
		<input id='import' type="text">
		<span id="enter">发送</span>
	</div>
</div>

不设置li，通过js动态生成li

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
//给两个图片定义为一个数组
var arr = ['../../qq1.gif','../../qq2.gif'];
//得到名称的图标
var oName = $('name');
//得到输入内容
var oGet = $('import');
//显示输入内容
var oWrite = $('inHtml');
//默认显示土豪
var onOff = true;
oName.onclick = function () {
	if(onOff){
		oName.src = arr[1];
		onOff = false;
		oGet.focus();
	} else {
		oName.src = arr[0];
		onOff = true;
		oGet.focus();
	}
}
//发送事件
var oSet = $('enter');
oSet.onclick = function(){
	if(onOff){
		oWrite.innerHTML += '<li class="th">' + '<img src='+arr[0] + " /><p>" + oGet.value + '<span class="sent1"></span>' +"</p></li>";
	} else{
		oWrite.innerHTML += '<li class="ds">' + '<img src='+arr[1] + " /><p>" + oGet.value + '<span class="sent2"></span>' + "</p></li>";
	}
	oGet.value = '';
	oGet.focus();
}


//调用ID通配符
function $(id){
	return document.getElementById(id);
}

study
#JavaScript
Weekly Practice
https://moewang0321.github.io/2019/08/08/2019-08-08-练习/
作者
Moe Wang
发布于
2019年8月8日
许可协议