时钟特效程序
Posted ljuyi
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了时钟特效程序相关的知识,希望对你有一定的参考价值。
做了个特效小程序,在过程中发现自己在学过的知识中有掌握的不够牢固的,今天在这里复习一下:
一、三目运算符中能否使用{}吗?
不可以,三目运算符的语法:条件 ? 结果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=8; //定义圆的半径 15 var timer; //定义计时器 16 var oTime; //定义时间变量 17 var nowTimer; //获取现在时间的时、分、秒 18 var lastTimer; //获取上次时间的时、分、秒 19 var nowTime=new Date();; //现在时间 20 var lastTime; //上次时间 21 var addBalls=[]; //添加掉落的小球 22 23 var canvas=document.getElementsByTagName(\'canvas\')[0], 24 content=canvas.getContext(\'2d\'); 25 26 var arry = [ 27 [ 28 [0, 0, 1, 1, 1, 0, 0], 29 [0, 1, 1, 0, 1, 1, 0], 30 [1, 1, 0, 0, 0, 1, 1], 31 [1, 1, 0, 0, 0, 1, 1], 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 [0, 1, 1, 0, 1, 1, 0], 37 [0, 0, 1, 1, 1, 0, 0] 38 ], //0 39 [ 40 [0, 0, 0, 1, 1, 0, 0], 41 [0, 1, 1, 1, 1, 0, 0], 42 [0, 0, 0, 1, 1, 0, 0], 43 [0, 0, 0, 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 [1, 1, 1, 1, 1, 1, 1] 50 ], //1 51 [ 52 [0, 1, 1, 1, 1, 1, 0], 53 [1, 1, 0, 0, 0, 1, 1], 54 [0, 0, 0, 0, 0, 1, 1], 55 [0, 0, 0, 0, 1, JS实现时钟特效