jquery 背景特效实现_百余行代码实现炫酷时钟

电脑右下角的时间是不是早就看腻了，字小而且样式单调，今天，就用百余行HTML + CSS + JavaScript代码实现一个网页版的炫酷时钟，当然也可以使用Electron封装前端代码，实现桌面版的炫酷时钟应用程序，话不多说，直接上效果图：

雏形构造

在HTML标签中，我们可以把div比喻成一个盒子，在div标签中还可以嵌套div标签，这就好比大盒子中还装着一个或若干个小的盒子。每一个盒子都有一个边框(border)，盒子内容与边框之间的距离称之为内边距(padding)，两个盒子之间的距离称之为外边距(margin)。

在这个小demo中，使用一个大的div盒子包裹3个小的div盒子，分别用来显示时分秒，直接上代码：

"time"><div><span id="hour">00span><span>Hoursspan>div>

<span id="minute">00span><span>Minutesspan>div>

<span id="second">00span><span>Secondsspan>div>
</div>

效果如下：

注：div标签默认没有边框，宽度和高度是根据div标签中的文字来决定的，为了更见明显的展示div盒子模型，在这个小demo中添加了边框和宽高的样式，就有了上图的效果。添加的样式代码如下：

#clock{ 
  width: 600px; 
  height: 250px; 
  border: solid 1px black; 
  margin: 0 auto; 
  margin-top: 50px; 
} 
#time div{ 
  width: 150px; 
  height: 230px; 
  border: solid 1px red; 
  margin: 5px 0 5px 30px; 
  float: left; 
}

页面美化

CSS可谓是女生的化妆品，能把单一枯燥的页面“化妆”的具有吸引力。首先给整个网页设置一个具有科技感的蓝黑色背景,然后将整个HTML元素水平垂直居中显示：

body{
  background: #060a1f;
}
#clock{
  min-height: 30vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

这里使用了flex的弹性布局方式，搭配justify-content和align-items属性，属性值设为center，即可实现body中所有子元素水平垂直居中显示。

给3个小的div盒子设置样式，盒子中的字体样式、大小、背景颜色代码如下：

#clock #time div{
  position: relative;
  margin: 0 5px;
  -webkit-box-reflect:below 1px linear-gradient(transparent,#0004);
}
#clock #time div span{
  position: relative;
  display: block;
  width: 250px;
  height: 200px;
  background: #2196f3;
  color: #fff;
  font-weight: 300;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 8em;
  z-index: 10;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.2);
}
#clock #time div span:nth-child(2){
  height: 30px;
  font-size: 1.2em;
  letter-spacing: 0.2em;
  font-weight: 500;
  z-index: 9;
  box-shadow: none;
  background: #127fd6;
  text-transform: uppercase;
}
#clock #time div:last-child span{
  background: #ff006a;
}
#clock #time div:last-child span:nth-child(2){
  background: #ec0062;
}

其中box-reflect是CSS3中的倒影特效属性，-webkit-box-reflect是为了解决浏览器兼容问题，属性值below 1px linear-gradient(transparent,#0004)是指倒影在对象的下边1px处，使用线性渐变创建遮罩图像。 

获取时间

使用js中的new Date()方法可以获取本地时间的时间戳，使用getHours()、getMinutes()、getSeconds()可以分别获取本地当前时间的时、分、秒。代码如下： 

let h = new Date().getHours();
let m = new Date().getMinutes();
let s = new Date().getSeconds();

在获得时分秒数据之后，如果时分秒的数值是个位数，这会影响时钟的显示效果，因此需要进行判断，如果时分秒的数值是个位数，则需要在其前加0，代码和效果图如下： 

if(h < 10){
  h = '0' + h;
}
if(m < 10){
  m = '0' + m;
}
if (s < 10){
  s = '0' + s;
}

换个背景

我们的背景设置了一个看起来比较科幻的颜色，色值为#060a1f，但是有些人不喜欢找这个颜色，或者这个颜色看久了觉得无聊没意思，所以我们可以通过颜色选择器来实现背景颜色的更换。颜色选择器我们可以自己通过JavaScript来开发，也可以使用第三方库，在这里，我们使用layui中的colorpicker来实现这个功能。

layui是一个开源的模块化前端UI框架，它提供了丰富的内置模块，其中就包括我们要使用的colorpicker模块，该模块是一款颜色选择器，它的基本用法如下：

<div id="test">div>
<script src="../src/layui.js">script>
<script>
  layui.use('colorpicker',function(){
    var colorpicker = layui.colorpicker;
    // 渲染
    colorpicker.render({
      elem: 'test', //绑定元素
      // 颜色被改变后的回调，color为选择的颜色值
      change: function(color){
        console.log(color) 
      }, 
      // 颜色选择后的回调，color为当前选择的色值
      done: function(color){
        console.log(color) 
      } 
  }); 
})
script>

注：layui具体使用请参照layui官方文档。 

将我们选择的颜色值赋给body身上的background属性，就可以实现背景颜色的更换，代码如下：

//调色板
layui.use('colorpicker', function(){
  var colorpicker = layui.colorpicker;
  var $ = layui.$;
  //渲染
  colorpicker.render({
     elem: '#color', //绑定元素
     done: function(color){
        $("body").css("background",color);
        }
  });
  $("#color > div").css("opacity","0");
});

注：$是jQuery中的选择器，相当于原生js中的document.querySelector()，比如jQuery中$("#id")等同于js中的document.querySelector("#id")或document.getElementById("id")。 

改变背景颜色的效果如下：

在改变颜色之后，如果刷新网页，背景颜色又会回到默认值，如果将我们选择之后的颜色值存放在localstorage中，不论如何刷新网页，背景颜色也不会改变，除非清除浏览器的缓存或者手动删除。 

localstorage主要是将数据存储在本地，它是HTML5中的一个新特性，在layui中，localstorage已经被封装好，我们直接拿来使用即可，使用方法如下：

//【增】：向 test 表插入一个 nickname 字段，如果该表不存在，则自动建立。
layui.data('test', {
  key: 'nickname',
  value: '贤心'
});
//【查】：向 test 表读取全部的数据
var localTest = layui.data('test');
console.log(localTest.nickname); //获得“贤心”

在炫酷时钟的案例中，将颜色值存在localstorage中的代码如下：

layui.data('bgcolor', {
  key: 'color',
  value: color
});
var data = layui.data('bgcolor');
//判断本地localstorage是否为空，如果不为空则将颜色值赋给body的background属性
if(data['color'] != null){
  body.style.background = data['color'];
}

做到此处，你可能会认为这个案例可以完成了，但是还有个小问题需要解决，那就是如果背景颜色和页面中部分字体颜色一致，就会导致这些字完全看不见，影响炫酷时钟的展示效果，要想解决这个问题，就需要用到16进制的减法，对字体颜色进行取反，这样就会避免背景颜色和字体颜色一致的问题了。具体代码如下：

var bgColor = $(".bgColor");
var timeTitle = $(".timeTitle");
function fontColor(oldColor){
  var OldColorValue = "0x"+oldColor.replace(/#/g,"");
  var newColor = "#"+(0xFFFFFF-OldColorValue).toString(16);
  bgColor.css("color",newColor);
  timeTitle.css("color",newColor);
}

注：replace()方法是删除或替换字符串中的相应内容，在上面的代码中，就是将16进制颜色值中的#删除掉，0xFFFFFF-OldColorValue就是16进制的减法，得到的值是十进制，需要使用toString(16)方法转换成16进制，其中toString()方法是数字的字符串表示。

注：上图中第一幅图是字体颜色取反前的效果，第二幅图是字体颜色取反后的效果。 

做到这里，我们的炫酷时钟就算基本完成了，你是不是也想跃跃一试，最后附上代码链接【https://github.com/WingedCat/Clock/tree/master】，供你参考，当然，你也可以再此基础上添加更加炫酷的功能。

做个总结

通过自己手写一个小demo来实现炫酷时钟的效果，对于刚开始学习前端的小白来说是很自豪的一件事，在这个小案例中，可以了解flex弹性布局实现一个元素水平垂直居中的方便，还可以了解和使用JavaScript中的new Date()方法获取本地的系统时间，将简单CSS代码与之组合，实现一个炫酷效果。当然如果不喜欢默认的背景颜色，还可以使用layui中的colorpicker模块来实现一个颜色选择器，将页面的背景颜色换成自己喜欢的颜色。每次刷新网页背景颜色又会变回默认值，是不是很烦，将颜色值保存在localstorage中，就可以将自己喜欢的颜色一直设置为背景颜色，即使刷新网页或者关机也不怕。这样的时钟是不是很酷，感兴趣的话赶紧实现一下，再也不用看电脑右下角那字小而单调的时间了。