js写可乐罐与钟表总结

傻傻呼呼，折折腾腾得写了两天的可乐罐和钟表，小小地总结一下，鼓励一下自己。

其实这两个东西主要内容还都是通过css完成的，在这两个程序里js的作用无非是缩减一下代码的长度，还有就是通过函数的方法添加css完成不了的样式，当然还有展示一下自己的理科思维，谁知道真的跑起来谁快谁满呢。。。

1、可乐罐，主要思路是通过 background-attachment :fixed使得背景相对于显示窗口不动，而背景对应的div的是相对于body不动的，于是这样子，背景和其所在的div便产生了相对移动。在显示的框内，当我们向右拖动滑条，我们感觉到我们从这张背景图片的右边部分，一直看到了这张图片的左边（显示的永远只有整张图片的一部分而已。于是拖动的效果便产生了。在通过将div细分，分别用 background-position:设置没一小块的背景，形成可乐罐的立体效果，从而变成了可以滚动的立体的可乐罐。

同时，这个里面第一次碰到了js设置css样式，一个值很容易，什么"red" "center"之类的，只要保证value部分的值是字符串即可。而对于 background-position:这样的样式，值不只一个，而在js中同样要把他们当做一个字符串来看。对于js来说，css样式的值永远都只是一个字符串，而js只负责在这个css样式上面绑上了这样一个字符串（格式要注意，如另一条笔记写的那样只能有一个""），对于css来说，只要这个字符串符合它自身的格式，他就可以解析，而js完全不知道这样的结构，他只是进行了这个行为而已。（部分需参见"js给css赋值"笔记）

---

2、钟表，不太能理解原作者的代码中的js部分。以后再返回来看吧。我的思路是，先让各个指针先动起来，按照他们应该动的速度。在css中通过定义一个@-webkit-keyframes rotate 的样式，通过-webkit-animation: rotate 36000000s linear infinite; css3的动画效果 引用，让时间和rotate的角度对应好，这样子指针就能够按照它应该有的速度旋转了，默认旋转是按照中心旋转的，如有需要可以设置。然后把时间和角度都设置久一点，不然转转一半就停住了就不好了。。。接下来，让钟表从当前时间开始动。通过var hour=date.getHours(); var second = date.getSeconds(); var minute = date.getMinutes(); 得到当前的时间，接下来只要按照当前时间旋转img外面的div即可（因为之前的动画师对应于img的）于是外面又碰到了js设置css的情况了。可是这次不能用 document.getElementById("part_"+i).style.backgroundPosition= backgroundPosition(i)+"px "+"30px"; 这种形式了，因为这次是value是rotate('+startminute()+'deg) 由于 rotate内部以及为了结合数值与单位以及是字符串了，要使得整个value变成一个字符串好像不行。参考网上教程，设置css样式时可以采用如下格式

Element.style.cssText += ’width:100px;height:100px;top:100px;left:100px;’将新的样式作为一个字符串整体加到某个id的元素上，而不管是什么样的属性与功能于是我们也可以把rotate按照document.getElementById("second").style.cssText+=' -webkit-transform:rotate('+startsecond()+'deg);'; 的格式加上去，这里的value是'-webkit-transform:rotate('+startsecond()+'deg);'这个字符串，而字符串内部的内容被整体的加到所对应的元素上，因此，在css来看是-webkit-transform:rotate('+startsecond()+'deg); 这么个东西多了出来（注意这个里面要用的是：不要用=不然css不认识），很好，一个-webkit-transform 操作，操作的内容是rotate，rotate的值是一整个字符串，第一条的时候说过，这样子作为一个整体的字符串的值，css是可以辨别的，同时也符合css格式，ok，样式可以改变了。。。

---

总结起来，结构和思路都没有太大的问题，相反的是一些格式不清楚，不知道添加css的格式是什么导致自己浪费了很多时间。。。还是得多积累才行啊。。。