做了个特效小程序，在过程中发现自己在学过的知识中有掌握的不够牢固的，今天在这里复习一下：
一、三目运算符中能否使用{}吗？
不可以，三目运算符的语法：条件 ? 结果1 : 结果2;
结果不可以用语句代替
二、canvas可以嵌套吗？
不可以，
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 #can1{background:#000;}
8 #can2{background:red;}
9 </style>
10 </head>
11 <body>
12 <canvas id="can1">
13 <canvas id="can2"></canvas>
14 </canvas>
15 <script>
16 var can1=document.getElementById(‘can1‘);
17 var can2=document.getElementById(‘can2‘);
18 var con1=can1.getContext(‘2d‘);
19 var con2=can2.getContext(‘2d‘);
20 </script>
21 </body>
22 </html>
这个代码的显示结果为
并没有显示出颜色为红的画布，所以在需要画布的更新时尽量使用局部更新
三、jCanvaScript.js的使用
jCanvaScript.js是一个方便用户进行canvas绘图的插件，使用时将该js文件链接进来即可
使用方法：
1 var can1=document.getElementById(‘can1‘); 2 var con1=can1.getContext(‘2d‘); 3 jc.start(‘can1‘,true); 4 jc.circle(10,10,10,‘#ff0000‘,1);
在（10，10）处绘制一个半径为10px的红色的圆。
其他详细使用信息：
<script type="text/javascript" src="jCancaScript.1.5.18.min.js"></script>
<script>
var oInput=document.getElmentById("input1");
var oc=document.getElmentById("c1");
var ogc=oc.getContext("2d");
//开始
jc.start("c1");//代表：只是指定id为c1的画布 只绘制了一次 ，只能进行一次操作
//jc.start("c1",true);//第二个参数代表可以重绘，可以进行多个操作
//jc.rect(100,100,50,50);带边框的正方形 默认
//jc.rect(100,100,50,50,1);带边框的正方形 bool为1或者true时 ： 整个正方形是填充的
//jc.rect(100,100,50,50,"#ff0000",1);填充色是红色
//下面画个圆形
jc.circle(100,100,50,"#ff0000",1);
接下来 给这个圆形加个点击事件【以下代码运行无效 木有点击事件产生 原因：红色代码】
jc.circle(100,100,50,"#ff0000",1).click(function(){
alert(123);
});
//在画布中间对画出的圆进行任意方向的拖拽
jc.circle(100,100,50,"#ff0000",1).draggable();
//在画布外面添加一个按钮点击改变图形的颜色，请看蓝色代码
jc.circle(100,100,50,"#ff0000",1).id("c1");//id是针对单个，name可以针对一组
//结束
jc.start("c1");
oInput.onclick=function(){
jc("#c1").color("#ffff00");
//jc("#c1").color("#ffff00").animate({x:200,y:200,radius:5},2000);//从坐标为100,100半径为50的
//大圆慢慢匀速缩小到坐标为200,200半径为5的小圆，总共耗时2秒.
}
</script>
<canvas id="c1" style="width:400px;height:400px;background:blue"></canvas>
<input type="button" value="点击" id="input1" />
四、js中判断获取的时间是否相等 ：
var date1=new date(),date2=new date();
date1.getTime()==date2.getTime()？
五、删除数组中x开始的n的字符
arry.splice(x,n);
其他数组操作方法：
1、数组元素的添加 arrayObj. push([item1 [item2 [. . . [itemN ]]]]);// 将一个或多个新元素添加到数组结尾，并返回数组新长度 arrayObj.unshift([item1 [item2 [. . . [itemN ]]]]);// 将一个或多个新元素添加到数组开始，数组中的元素自动后移，返回数组新长度 arrayObj.splice(insertPos,0,[item1[, item2[, . . . [,itemN]]]]);//将一个或多个新元素插入到数组的指定位置，插入位置的元素自动后移，返回""。 2、数组元素的删除 arrayObj.pop(); //移除最后一个元素并返回该元素值 arrayObj.shift(); //移除最前一个元素并返回该元素值，数组中元素自动前移 arrayObj.splice(deletePos,deleteCount); //删除从指定位置deletePos开始的指定数量deleteCount的元素，数组形式返回所移除的元素 3、数组的截取和合并 arrayObj.slice(start, [end]); //以数组的形式返回数组的一部分，注意不包括 end 对应的元素，如果省略 end 将复制 start 之后的所有元素 arrayObj.concat([item1[, item2[, . . . [,itemN]]]]); //将多个数组（也可以是字符串，或者是数组和字符串的混合）连接为一个数组，返回连接好的新的数组 4、数组的拷贝 arrayObj.slice(0); //返回数组的拷贝数组，注意是一个新的数组，不是指向 arrayObj.concat(); //返回数组的拷贝数组，注意是一个新的数组，不是指向 5、数组元素的排序 arrayObj.reverse(); //反转元素（最前的排到最后、最后的排到最前），返回数组地址 arrayObj.sort(); //对数组元素排序，返回数组地址 6、数组元素的字符串化 arrayObj.join(separator); //返回字符串，这个字符串将数组的每一个元素值连接在一起，中间用 separator 隔开。
顺便再复习一下字符串操作方法：
concat() – 将两个或多个字符的文本组合起来，返回一个新的字符串。 indexOf() – 返回字符串中一个子串第一处出现的索引。如果没有匹配项，返回 -1 。 charAt() – 返回指定位置的字符。 lastIndexOf() – 返回字符串中一个子串最后一处出现的索引，如果没有匹配项，返回 -1 。 match() – 检查一个字符串是否匹配一个正则表达式。 substring() – 返回字符串的一个子串。传入参数是起始位置和结束位置。 replace() – 用来查找匹配一个正则表达式的字符串，然后使用新字符串代替匹配的字符串。 search() – 执行一个正则表达式匹配查找。如果查找成功，返回字符串中匹配的索引值。否则返回 -1 。 slice() – 提取字符串的一部分，并返回一个新字符串。 split() – 通过将字符串划分成子串，将一个字符串做成一个字符串数组。 length – 返回字符串的长度，所谓字符串的长度是指其包含的字符的个数。 toLowerCase() – 将整个字符串转成小写字母。 toUpperCase() – 将整个字符串转成大写字母。
另外，通过这次写的这个小代码，我总结了一下自己思考问题上的不足之处：
之前写代码时总是很乱，不会将要实现的目标模块化，导致自己总是在写过的代码上添添删删，导致这个部分变得臃肿且不清晰，然后代码就越写越乱，要改的地方也变得越来越多，参考了别人的代码后，我总结一下今后应该怎样解决比较复杂的问题：
1.仔细分析问题，将问题模块化
2.针对每一个模块写对应的函数，每个函数完成一个特定功能
3.学会多角度思考问题，切莫钻进一个牛角尖，其实换个思路解决问题说不定会更简单
以下是程序源代码：
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 canvas{background:#fff;margin-top:50px;margin-left:50px;}
8 </style>
9 </head>
10 <body>
11 <canvas id="canvas"></canvas>
12 <script src="jCanvaScript.1.5.18.js"></script>
13 <script>
14 var RADIUS=10; //定义圆的半径
15 var SPEEDX=20;
16 var SPEEDY=20;
17 var timer; //定义计时器
18 var oTime; //定义时间变量
19 var nowTimer; //获取时、分、秒
20 var lastTimer;
21 var nowTime=new Date();; //现在时间
22 var lastTime; //上次时间
23 var addBalls=[]; //添加掉落的小球
24
25 var canvas=document.getElementsByTagName(‘canvas‘)[0],
26 content=canvas.getContext(‘2d‘);
27
28 var arry = [
29 [
30 [0, 0, 1, 1, 1, 0, 0],
31 [0, 1, 1, 0, 1, 1, 0],
32 [1, 1, 0, 0, 0, 1, 1],
33 [1, 1, 0, 0, 0, 1, 1],
34 [1, 1, 0, 0, 0, 1, 1],
35 [1, 1, 0, 0, 0, 1, 1],
36 [1, 1, 0, 0, 0, 1, 1],
37 [1, 1, 0, 0, 0, 1, 1],
38 [0, 1, 1, 0, 1, 1, 0],
39 [0, 0, 1, 1, 1, 0, 0]
40 ], //0
41 [
42 [0, 0, 0, 1, 1, 0, 0],
43 [0, 1, 1, 1, 1, 0, 0],
44 [0, 0, 0, 1, 1, 0, 0],
45 [0, 0, 0, 1, 1, 0, 0],
46 [0, 0, 0, 1, 1, 0, 0],
47 [0, 0, 0, 1, 1, 0, 0],
48 [0, 0, 0, 1, 1, 0, 0],
49 [0, 0, 0, 1, 1, 0, 0],
50 [0, 0, 0, 1, 1, 0, 0],
51 [1, 1, 1, 1, 1, 1, 1]
52 ], //1
53 [
54 [0, 1, 1, 1, 1, 1, 0],
55 [1, 1, 0, 0, 0, 1, 1],
56 [0, 0, 0, 0, 0, 1, 1],
57 [0, 0, 0, 0, 1, 1, 0],
58 [0, 0, 0, 1, 1, 0, 0],
59 [0, 0, 1, 1, 0, 0, 0],
60 [0, 1, 1, 0, 0, 0, 0],
61 [1, 1, 0, 0, 0, 0, 0],
62 [1, 1, 0, 0, 0, 1, 1],
63 [1, 1, 1, 1, 1, 1, 1]
64 ], //2
65 [
66 [1, 1, 1, 1, 1, 1, 1],
67 [0, 0, 0, 0, 0, 1, 1],
68 [0, 0, 0, 0, 1, 1, 0],
69 [0, 0, 0, 1, 1, 0, 0],
70 [0, 0, 1, 1, 1, 0, 0],
71 [0, 0, 0, 0, 1, 1, 0],
72 [0, 0, 0, 0, 0, 1, 1],
73 [0, 0, 0, 0, 0, 1, 1],
74 [1, 1, 0, 0, 0, 1, 1],
75 [0, 1, 1, 1, 1, 1, 0]
76 ], //3
77 [
78 [0, 0, 0, 0, 1, 1, 0],
79 [0, 0, 0, 1, 1, 1, 0],
80 [0, 0, 1, 1, 1, 1, 0],
81 [0, 1, 1, 0, 1, 1, 0],
82 [1, 1, 0, 0, 1, 1, 0],
83 [1, 1, 1, 1, 1, 1, 1],
84 [0, 0, 0, 0, 1, 1, 0],
85 [0, 0, 0, 0, 1, 1, 0],
86 [0, 0, 0, 0, 1, 1, 0],
87 [0, 0, 0, 1, 1, 1, 1]
88 ], //4
89 [
90 [1, 1, 1, 1, 1, 1, 1],
91 [1, 1, 0, 0, 0, 0, 0],
92 [1, 1, 0, 0, 0, 0, 0],
93 [1, 1, 1, 1, 1, 1, 0],
94 [0, 0, 0, 0, 0, 1, 1],
95 [0, 0, 0, 0, 0, 1, 1],
96 [0, 0, 0, 0, 0, 1, 1],
97 [0, 0, 0, 0, 0, 1, 1],
98 [1, 1, 0, 0, 0, 1, 1],
99 [0, 1, 1, 1, 1, 1, 0]
100 ], //5
101 [
102 [0, 0, 0, 0, 1, 1, 0],
103 [0, 0, 1, 1, 0, 0, 0],
104 [0, 1, 1, 0, 0, 0, 0],
105 [1, 1, 0, 0, 0, 0, 0],
106 [1, 1, 0, 1, 1, 1, 0],
107 [1, 1, 0, 0, 0, 1, 1],
108 [1, 1, 0, 0, 0, 1, 1],
109 [1, 1, 0, 0, 0, 1, 1],
110 [1, 1, 0, 0, 0, 1, 1],
111 [0, 1, 1, 1, 1, 1, 0]
112 ], //6
113 [
114 [1, 1, 1, 1, 1, 1, 1],
115 [1, 1, 0, 0, 0, 1, 1],
116 [0, 0, 0, 0, 1, 1, 0],
117 [0, 0, 0, 0, 1, 1, 0],
118 [0, 0, 0, 1, 1, 0, 0],
119 [0, 0, 0, 1, 1, 0, 0],
120 [0, 0, 1, 1, 0, 0, 0],
121 [0, 0, 1, 1, 0, 0, 0],
122 [0, 0, 1, 1, 0, 0, 0],
123 [0, 0, 1, 1, 0, 0, 0]
124 ], //7
125 [
126 [0, 1, 1, 1, 1, 1, 0],
127 [1, 1, 0, 0, 0, 1, 1],
128 [1, 1, 0, 0, 0, 1, 1],
129 [1, 1, 0, 0, 0, 1, 1],
130 [0, 1, 1, 1, 1, 1, 0],
131 [1, 1, 0, 0, 0, 1, 1],
132 [1, 1, 0, 0, 0, 1, 1],
133 [1, 1, 0, 0, 0, 1, 1],
134 [1, 1, 0, 0, 0, 1, 1],
135 [0, 1, 1, 1, 1, 1, 0]
136 ], //8
137 [
138 [0, 1, 1, 1, 1, 1, 0],
139 [1, 1, 0, 0, 0, 1, 1],
140 [1, 1, 0, 0, 0, 1, 1],
141 [1, 1, 0, 0, 0, 1, 1],
142 [0, 1, 1, 1, 0, 1, 1],
143 [0, 0, 0, 0, 0, 1, 1],
144 [0, 0, 0, 0, 0, 1, 1],
145 [0, 0, 0, 0, 1, 1, 0],
146 [0, 0, 0, 1, 1, 0, 0],
147 [0, 1, 1, 0, 0, 0, 0]
148 ], //9
149 [
150 [0, 0, 0, 0],
151 [0, 0, 0, 0],
152 [0, 1, 1, 0],
153 [0, 1, 1, 0],
154 [0, 0, 0, 0],
155 [0, 0, 0, 0],
156 [0, 1, 1, 0],
157 [0, 1, 1, 0],
158 [0, 0, 0, 0],
159 [0, 0, 0, 0]
160 ] //:
161 ]; //0~9的显示数组
162 var color=[‘#E98F4E‘,‘#E93C59‘,‘#8948E9‘,‘#6DBFE9‘,‘#25E9AF‘,‘#6EE975‘,‘#9315E9‘,‘#E9C71C‘,‘#E98893‘]; //掉落小球的颜色
163
164
165 canvas.width=1000; //在js里设置canvas的宽和高，在style里设置会拉伸画布，即画布中的内容也拉伸
166 canvas.height=450;
167 /*主函数*/
168 (function(){
169 setTimeout(function(){
170 SPEEDX=SPEEDY=1;
171 },1000);
172 timer=setInterval(function(){
173 updateTime();
174 ballTime(); //调用ballTime函数画出时间，传递参数是updateTime函数获取到的当前时间
175 update();
176 },50);
177 })();
178
179 function updateTime(){
180 lastTime=nowTime;
181 nowTime = new Date(); //获取当前时间
182 lastTimer=[parseInt(lastTime.getHours()/10),
183 parseInt(lastTime.getHours()%10),
184 parseInt(lastTime.getMinutes()/10),
185 parseInt(lastTime.getMinutes()%10),
186 parseInt(lastTime.getSeconds()/10),
187 parseInt(lastTime.getSeconds()%10)];
188
189 nowTimer=[parseInt(nowTime.getHours()/10),
190 parseInt(nowTime.getHours()%10),
191 parseInt(nowTime.getMinutes()/10),
192 parseInt(nowTime.getMinutes()%10),
193 parseInt(nowTime.getSeconds()/10),
194 parseInt(nowTime.getSeconds()%10)];
195 }
196
197 function ballTime(){
198 jc.clear(‘canvas‘); //清除上次绘制内容
199 for(var i=0;i<6;i++){
200 var space=(i==2||i==4)?30:0; //时与分、分与秒之间的间隔
201 for (var y = 0; y < 10; y++) {
202 for (var x = 0; x < 7; x++) {
203 jc.start(‘canvas‘, true);
204 if (arry[nowTimer[i]][y][x] == 1) {
205 jc.circle(i * 170 + x * 20 + 10 + space, y * 20 + 10 + 20, RADIUS, ‘#008‘, 1).id(‘canvas‘);
206 } else {
207 jc.circle(i * 170 + x * 20 + 10.5 + space, y * 20 + 10 + 20, RADIUS, ‘#fff‘, 1).id(‘canvas‘);
208 }
209 }
210 }
211 }
212 }
213
214 function update(){
215 for(var index=0;index<nowTimer.length;index++){
216 if(lastTimer[index]!=nowTimer[index]){
217 addBall(index);
218 }
219 }
220 updateBalls();
221 }
222
223 function addBall(index){
224 var space=(index==2||index==4)?30:0; //时与分、分与秒之间的间隔
225 for (var y = 0; y < 10; y++) {
226 for (var x = 0; x < 7; x++) {
227 jc.start(‘canvas‘, true);
228 if (arry[nowTimer[index]][y][x] == 1) {
229 var balls={
230 x:index * 170 + x * 20 + 10 + space,
231 y:y * 20 + 10,
232 color:color[Math.floor(Math.random()*8+1)],
233 speedX:y-2,
234 speedY:x-2
235 };
236 addBalls.push(balls);
237 }
238 }
239 }
240 }
241
242 function updateBalls(){
243 for(var index=0;index<addBalls.length;index++){
244 jc.start(‘canvas‘,true);
245 jc.circle(addBalls[index].x-=addBalls[index].speedX,addBalls[index].y+=addBalls[index].speedY,RADIUS,addBalls[index].color,1).id(‘canvas‘);
246 SPEEDX--;
247 SPEEDY++;
248 }
249 if(addBalls.length>150){
250 addBalls.splice(0,20);
251 }
252 }
253 </script>
254 </body>
255 </html>
时间： 2024-08-03 23:49:41