3D立方盒祝福应用实现之javascript篇

         在昨天,我做了一个简单的应用,就是3D的立方盒祝福的简单的应用,这个应用很简单,其实就是在一个表单里面输入6个汉字,然后再在 立方盒子的六个面上显示,完全可以看到3D盒子的各个面的动态的切换,还是很好看的!~    

         今天,我们就讲解一下,这个实现的过程,因为是php篇,我们就只是讲解如何实现立方体的六个面的不同的切换!~    

          1.首先,我们要知道setInterval函数    

          这个函数的使用很简单,但是很常用,那就是一个简单的定时器吧,就是在一定的时间间隔里面不停的做一件事,这个我们很常见,   比如,在一起网页上看到一个不断变化的时钟,或者是不断切换的图片,那就是使用这个定时器来实现的。代码只有一句:

            var int=self.setInterval(“clock()”,1000);  

          这句话的意思就是说,在间隔一秒之后执行clock()函数。  

        2.不断的轮流点击按钮

          因为我们知道,为了能看到不同的面,我们需要js的控制,就需要和用户进行交互,所以在界面就有一些按钮,点击就可以切换到不同的面,我们要做的就是在clock()函数 里面不停的轮流点击这些函数,为了更好的控制,我们给这个按钮加上了不同的id,都是show+1到6的数字。代码      






     然后在clock函数里面我们就是可以使用字符串组装来获得id,然后拿到对象,获得他的点击事件。代码:

function clock(){
number=number+1;
var myId="show";
var button=document.getElementById(myId+number);
button.click();
if(number==6) number=0;
}

所以,这个应用的javascript部分的实现是比较的简单,但是还是涉及到一些比较使用的小知识,定时器的使用,字符串组装法等等。

演示地址:http://www.cangzhang.com/demo/liugezi/

共有 12 条评论

Top