技术者丨你对JavaScript知多少（第二期）

vlambda
2020-06-18

技术者丨你对JavaScript知多少（第二期）

今天小信带大家来认识一下jQuery。简单地说，jQuery是JavaScript的一个函数库，可以简化js的开发。它还封装了JavaScript常用的功能代码，优化了HTML文档操作、事件处理、动画设计。

那么如何使用它呢，我们可以去jQuery.com去下载文件，当然，如果这个网站进的比较慢，或者下载的很慢的话，那么也可以直接去百度上搜索JQuery即可。

技术者丨你对JavaScript知多少（第二期）

除了引入本地下载好的JQuery文件外，那么也可以通过 CDN（内容分发网络）引用它。

百度 CDN:

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

新浪CDN：

<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>

万事具备，只欠东风。

下面带大家来完成一个jQuery实现的时钟

比上一期的高级的多

大概长这个样子

脑子里浮现出想法了吗

今天我们用jQuery来实现

首先写好html 代码，然后用css进行美化。css代码在文末直接贴出来了。接下来切入正题。

技术者丨你对JavaScript知多少（第二期）

创建两个变量，一个数组中的月和日的名称。和创建一个对象newDate()。

技术者丨你对JavaScript知多少（第二期）

从日期对象提取刚才获得到的日期。

“$”这个符号定义jQuery，("#Date")这里则是查找id为Date的元素。而后面的.html()这一串，则是输入的年，月，日。

第一个箭头是输入秒，而红框框里的则是让时间保持两位数，添加前导零秒值。比如现在是15:37:33，如果是15:37:01的话，不做处理就会输出15:37:1这样，而为了保持美观和符合正常的输出格式，在小于10的时候，在前面多加一个0。

seconds < 10 ? "0" : ""

这里是我们在c语言里学过的三元运算符。即小于10输出0，反之输出空。这里用了三个setInterval()方法，来输出时间，分钟和秒。

小贴士

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。

以上是本期技术分享的所有内容

如果觉得有兴趣可以自行学习相关内容

      body {        background-color: #202020;        font: bold 12px Arial;        margin: 0;        margin-top: 200px;        padding: 0;        min-width: 960px;        color: #bbbbbb;      }      a {        text-decoration: none;        color: #00c6ff;      }      .container {        width: 960px;        margin: 0 auto;        overflow: hidden;      }      .clock {        width: 800px;        margin: 0 auto;        padding: 30px;        border: 1px solid coral;        color: #fff;      }      #Date {        font-family: "BebasNeueRegular", Arial;        font-size: 36px;        text-align: center;      }      ul {        width: 800px;        margin: 0 auto;        padding: 0px;        list-style: none;        text-align: center;      }      ul li {        display: inline;        font-size: 10em;        text-align: center;        font-family: "BebasNeueRegular", Arial;      }

▼

往期精彩回顾

▼

更多精彩内容请点击

汽车与信息工程学院团委宣传部

责编 | 胡昌伟

审核 | 朱慧慧章静豪肖正益

vlambda博客
学习文章列表