html播放死神,index.html

flexDate demo

* {

margin: 0;

padding: 0;

}

a {

text-decoration: none;

}

ul, ol {

list-style: none;

}

body {

background-color: #f1f1f1;

font-size: 14px;

color: #666666;

font-family: '微软雅黑', Verdana, sans-serif, '宋体', serif;

}

.con {

width: 1200px;

border: 1px solid #dfdfdf;

background-color: #fff;

margin: 10px auto;

box-sizing: border-box;

padding: 20px 20px;

border-radius: 3px;

}

.head {

background-color: #f1f1f1;

padding: 8px 15px;

border-bottom: 1px solid #dfdfdf;

color: #ff8000;

font-size: 16px;

}

.block {

margin-top: 20px;

box-sizing: border-box;

border: 1px solid #dfdfdf;

border-top: 2px solid #ff8000;

opacity: 0;

}

.block:first-child {

margin-top: 0;

}

.code {

background-color: #ffffff;

border: none;

border-top: 1px solid #dfdfdf;

padding: 10px;

resize: none;

outline: none;

width: 100%;

box-sizing: border-box;

font-family: '微软雅黑', Verdana, sans-serif, '宋体', serif;

font-size: 14px;

overflow: hidden;

vertical-align: bottom;

}

.textBox {

border: 1px solid #CCCCCC;

height: 30px;

line-height: 28px;

outline: none;

width: 250px;

color: #666666;

font-family: '微软雅黑', Verdana, sans-serif, '宋体', serif;

font-size: 14px;

text-indent: 10px;

}

.form {

padding: 15px;

}

.wrapper {

display: inline-block;

border: 1px solid #CCCCCC;

}

.wrapper > * {

vertical-align: top;

}

.wrapper > span {

display: inline-block;

width: 30px;

height: 30px;

background: url(./images/date.png) no-repeat center center #f4f4f4;

border-left: 1px solid #CCCCCC;

cursor: pointer;

}

.wrapper > .textBox {

border: none;

width: 220px;

}

.btn {

padding: 5px 12px;

background-color: #f4f4f4;

color: #666666;

border: 1px solid #CCCCCC;

margin-left: 10px;

}

/*prettify*/

.code.prettyprint {

border: none;

border-top: 1px solid #dfdfdf;

}

ol.linenums {

margin-left: 40px;

}

ol.linenums li {

list-style-type: decimal;

background: #fff;

color: #2B91AF;

border-left: 1px solid #D1D7DC;

margin-left: 2px;

padding-left: 10px;

}

.str {

color: #b12424;

}

.code.prettyprint {

padding: 0 0 15px 0;

}

.prettyprint:before {

content: 'source code';

display: block;

height: 35px;

line-height: 33px;

border-bottom: 1px solid #dfdfdf;

font-size: 16px;

color: #999999;

text-indent: 15px;

font-family: "Comic Sans MS";

background-color: #f1f1f1;

margin-bottom: 15px;

}

设置默认今天

重置时间精度

重置为年

重置为月

重置为日

οnclick="resetDate.reset('yyyy-MM-dd HH');resetDate.show();">重置为时

重置为分

οnclick="resetDate.reset('yyyy-MM-dd HH:mm:ss');resetDate.show();">重置为秒

var resetDate=new FlexDate({

e:'.resetDate',

value:new Date()

});

重置为年

重置为月

重置为日

重置为时

重置为分

重置为秒

单独按钮启动

var singleDate=new FlexDate({

e:'.single',

bindClick:false

});

$('.single').next().click(function () {

singleDate.show();

});

调整精度到年 | 调整精度到天 | 调整精度到分

去掉3个按钮

限制选取最小时间

时间范围选取

至

var minDate=new FlexDate({

e:'.minDate',

confirm:function (value) {

maxDate.setMin(value);

}

});

var maxDate=new FlexDate({

e:'.maxDate',

confirm:function (value) {

minDate.setMax(value);

}

})

var image = new Image();

$('.prettyprint').each(function (i) {

var code=$.trim($(this).html());

$('

').replaceAll(this).text(code).parent().css('animation', 'flexDate_fadeInUp 0.5s ' + (i * 0.2) + 's forwards');

});

if (!(image.style.animation == '' || image.style.webkitAnimation == '')) {

$('.block').css('opacity', 1);

}

PR.prettyPrint();

FlexDate.setSkin('#ff8000');

var resetDate = new FlexDate({

e: '.resetDate',

value: new Date()

});

var singleDate = new FlexDate({

e: '.single',

bindClick: false

});

$('.wrapper>span').click(function () {

singleDate.show();

});

var minDate = new FlexDate({

e: '.minDate',

confirm: function (value) {

maxDate.setMin(value);

}

});

var maxDate = new FlexDate({

e: '.maxDate',

confirm: function (value) {

minDate.setMax(value);

}

})

一键复制

编辑

Web IDE

原始数据

按行查看

历史