JS实现页面炫酷的时钟特效示例

目录
  • 一.前言
  • 二.想法设计/实现过程
  • 三.基本样式
  • 四.时间函数控制器
  • 五,时,分,秒占位
  • 六.时间动态填充

一.前言

今天看到某网站的时间特别的丑陋,所以就诞生了写一个看时间的炫酷的时钟前端页面。 特点就是炫酷,特效好,个人以心情愉快的感觉。 对于时间的变化,我打算使用翻页的特效来完成,色系的话采用黑色以主题,给人一种神秘的感觉。

而且要获取到本地的时间的数据来实时更新它的变化。

二.想法设计/实现过程

秉持着尽可能的美观炫酷,与用户的交互性好的原则,我初步的想法是,采用黑色系来增加可观性,写三个黑色框框分别代表小时,分钟,秒,然后获取到本地计算机或者服务器的时间数据,进行动态变化,而且对于数字的变化,采用翻页形式的改变对应的数字,从而增加可观性。 这就是稳定初步想法:

三.基本样式

首先需要定义一下最外面的框子(clock)和外面最大的背景的颜色(大小,形式,透明度等等): 基本的css如下:

.clock {
      display: grid;
      padding: 0 12px;
      grid-template-columns: 1fr 1fr 1fr;
      grid-column-gap: 12px;
      min-width: 200px;
      height: var(--clockheight);
      border-radius: var(--radius);
      background-image: linear-gradient(
        rgb(14, 14, 15) 0%,
        rgb(26, 25, 28) 20%,
        rgb(44, 44, 52) 50%,
        rgb(20, 20, 27) 100%
      );
      box-shadow: inset 0 -3px 6px 3px rgba(0, 0, 0, 0.2),
        inset 0 4px 8px 3px rgba(0, 0, 0, 0.4),
        0 2px 3px 1px rgba(255, 255, 255, 0.3), 0 -2px 4px 4px rgba(56, 56, 61, 0.5);
    }

最外面的盒子模型:

 <div class="clock">
 </div>

目前效果如下:

四.时间函数控制器

因为是炫酷的时钟特效,外面首先要考虑的是对于时间的计算以及获取的问题:思考一个问题,我们的目前时间可以很容易的从系统时间获取,但是,翻页与变化是需要我们额外的去控制的。所以需要我们额外的去写的。

var date = new Date();
  var seconds = date.getSeconds().toString();
  if (seconds.length == 1) {
    seconds = "0" + seconds;
  }
  var minutes = date.getMinutes().toString();
  if (minutes.length == 1) {
    minutes = "0" + minutes;
  }
  var hour = date.getHours();
  if (hour > 12) {
    hour = hour - 12;
  }
  if (hour == 0) {
    hour = 12;
  }
  hour = hour.toString();
  if (hour.length == 1) {
    hour = "0" + hour;
  }
  if ($(myhour[0]).text() !== hour) {
    flipNumber($(myhour[0]).closest(".flipper"), hour);
  }
  if ($(myminute[0]).text() !== minutes) {
    flipNumber($(myminute[0]).closest(".flipper"), minutes);
  }
  if ($(mysecond[0]).text() !== seconds) {
    flipNumber($(mysecond[0]).closest(".flipper"), seconds);
  }

为了适应变化,异步变化的特性,我们需要额外写一个延迟函数,来控制,不让他们同时出现,增加可观性:

 setTimeout(function () {
    setTime();
  }, 500);

当然,不要忘记第一步的引入工作,我们目前使用俩个前端框架,分别是jquery和bootstrap。这样可以加快我们开发的速度。

<script type="text/javascript" src="https://repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="https://repo.bfw.wiki/bfwrepo/js/bootstrap.4.3.1.min.js"></script>

五,时,分,秒占位

我们之前已经写了背景的样式与最外面的框子的样式,现在我们的时,分,秒都还没有写,所以,我们把他分为三部分:

一个类似这样的样式效果,html代码样式盒子如下:

<div class="flipper">
<div class="gear"></div>
<div class="gear"></div>
<div class="top">
    <div class="text">00</div>
</div>
<div class="bottom">
    <div class="text">00</div>
</div>
</div>

这样重复3次,分别对应着时,分,秒,给他们占位。

六.时间动态填充

现在,我们的位置已经写好样式了,我们需要使用JavaScript来动态的填充更换我们的当时的时间数字:

function flipNumber(el, newnumber) {
  var thistop = el.find(".top").clone();
  var thisbottom = el.find(".bottom").clone();
  thistop.addClass("new");
  thisbottom.addClass("new");
  thisbottom.find(".text").text(newnumber);
  el.find(".top").after(thistop);
  el.find(".top.new").append(thisbottom);
  el.addClass("flipping");
  el.find(".top:not(.new)").find(".text").text(newnumber);
  setTimeout(function () {
    el.find(".bottom:not(.new)").find(".text").text(newnumber);
  }, 500);
}

最后的效果图如下:

以上就是JS实现页面炫酷的时钟特效示例的详细内容,更多关于JS页面时钟的资料请关注我们其它相关文章!

(0)

相关推荐

  • js实现的页面矩阵图形变换特效

    本文实例讲述了js实现的页面矩阵图形变换特效.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>matrix</title> <style type="

  • 纯JS焦点图特效实例(可一个页面多用)

    实例如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Co

  • JavaScript实现页面电子时钟

    本文实例为大家分享了JavaScript实现页面电子时钟的具体代码,供大家参考,具体内容如下 题目:页面上有一个电子时钟,显示当前的年月日,时分秒,要求自动变化,双位显示,例如:九点九分九秒,显示为09:09:09 代码: <!DOCTYPE html> <html lang="en">   <head>     <meta charset="UTF-8">     <meta http-equiv="

  • JS实现页面鼠标点击出现图片特效

    本文实例为大家分享了js实现页面鼠标点击出现图片,供大家参考,具体内容如下 需求: 在页面可视区鼠标点击时,鼠标位置出现图片 技术: 监听器,鼠标坐标获取 效果图 源码分享: 图片是动态添加进页面的,所以没有HTML部分. JS let div = document.createElement("div"); div.id = "mouseImg"; for (let i =0 ; i <3 ;i++){ let img = document.createEl

  • 酷! 不同风格页面布局幻灯片特效js实现

    这是一款效果非常炫酷的不同风格页面布局幻灯片特效.该特效中,通过前后导航按钮来切换幻灯片,每个幻灯片中的图片均为不同的布局效果. 该幻灯片特效使用anime.js来制作幻灯片的动画特效,并使用很多CSS3属性,需要最新版本的现代浏览器才能看到效果.对于IE浏览器,前面几种效果可以在IE11及以上的浏览器看到效果,最后一种效果由于IE浏览器不支持SVG clip-path属性,所以是看不到效果的. 使用方法  HTML结构  该幻灯片的基本HTML结构如下:每一个幻灯片都有各自的布局class类,

  • javascript实现页面的实时时钟显示示例

    时钟实现 实现这个时钟时间需要解决以下三个问题: 获得当前时间,并格式化 如何可以在页面中显示时间 让时间动起来 1.获得当前时间,并格式化 要获得当前时间,可以使用JavaSctipt的Date对象,默认构造函数会返回当前时间.存储日期为自 1970 年 1 月 1 日 00:00:00以来的毫秒数. setXxx 这些方法用于设置时间和日期值 getXxx 这些方法用于获取时间和日期值 实现代码如下: function getnow(){ //1.获得当前时间,格式化时间 var now=n

  • JS实现页面炫酷的时钟特效示例

    目录 一.前言 二.想法设计/实现过程 三.基本样式 四.时间函数控制器 五,时,分,秒占位 六.时间动态填充 一.前言 今天看到某网站的时间特别的丑陋,所以就诞生了写一个看时间的炫酷的时钟前端页面. 特点就是炫酷,特效好,个人以心情愉快的感觉. 对于时间的变化,我打算使用翻页的特效来完成,色系的话采用黑色以主题,给人一种神秘的感觉. 而且要获取到本地的时间的数据来实时更新它的变化. 二.想法设计/实现过程 秉持着尽可能的美观炫酷,与用户的交互性好的原则,我初步的想法是,采用黑色系来增加可观性,

  • 原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面

    今天小编把之前保存的js特效视频看了一遍,跟着视频敲了敲嘻嘻,用原生js实现一个炫酷的登录页面.怎么个炫酷法呢,看看下面的图片大家就知道啦. 效果图: 不过在看代码之前呢,大家先和小颖看看css中的opacity.transition.box-shadow这三个属性. 1.opacity CSS3 opacity 属性 实例 设置一个div元素的透明度级别: div { opacity:0.5; } 在此页底部有更多的例子. 浏览器支持 Internet ExplorerFirefoxOpera

  • 五个基于JS实现的炫酷登录页面

    目录 1.炫酷星空登录 2.动态云层登录 3.深海灯光水母登录 4.炫酷蛛网登录 5.彩色气泡登录 1.炫酷星空登录 实现代码 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>运营系统登录页</title> <link href=

  • js+css3实现炫酷时钟

    本文实例为大家分享了js+css3实现炫酷时钟的具体代码,供大家参考,具体内容如下 html <body> <ul id='box'></ul> </body> css <style> *{ margin: 0; padding: 0; } body{ background-color: #aaa; } ul{ width: 400px; height: 400px; border: 5px solid skyblue; margin: 100p

  • JS+CSS3制作炫酷的弹窗效果

    昨天在家看电视时,退出的时候发现了一个弹窗效果,整个背景模糊,觉得这样的效果好炫,要比纯色加透明度高大上好多,连续试了几个界面,最终确定效果由css实现的,于是今天一大早来到公司便赶紧搜索了一下,虽然兼容性奇差,但是一个css属性就可以搞定.瞬间感觉自己知道的真是太少了~~ 首先回忆一下弹窗的实现,一般我们分为两层,弹出窗口层(popus)和遮罩层(mask),通常情况下我习惯就这两元素全部设成fixed定位,具体和absolute区别一试便知.对于mask层自不用多少,我们如下给他设置属性,让

  • 教你用几十行js实现很炫的canvas交互特效

    目录 1.画圆 2.鼠标移动的圆 3.鼠标拖动的粒子 4.颜色渐变的粒子 5.连接的粒子 总结 废话不多说,先上效果图! 本篇文章的示例代码都是抄的一个叫Franks的老外在yutube上的一个教学视频,他还出了很多关于canvas的视频,十分值得学习,而我对canvas也不太熟悉,跟着大神一起敲代码,做个学习笔记,还要说一下,本文示例的页面结构很简单(html只包含一个canvas),后面代码部分就不贴了,毕竟js才是主角. 1.画圆 首先从画一个静态的圆开始吧,只需要了解很少的API即可,M

  • python绘制超炫酷动态Julia集示例

    目录 前言 Mandelbrot集 无限缩放 Julia集 前言 此Julia非彼Julia,指的是对于某复数 c c c,使得迭代式 f ( z ) = z 2 + c f(z)=z^2+c f(z)=z2+c收敛的复数 z z z的集合.例如,当 c = 0 c=0 c=0时,那么其收敛区间为 z 2 < 1 z^2<1 z2<1的单位圆,对应的 c c c的Julia集便是 cos ⁡ θ + i sin ⁡ θ \cos\theta+i\sin\theta cosθ+isinθ.

  • JS+CSS实现炫酷光感效果

    JS+CSS带你实现炫酷光感效果,供大家参考,具体内容如下 效果一:(螺旋式沉浸视觉感受) 效果二:(旋涡式远观视觉感受) 实现代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>光感效果</title> </head> <style> html,body{ height: 100%; overflow: hidde

  • js实现简单秒表走动的时钟特效

    本文实例介绍了javascript实现简单的秒表走动的时钟特效,分享给大家供大家参考,具体如下: 运行效果图如下: 实现代码: <html> <head> <script type="text/javascript"> function startTime() { var today=new Date() var h=today.getHours() var m=today.getMinutes() var s=today.getSeconds()

  • 基于jquery和svg实现超炫酷的动画特效

    今天给大家分享一款基于jquery和svg超炫的网页动画.这款动画效果非常炫.下面还有重播.慢速.和反向动画按钮.效果非常漂亮.一起看下效果图: 实现的代码. html代码: 复制代码 代码如下: <div id="intro">         <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"          

随机推荐