生日倒计时炫酷源码html,JS响应式生日倒计时
HtmlCssJs
距离亲爱的生日到来还有:
天
时
分
秒
/*
Base Reset CSS
*/
* {
margin:0;
padding:0;
}
html,body {
height:100%;
}
body {
font-family:"Microsoft Yahei";
background:url(https://timgsa.baidu.com/timg?image&quality=80&size=b10000_10000&sec=1486823066&di=c88093f821a497bdbb6b0cd5d5cefcfe&src=http://pic1.win4000.com/wallpaper/e/57ac30eb52fcb.jpg) no-repeat;
background-size:cover;
background-position:center center;
background-attachment:fixed;
}
a {
text-decoration:none;
}
ul,li {
padding:0;
margin:0;
list-style:none;
}
/*
Common
*/
.container h1 {
color:#333;
font-weight:100;
background:rgba(255,255,255,.5);
text-align:center;
}
.container ul li {
font-size:60px;
font-weight:100;
color:#fff;
border-radius:10px;
text-align:center;
}
.container ul li:nth-child(1) {
background:rgba(255,102,102,.7);
}
.container ul li:nth-child(2) {
background:rgba(0,204,153,.75);
}
.container ul li:nth-child(3) {
background:rgba(204,153,204,.55);
}
.container ul li:nth-child(4) {
background:rgba(255,255,255,.2);
}
sub {
font-weight:400;
font-size:15px;
}
/*
桌面显示器,width>=992px
*/
@media (min-width:992px) {
.container {
position:absolute;
top:50%;
left:50%;
margin:-240px 0 0 -480px;
width:960px;
height:480px;
text-align:center;
background:rgba(0,0,0,.3);
border-radius:10px;
transition:all 0.5s;
}
.container h1 {
margin:50px 0;
padding:20px;
font-size:40px;
}
.container ul {
overflow:auto;
}
.container ul li {
display:inline-block;
width:180px;
height:180px;
line-height:180px;
font-size:60px;
font-weight:100;
color:#fff;
border-radius:10px;
}
.container ul li:nth-child(2) {
margin:0 15px;
}
.container ul li:nth-child(3) {
margin:0 15px 0 0;
}
}/*
平板,768px=
//封装获取ID的方法
function $(id) {
return typeof id === 'string' ? document.getElementById(id) : id;
}
/**
* [checkTime description]
*/
function checkTime(i) {
if (i < 10) {
i = "0" + i;
}
return i;
}
/**
* [showTime description]
* @return {[type]} [展示时间]
*/
function showTime() {
var curtime = new Date(); //当前时间
var endtime = new Date("2017/12/1,00:00:00"); //目标时间
var leftTime = (endtime.getTime() - curtime.getTime()) / 1000; //毫秒(ms)
var leftDay = parseInt(leftTime / (24 * 60 * 60)); //剩余天数
var leftHour = parseInt(leftTime / (60 * 60) % 24); //剩余小时
var leftMin = parseInt(leftTime / 60 % 60); //剩余分钟
var leftSec = parseInt(leftTime % 60); //剩余秒
$('day').innerHTML = checkTime(leftDay);
$('hour').innerHTML = checkTime(leftHour);
$('min').innerHTML = checkTime(leftMin);
$('sec').innerHTML = checkTime(leftSec);
if (leftTime <= 0) {
$('title').innerHTML = "再见2016,2017你好";
$('day').innerHTML = 0;
$('hour').innerHTML = 0;
$('min').innerHTML = 0;
$('sec').innerHTML = 0;
}
setTimeout(showTime, 1000);
}
showTime();
↑上面代码改变,会自动显示代码结果
jQuery调用版本:1.11.3
生日倒计时炫酷源码html,JS响应式生日倒计时相关推荐
- Emlog博客主题模板源码简约好看响应式
非常优秀的EMlog博客模板beginning,这是款非常优秀的emlog模板,采用自适应式设计, 界面精致好看,大气美观,展示博客数据统计的个人中心类型头部,自媒体气息十足: 内置5种分类文章列表页 ...
- data access components 2.0未响应_Vue2.x 源码剖析之响应式原理
# Study Notes 本博主会持续更新各种前端的技术,如果各位道友喜欢,可以关注.收藏.点赞下本博主的文章. Vue.js 源码剖析-响应式原理 响应式处理的入口 src/core/insta ...
- Vue源码--解读vue响应式原理
原文链接:https://geniuspeng.github.io/2018/01/05/vue-reactivity/ Vue的官方说明里有深入响应式原理这一节.在此官方也提到过: 当你把一个普通的 ...
- 【源码分享】响应式风景旅游网页设计-HTML+CSS+JavaScript
临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?网页要求的总数量太多?HTML网页作业无从下手?没有合适的模板?等等一系列问题.你想要解决的问题,在这里常见网页设计作业题材有 个 ...
- html5 php整站源码下载,HTML5响应式简洁企业织梦模板整站源码 v5.7
HTML5响应式简洁企业织梦模板整站源码简介 此源码是一款织梦v5.7sp1开源的html5自适应织梦模版,源码包内包含详细的安装说明,方便了让学习安装网站的人快速的安装网站,安装好的网站里面包涵一些 ...
- 【Vue3源码学习】响应式源码解析:reactive、effect、ref
源码版本 Vue3.2.24 废话不多说,直接开始!!! reactive响应式 源码地址:packages/reactivity/reactive.ts 先看一下在 Vue3 中定义的几个用来标记目 ...
- php导航收录源码,PHP最新响应式自动收录自带查反链导航源码
[温馨提示]源码包解压密码:www.youhutong.com 资源描述 PHP最新响应式自动收录自带查反链导航源码 源码介绍: 钥匙主题,基于flkc主题重写,功能:自动收录,自定义排序,自定义颜色 ...
- 2023最新HTML网站建设中单页源码+支持WAP响应式/UI简约大气
正文: 网站建设中HTML单页源码,支持动态自动替换样式,颜色和文字都会替换,也支持手机端响应式,还是非常不错的,有兴趣的自行去安装体验吧,其它就没什么好介绍了. 程序: wweoud.lanzoup ...
- 网址导航网站模板源码,自适应HTML5响应式,帝国CMS分类目录全站静态页面
源码介绍 本源码经过本人亲自测试,源码显示正常,收录给力! 1.本源码基于帝国CMS新内核, 2.图片本地化,相较于其他导航站调用图片,更加稳定 3.标签拼音化,生成完美 4.网站地址加NOF属性,防 ...
最新文章
- WEB浏览器兼容(转)
- 理想汽车事故,智能短板暴露
- h5的语义化部分_H5 部分新语义化标签
- Linux_查看CPU信息、机器型号等硬件信息
- 中国科学院院士梅宏:云计算这十年
- spring 各个jar包的功能
- 开源HTTP解析器---http-parser和fast-http
- knife4j是为Java MVC框架集成Swagger生成Api文档的增强解决方案
- 单片机项目开发一般步骤
- python软件下载-python下载_python免费下载[编程工具]-下载之家
- hdu4857 拓扑排序
- Ubuntu 携手初创企业用代码开拓物联网
- java基础回顾---static关键字
- 0x80070079信号灯超时_onedrive下载文件时,出现”0x80070079信号灯超时时间已到”...
- 网页与多个服务器建立websoc,同一个页面怎么发起多个websocket
- python绘制正态分布图像
- Git中HEAD和ORIG_HEAD指针指的是什么
- 1万小时后,我从外包走进了字节跳动,现在出了一本书,文末送书!
- QtAndroid详解(6):集成信鸽推送
- 英语学习方法:我是怎么从高考英语115考到托福97的