38.尚硅谷_css3_时钟.wmv原创

看一下这个时钟怎么写好，首先把这个时钟打开来给你们看一看啊，其实一个特别丑的一个时钟啊，有点不好意思拿出来啊。有多丑有多丑啊，OK，还行，你这个审美就有问题了啊，我们来看一下，真正他们做的时钟其实还是蛮漂亮啊，因为我们这时候学的是技术点丑丑的完全稍微丑一点啊，其实让我写时钟我肯定不会，我肯定不会拿这种时钟出来。啊，怎么办？找呗，是不是你看啊，这种时钟，你看这个这个比我漂亮很多吧，我不是比我比我帮他时漂亮很多，是不是？原理其实差不多的，只不过绘制的元素做了而已，懂吗？样式写的多而已啊，就是些什么重复的工作，那么就讲OK，那差不多的原理我们在这写一写，是不是原理跟我们差不多，只不过我们稍微啊。我们不是low，是丑啊，所以来看一下，首先我们说看到这个东西想到几个结构。

就看到了六个结构是不是那些刻度怎么办，那些刻度怎么办啊，其实刻度每一个刻度都是一个LY。没办法，你刻度，你要你这个刻度你干嘛，你不能贴上去吧，是不是啊，OK，那我们说这个结构其实设计起来还是有点复杂是不是啊。来看一下，那其实这个结构首先外面有个包裹区是肯定的是吧？这个包裹区其实就是圆盘是吧？那我们首先定一个圆盘出来是不是，那一般最外层的维度会做多少是吧？OK，好，那先把一些暴力的事情给他干掉啊，真的是情暴力马你先干，盘底也先干是不是啊？OK，那来看一下啊，圆盘一个圆嘛，那倒也好画是不是？那里面是不是有好多刻度的，那肯定是一个ul加。

的结构几个L啊，我们先来个六个啊，其实应该有多少个60个是不是我问你，你学到现在了，你会不会傻乎乎的在这个六个。不会既是循环生成吗？是不是你不可能这边自己真的去画60多上面的样式，你也写个60条吧，啊，不要这么干啊，我们学过简了懂吗？GS可以给我们生成的啊，OK，那我再来看还是不是就差四个结构了，时针分啊时针分针秒针还有一个。圆这个什么，这个叫圆盘坐是不是OK这里，那我们是不是在这个结构里面应该还有三样东西。叫什么，一个是。时针是不是这一个就是一根针吗？你能想象吗？可以吧，好分针还有什么？秒针还有呢。

还有那个坐是不是啊啊圆柱是不是OK，那首先我们说这个圆盘，我们说圆盘是不是一个圆的OK，那给一个的开是不是给你200PX是不是一定要有波的吧？EPX的实习默认黑色。打开来看看是不是这样的，OK，那怎么办？我们说让他干嘛。首先应该是个圆吧，我。应该是50%，是不是让居中吧，行为啊和有没有变掉。还是一个会计元素吗？不是了，脱离文档流了，不要再认为它是个快元素了，行为F是不是它，它就是一个定位元素，懂吗？它是可以默认指定高宽的，懂吗？不管什么类型的元素，只要不不是特的，就有点像英兰不洛卡能不讲，只不管你什么类型的元素，只要你浮动了，就有点像兰不卡能不讲，就是一旦一个div浮动起来了，或者说定位起来了，它就叫定位元素或者叫浮动元素。

再也不要叫他快计元素了，那么你讲OK，因为快计元素好多特性他已经没有了啊，独占一行这个东西还有吗？就没了啊，OK，那这边干嘛，我们说为50%是不是？OK，嗯，Top也为50%，因为现在是已知高宽嘛，那我就可以马left为负100PXIN top为负100PX，或者说你left top为零都可以，是不是只有你那应该居中了。是不是OK ly有默认样式清掉啊，LY这个默认样式你可以放到U上去，也可以放到LY清吧，为什么？因为这个它会继承的呀啊，不管放在ul还是iOS上都是啊，没有任何的问题的，因为是个可继承属性。

能不能解啊，所以一般我们放在U2上，让它继承下来就行，OK，然后这个圆是不是就出来了，那现在是不是要解决这些刻度了，是不是刻度，而且是不一样长的，那我们首首先把它变成一样长。是不是一步步来嘛，首先是ul底下的什么精确一点，所的LYY，我们说宽度是不是稍微要给的低一点，2PX吧，是不是高度我们给个4PX吧，是吧，给个他应该要有背景颜色吧。是不是OK，来一个发光的，应该是黑颜色的背景颜色吧，是吧，是来看一下现现在他在哪走，你是不是都在站在哪，是不是，那我能不能先让他全部跑到这边了。我不管吗？现在他全全部全全跑到这边来吗？为什么他现在在这边很正常吗？

我在你左上角开始排列吗？是不是，那我是不是最好，他外表有没有定位啊。定位了那就好做了，它的因为啊一般写法上面啊，这边我就写的不是很好，这为什么呢？一般我们说play这个属性比较重要啊，放到CS的最上面来写。懂吗？啊，这是一种编码习惯啊，我们说这个属性比较重要，那一般都放到上面来写啊，行为是多少是不是，我们说这个时候LY是不是就称为这个外表的地位啊，你这ul不对劲。啊，这个外不是那个D吧，定位没有，可是我们这时候就是想想参照这个原来定位吧，那就是参照这个什么外的地位吧，是不是OK，那肯定我们说个嘛，上来让他left呗，为零，Top为零，先先看，先看看他在哪呗，是不是OK。

没有动，可是全部到到一起了是吧？没有并列在一块排了吧，本来是快元素嘛是吧，那怎么办？我们这个高度是变小了，高度给大点。什么鬼，要给这么高？差不多吧，是吧，现在全部他过来怎么办？怎么排到这边了，偏移吗？是吧，那应该偏多。本身他的宽度是二是本身这个是100是不是，这个是不一百是200，盒子不是200吗？是不是你要想他让他来中间前面应该有九，后面应该有九，九自己还有两项的宽度嘛，那是不是平移99，也就说我这个left应该是99 P是是正值嘛，是不是啊，往里搜是不是就进来了问题，现在我问你这个刻度上面现在有几个LYY在上面。

应该只有六个，六个是吧，现在六个要不上开了，怎么上旋转的是不是问你每个刻度总共这上面是不是有六六十个刻度，那每个刻度转出去转几度？三百六除以60吗？六不不六六三十六对。六度吧，每个刻度转出是不是要转个六度啊，也就说什么意思，我们说是不是得这么写，由L地下的LY问你每个LY转的度数一样吗？不一样，62，六十二十八，24吧，也就是我们那。第一个应该让他全是泡沫，是不是转几段，第一个不转是不是第二个转六度。

角是不是，是不是六度啊，是不是所你还有呢。2345是不是12这个呢，18这个呢，24是不是我们还有一个，我们总共画了六个嘛，是不是吧，是不是来看一下，就你行不行，你看咋赚到。是不是跟基点有关系啊，现在基点是不是在LYY的正中心啊，是不，那你看那我是不是这转，是不是这算成小面子了，是不是基点应该在哪，是不是按绕着他转就可以了，你看我第一根在这边绕着他转的话，第二根是不是到这边来了，第三个这边了。

是不是啊，那不理讲，OK，那是把它的基点换一换，谁的起点。所有的点吗？全是什么？二几点开始什么问你这个基点从哪边开始算起，对我们说一开始这些杠是不在这边，是不怎么让他几点下来。我们说基点是不是都是按照你自己的左上角来算的。是不是，那你首先你得下来多。下来100，是不是是不是得下来100。那边讲中间呢。中间咋整，中间是不是等于你是你这个LY的正中间啊。基点是不是问你现在你是不是改的所有的LYY的基点。

是不，那我就应该从每个元素的左上角开始算小，一开始说Y元素不都是全全部都排在这边吗？你想让他的基点去圆心，我问你啊，从这边下来。能直接到原形吗？还是差个嘛，问你这条蓝色线应该多少。100吗？圆的半径吗？是我问你是不是你要到这个圆心的话，你是不是应该从我的中间出来是吧？也就说外面是中间Y上面你要往下走100X是不是OK，那这个直间怎么样？中间嘛深嘛，外置上面往下折，往下是正子嘛，是不是OK刷一下你看是不是就出来了。是不是这样的直播，现在他们都一样长而已嘛。能不能理解，OK，可是我们说你要这个样式，你得写60条。

这个L你画60个不可能的是不是，那怎么办？脚本呢，是不是最好是window点什么之后再来去写业务逻辑是不OK走你咋写这些干嘛，一个都不要全部。生成怎么生成，我先去挖一个什么有的等于什么多点。来找到什么外底下的那个有啊，选择去写的精确点是吧，怎么办？我来一个文本叫做。七秒他就等于个空的文本，是不？我来个循环，我一个I等于零，我要造造几个60个是不是I加加怎么办？干嘛加等于什么鬼。

我能怎么办？是不是干完之怎么办，最终怎么办？点什么in呢？HTL直接等于这个LYHTL行不行？嗯。这不就是加等于吗？几个？60个。一点问题都没有。是不是个，我不是循环出来一个什么。我循环了60次啊，每次都是加等于的，不，这个不就是我一个L结构吗？是不是，然后直接拼给了一个字符串啊，最终U的点一等于这个，这个字他长什么样子，就是六六个。

啊是吧，然后直接给他的不就行了吗。这能不理解？OK，那这些样式我是不是得一样的？是不是我就留一个，我问你这些样式，我们说之前我们处理样式怎么办呢？找到这个节点点掉点干嘛吗？这是不是都处理单个样式啊，咱们现在是不是要批量处理样式啊，怎么办？拿到这个节点，我就往这个里面去加这些文本行不行。行不行，完全可以。你干嘛，我干嘛，我再去画一个。一个t still no是不是等于什么document，点什么select，我这个是不个节点。你看我就给ID，你能咋地？

我就给你个ID叫CSS，你能咋地？是不是OK，那我就去拿到这个S行不行，我在我跟你讲，我还要挖一个CSS行吗。啊，这叫CSS比较好一点嘛，是不是我也是在循环里面干嘛CSS干这等于吗？这等于什么鬼啊。把这个文本直接运过来改一改吗？是不是OK，咋的？问你这个这个一应该为什么二加一是不是应该是二加一啊，是不也就是什么这个里面我们说加，加法里面是不是来个括号，是不是我们能加一个变量的嘛，我们说哎加一，因为我这个一代从一开始算起的嘛，这个都算了的，改咋改，先写两个引号出来，再写两个加号，再写个括号，是不是这里面应该怎么咋写二乘以六。

一定要加单位。这种想法能不能理解？能不理解怎么办？最终怎么办？掉的点音呢，没记住这个里面原先是有内容的，这些内容能被覆盖掉吗？不能这边个吗？加等于本来你这个应该细胞它就是有内容的，加等于这个CSS。Text。那不讲，那不讲，再来看一下，刷一下行不行。你看嘛，我这边不是有个style吗？你看这些东西都是刚刚拼过来的。

这就是我刚刚拼成的一个字符串啊，从这个UR开始，这边就是我刚拼成的那个字串。是不是啊，你看这个不就是我拼成的字母串。是不是我给他什么？是不是这个道理啊，为什么要这么写？因为你CSS里面没有办法去做计算啊。你没有变量啊，是不是啊，你也不能做加减乘除啊，你看我这边是有公式要我们要去做计算的，我还得有什么。循环呐。能不能理解啊，就必须通过GS来处理。那么讲，而且有时候我们说，其实我们页面里面是没有表现的，一般都是一个。另一个标签是不是，所以说我们没有办法去，我们这种写法不好，因为我们干嘛要依赖标签了，我们应该自己去创建一个。是标签，是不是好好装创建标签吗？本来我是从你从你这个元素里面是获取个料标签吧，只不过我们现在写DEMO不是写项目，我们这边有料标签照联上是没有标签的。

懂啊，都是立刻进来的是表，那这边我们能去获取吗？不能应该干嘛，可创建一个掉标签是吧，最终把你这个码，你这边就可以直接干嘛。等于了，你也你也不要管自己里面里面什么。有没有了，可是要有一件事情，因为你是创建的，要不要塞啊。你要塞到这个head的标签里面去的吧，你不能只创建完一个嘛，不塞吧，那怎么办，怎么走到标签，是不是多个文夹，是有一个had点，把这个干嘛直接。

拎进来是不，现在我不管你页面是啥样的，我肯定是两个料标签，这个料标签就是我刚写的样式，这个料标签是你们用的样式，也也很有可能你原有样式是通过什么另另可进来的，那我不管。能不能理解啊？OK，那到这一块是不是所有的刻度就出来了，是不是这种编码思路能不能理解了啊，以后这种编码思路很常见，能没解？OK，那现在还差啥？还差针吧，是不是，是不是就差这几个针了，那就先把这几个针干嘛。画出来呗，是不是现在我们的刻度啊，不对，刻度是不是有长有短的，是不是我们说第一根是长的，是不是123456，第一根跟第六根也就是五分。这个CS能不能处理，是不是这个选择题我是可以处理。

为什么？因为我们选择题里面有一个，它是可以写变量，它是可以写变量的，5N加1N加一怎么办？你的高度稍微高一点。这是不是就出来了，能理解这个我CS它倒是可以处理啊，这是我唯一见过的CS的变量吧，原生CS们的变量吧，是不是要不理解，OK，那这个出来之后是不是就差针了，那再把这个针换外面有。时针红色的是不是换画？先画这个时针吧，是吧，我们说找到这个。外底下的直接的那个什么点。是不是OK，他应该长吧，时针是不是稍微还胖一点，是不外我们稍微大一点吧，给个六吧，是是太那啊就长宽1:1不对劲，四十四十片子是不是，那这个白应该为什么为黑色，是不是看一下它在哪。

稍微有点长，咱们先不管。啊，给个38。差不多是不是OK，这是时针，还有什么？纷争。还有秒针。啊，分针是不是更细一点啊，4PX是吧，它要更长一点，那就是50PX分针是个什么颜色，灰色是吧？那就给一个灰色，最终是一个红色是吧？给一个红色，那这边肯定要更细一点是吧？它要更长一点是吧？那就给70这一点看这三根针。哎，都在这边是不是定位定位来是不是就行了，还有一个圆盘呢，是不是OK，是不是还有一个圆盘，OK，圆盘是20PX20PX，因为它是一个圆波杠radio应该为50%，颜色的话，来个粉色看看它在哪。

手底都在这了，是不是就是你想画什么就应该能画什么，是不是你心有多宽这个什么？页面就有多宽是吧，是那来看一下，那把它定位定上去不就行了吗？你看现在他们所有的元素的定位是不是都应该测出这个不复的那就好，那就好写了，那所有他们都干嘛这些行为，拜拜是吧，他咋的那。应该多少？其实是100减去六除以二。是不是100减去六除以多少？100减去六除以二完蛋，100减去六除以二多少？四十七一百减去六除以二，你玩我的九九十七不好，100减去六除以二啊，先算除三算减啊，100减三啊，97不应该吗？不是100减去六除以二吗？那不应该等于十吗？你们疯了，不是这么算的，那这这个呢？

这个进来多少量，你告诉吧，我们先算量对吧，啊，这个量进来多少就吧，这个呢。99嘛，是不是这个呢。

90吗？那不你讲那是不是全部都已经进来了，是不是这三干嘛下来嘛，下来的话。对啊，也就这边我这个什么错吧，这下多你本来是30吗，七片吧，是不是应该下来了。对的对的对的，是不是OK整你这个呢，50吧，下面这个应该是30。是吧，啊，这个就是这个其实不是记住点啊是吧，这个是80看。

那是不是就过来了是吧，这个应该再往下一点是不是。应该也是100，我们这边是直接减了，直接用直接用减了，应该用减多少，85这边呢。这边呢，65。不对，真的话应该就是这应该不用讲，因为我的真应该就是在在这个上面的这个圆盘应该往下减，是不是这个针应该不用减，是不是这个针应该就是就是应该减去的高度，是不是有这个圆盘不圆盘应该是90圆，我是应该要稍微的下来一点的是吧？是其实这几根针都应该在这边。

是不是这个圆圆盘在它的下面吗？等等，圆盘底下是没有什么，真的是不是这样的？OK，那就尝尝它赚起来了呗，是吧，咋转啊。转的话肯定是什么木马是吧，我们第一个方形叫什么，我们说代会是不转，转的话我觉得这个函数行不行，UC放心吧，就叫木是不，而且是不是一秒钟转一转的，那怎么办？C特嘛，调一下这个木偶函数嘛。是不一秒钟来掉一次嘛，是不是也就现在是不是只把这个木函数咋写就行了是吧，这个写法的话，是不是应该先到都17啊牛对上是吧，你对了之后呢。

一个H应该等于什么date.get o是不是轴点分针呢？分分针分针是是不是，你要是再做错，你就给我出个多大S呢？三个是吧，OK，走你。好来看一下现在是不是这些干嘛，这些参数都已经拿到了，让他赚出就可以了，是不是，那我是把这些元素全部给他获取到，一般写时把元素获取全部写到最最上面去，那不讲万一什么好吗？弄的等于什么多点么是吧，找到。后底下的点好是不是OK，走，你还有谁啊，Mi s e是。

ZNY。拿到了吧，让他们转起来是不就行了，想想行不行，是不是他点still.transform应该等于什么肉的是不问你他是每秒钟赚多少，多时在钟赚多多。是多少完蛋了？好算是啊，那我们现在秒针秒针没多转六度是不是整体，那干嘛六。

这应该咋写，应该是个变量，那写两个冒号，加号，写个括号，这一般是去前变一种形式，好吧，他是不是每秒中转。六度，想想对吗？六度吗六。S吧，这边是不是得有度啊？2X减一。那为什么电压看一下。几点没变？他们的基点是不是统一的？变表是变成自己的中心？跟自己的底。是不是我说让所有的所有的针都按照这个点算行不行。可以啊，你按照这个点段跟按照这个点段不是一样的吗？我们照理来讲的话，应该按照什么这个点段是不是啊，你按照这两个点是不是都一样。

是不是按照他的什么中心点来做，是不是那应该咋，反正肯定是什么，他们的圈子放什么，也就是说。他们的全方关节都应该是要变的，是不是OK，等一等，稍微有点卡下，怎么变？首先是它的中心等下去多少。就是我感觉按照这个点赞，这个点赞按照这个点不一样吗。我怎么觉得是一样的，我说的就是东西藏在里，不是我问你这根现在有没有藏在里面，这个藏在里面了，来看一下这个有没里面，我让这个圆让圆，我就让圆透明，咋明点一下。

Rgba是不是OK？零。啊，想想我们刚刚是。啊对，我们一开始这根针是多。真的长度，这根针的长度是不是加上去是正好满100的是不？所以说他是不是在里面了，这根圆是不是这样的是不是，所以说我们这个波层还是这个点吧，是不是圆是盖在上面的是不是，那也就说这样写也是没就应该这样写，这个就是正好是它的圆心是不是啊来看一下，那现在是不是我们说来看一下，那是不是他们都应该是这样。

看一下。好玩是不都都这样的，直播这边在转的时候应该怎么办，是不是这个，而且还有这个。嗯。米，是不是也就是说这边我这个秒针不是按照我这个秒来算的吗？那分针是不是按照我的分针和来算，那是不是也是转六度啊。每分钟都是这这是分钟的时间吗？是吧，这个是小时的时间吗？小时应该赚多少。以吗？是不是多吧？是吧，可是这应该不是很准的，可是差不多是吧，来看看点。差不多是不是其实是有问题的，我们说干嘛，我们算这个小小时的时候，应该把分跟苗言算进来。

是吧，那也就是说这边应该要加上分组吧。60再加上秒除以多少，哎，不对，那我这边再算分针的时候，再加上秒除以多少60，那是不是就对了。整个字是不是就对了，你我我这边不是已经加了是不。能不能讲这个时候是不是应该才是最最精确的是吧，我们来看一下现在应该是几点。哎，坏了。哦，不对，你看我这样写行吗？你没有分呢，是不是这个顺序是不是得调得调上，应该先算秒，再算分，再算小时啊是不是啊，所以你看一下。就可你看九点吗，六点七点八点九点九点差不多是吧，这个能这个能理解吗？OK，然后我们想想是不是大概我每次刷的时候都得。

切一次啊，那其实我们上来应该按这个木线干嘛，不管怎么样，定时器还没开的时候，你干嘛执行一次，把这个位置先干嘛不分，你看现在我不管我怎么算，你看是不是都不会进行这个位置一个切换了，那这个分这个钟表咱们是不是也做完了，是不是啊，钟表里面其实用的术不难，懂不懂，那就是一些一些什么思路问题，懂吗？这用的其实最最核心的就是我们用上这个全摸摸。二这是我们在做扇形导航时候没有用到的，懂吗？其他的东西就是说一个是编写CSS跟操作，就是做用JS去做动画的一种思路。第切等等以以及如何去批量处理，CS上的及如何批量处理没要掌握这些思路懂不懂啊，其实技术上面的话没有太大难度等等把这还是把这个思路稍微的。

转变转变，能不理解OK？