首页 > 代码库 > 时钟特效程序

时钟特效程序

做了个特效小程序,在过程中发现自己在学过的知识中有掌握的不够牢固的,今天在这里复习一下:

一、三目运算符中能否使用{}吗?

  不可以,三目运算符的语法:条件 ? 结果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="http://www.mamicode.com/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="http://www.mamicode.com/点击" 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>

 

时钟特效程序