使用Google材料化图标构建的简约风时钟

还可以在模拟时钟和数字时钟两种模式之间切换。

html5, clock, material

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 2250
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

$(document).ready(function() {
    //interactable elements
    var $digitalSelect = $("#digital");
    var $analogSelect = $("#analog");
    var $twelveSelect = $("#twelve");
    var $militarySelect = $("#twentyfour");

//non-interactable elements
    var $clock = $("#clock");
    var $analogURL = "https://upload.wikimedia.org/wikipedia/commons/6/63/Clock_06-55.svg";
    var $digitalURL = "https://d30y9cdsu7xlg0.cloudfront.net/png/63316-200.png";

$digitalSelect.on('click', function() {
        $analogSelect.removeClass('enabled').addClass('disabled');
        $(this).removeClass('disabled').addClass('enabled');
        $clock.attr('src', $digitalURL);
    });

$analogSelect.on('click', function() {
        $digitalSelect.removeClass('enabled').addClass('disabled');
        $(this).removeClass('disabled').addClass('enabled');
        $clock.attr('src', $analogURL);
    });

$twelveSelect.on('click', function() {
        $militarySelect.removeClass('enabled').addClass('disabled');
        $(this).removeClass('disabled').addClass('enabled');
    });

$militarySelect.on('click', function() {
        $twelveSelect.removeClass('enabled').addClass('disabled');
        $(this).removeClass('disabled').addClass('enabled');
    })
})

编译

CSS

body {
    background: #3C557D;
    color: #292929;
    font-family: 'Open Sans', sans-serif;
    overflow: hidden;
}
.modal {
    background: #f5f5f5;
    width: 400px;
    margin: 0 auto;
    margin-top: 50px;
    padding: 20px;
    box-shadow: 0 0 5px 1px #292929;
}
@media (max-width: 440px) {
    .modal {
        padding: 5px;
        max-width: 100%;
    }
    .modal select {
        overflow: hidden;
    }
}
.modal .head {
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: column nowrap;
    -ms-flex-flow: column nowrap;
    flex-flow: column nowrap;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
}
.modal .head .top {
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: row nowrap;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    font-size: 20px;
}
.modal .head .top p {
    margin: 0 auto;
}
.modal .head .top i {
    font-size: 35px;
}
.modal .head #marquee img {
    height: 200px;
}
.modal .body .option {
    font-size: 20px;
    margin-top: 20px;
}
.modal .body .option .el {
    width: 100%;
    height: 2px;
    display: block;
    background: -webkit-linear-gradient(left, #f5f5f5, #3C557D 40%, #f5f5f5);
    background: linear-gradient(to right, #f5f5f5, #3C557D 40%, #f5f5f5);
}
.modal .body .option input[type='submit'] {
    background: transparent;
    border: none;
    outline: none;
    margin-top: 15px;
    color: #3C557D;
    width: 100%;
    text-align: right;
}
.modal .body .option select {
    width: 100%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: url(https://cdn0.iconfinder.com/data/icons/slim-square-icons-basics/100/basics-08-128.png) no-repeat right;
    background-size: contain;
    border-radius: 0;
    padding: 5px;
    border: none;
    border-top: 1px solid #292929;
    outline: none;
}
.modal .body .option select:focus,
.modal .body .option select:active {
    outline: none;
}
.modal .body .option p {
    text-align: center;
}
.modal .body .option ul {
    list-style: none;
    padding: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
}
.modal .body .option ul li {
    display: inline-block;
}
.modal .body .option ul li a {
    color: inherit;
    text-decoration: none;
}
.modal .body .option ul li a.disabled,
.modal .body .option ul li a:hover,
.modal .body .option ul li a:active {
    color: darkgray;
    cursor: pointer;
}
.modal .body .option ul li a.disabled:hover,
.modal .body .option ul li a:hover:hover,
.modal .body .option ul li a:active:hover {
    color: #292929;
}
.modal .body .option ul li a.enabled {
    color: #3C557D;
    font-weight: bold;
}
.modal .body .option ul li a.enabled:hover {
    color: #44618e;
}

HTML

还可以在模拟时钟和数字时钟两种模式之间切换。

html5, clock, material

编辑器支持Emmet

快捷键

还可以在模拟时钟和数字时钟两种模式之间切换。

html5, clock, material

webgl化学材料分子3D结构图

使用jQuery Mobile实现的数字时钟

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：