root
/
ok-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

按照layui模块化规范开发

v1.0
Mr.X 2018-06-06 00:18:57 +08:00
parent 2be26cd04d
commit 4e2112a36c
8 changed files with 437 additions and 234 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

260
css/okadmin.css
View File

@ -1,158 +1,158 @@
@charset "utf-8"; /*@charset "utf-8";*/
@import "../lib/layui/css/layui.css"; /*@import "../lib/layui/css/layui.css";*/
@import "//at.alicdn.com/t/font_693759_zroiq6woob6gvi.css"; /*@import "//at.alicdn.com/t/font_693759_zroiq6woob6gvi.css";*/
/*顶部导航菜单logo样式*/ /*!*顶部导航菜单logo样式*!*/
.layui-layout-admin .layui-logo { /*.layui-layout-admin .layui-logo {*/
color: #fff; /*color: #fff;*/
font-size: 20px; /*font-size: 20px;*/
} /*}*/
/*顶部导航文字菜单样式*/ /*!*顶部导航文字菜单样式*!*/
.layui-nav { /*.layui-nav {*/
padding: 0; /*padding: 0;*/
} /*}*/
/*顶部菜单左边部分菜单样式*/ /*!*顶部菜单左边部分菜单样式*!*/
.layui-layout-left { /*.layui-layout-left {*/
left: 235px; /*left: 235px;*/
} /*}*/
/*第一个tan选项卡隐藏取消图标*/ /*!*第一个tan选项卡隐藏取消图标*!*/
.layui-tab-title li:first-child .layui-tab-close { /*.layui-tab-title li:first-child .layui-tab-close {*/
display: none; /*display: none;*/
} /*}*/
/*隐藏/显示左边菜单按钮样式*/ /*!*隐藏/显示左边菜单按钮样式*!*/
.menu-switch { /*.menu-switch {*/
width: 30px; /*width: 30px;*/
height: 30px; /*height: 30px;*/
position: relative; /*position: relative;*/
left: 200px; /*left: 200px;*/
top: 18px; /*top: 18px;*/
color: #fff; /*color: #fff;*/
background-color: #1AA094; /*background-color: #1AA094;*/
text-align: center; /*text-align: center;*/
line-height: 30px; /*line-height: 30px;*/
cursor: pointer; /*cursor: pointer;*/
} /*}*/
/*主体内容样式*/ /*!*主体内容样式*!*/
.content-body { /*.content-body {*/
position: absolute; /*position: absolute;*/
top: 46px; /*top: 46px;*/
right: 0px; /*right: 0px;*/
bottom: 42px; /*bottom: 42px;*/
left: 200px; /*left: 200px;*/
z-index: 1; /*z-index: 1;*/
overflow: hidden; /*overflow: hidden;*/
} /*}*/
/*主体内容选项卡内容样式*/ /*!*主体内容选项卡内容样式*!*/
.content-body .layui-tab-content { /*.content-body .layui-tab-content {*/
position: absolute; /*position: absolute;*/
top: 50px; /*top: 50px;*/
bottom: 0px; /*bottom: 0px;*/
width: 100%; /*width: 100%;*/
padding: 0px; /*padding: 0px;*/
overflow: hidden; /*overflow: hidden;*/
} /*}*/
/*使iframe高度100%,它的父类高度也需要100%*/ /*!*使iframe高度100%,它的父类高度也需要100%*!*/
.content-body .layui-tab-content .layui-tab-item { /*.content-body .layui-tab-content .layui-tab-item {*/
height: 100%; /*height: 100%;*/
} /*}*/
/*使iframe高度100*/ /*!*使iframe高度100*!*/
.content-body .layui-tab-content .layui-tab-item iframe { /*.content-body .layui-tab-content .layui-tab-item iframe {*/
height: 100%; /*height: 100%;*/
} /*}*/
/*子页面(user.html、article.html等)的主体内容*/ /*!*子页面(user.html、article.html等)的主体内容*!*/
.ok-body { /*.ok-body {*/
padding: 10px; /*padding: 10px;*/
} /*}*/
/*子页面面包屑导航样式*/ /*!*子页面面包屑导航样式*!*/
.ok-body-breadcrumb { /*.ok-body-breadcrumb {*/
position: relative; /*position: relative;*/
line-height: 39px; /*line-height: 39px;*/
height: 41px; /*height: 41px;*/
border-bottom: 1px solid rgb(229, 229, 229); /*border-bottom: 1px solid rgb(229, 229, 229);*/
} /*}*/
/*子页面面包屑导航刷新按钮*/ /*!*子页面面包屑导航刷新按钮*!*/
.ok-body-breadcrumb .layui-btn { /*.ok-body-breadcrumb .layui-btn {*/
line-height: 2.4em; /*line-height: 2.4em;*/
margin-top: 3px; /*margin-top: 3px;*/
float: right /*float: right*/
} /*}*/
/*子页面面包屑导航刷新按钮图标*/ /*!*子页面面包屑导航刷新按钮图标*!*/
.ok-body-breadcrumb .layui-btn .layui-icon { /*.ok-body-breadcrumb .layui-btn .layui-icon {*/
line-height: 40px; /*line-height: 40px;*/
} /*}*/
/* /*!**/
.ok-search { /*.ok-search {*/
text-align: center; /*text-align: center;*/
} /*}*/
.ok-search input.layui-input { /*.ok-search input.layui-input {*/
width: 190px; /*width: 190px;*/
}*/ /*}*!*/
/*美化滚动条代码*/ /*!*美化滚动条代码*!*/
::-webkit-scrollbar { /*::-webkit-scrollbar {*/
width: 10px; /*width: 10px;*/
height: 10px; /*height: 10px;*/
} /*}*/
::-webkit-scrollbar-button:vertical { /*::-webkit-scrollbar-button:vertical {*/
display: none; /*display: none;*/
} /*}*/
::-webkit-scrollbar-track:vertical { /*::-webkit-scrollbar-track:vertical {*/
background-color: black; /*background-color: black;*/
} /*}*/
::-webkit-scrollbar-track-piece { /*::-webkit-scrollbar-track-piece {*/
background-color: #F5F5F5; /*background-color: #F5F5F5;*/
} /*}*/
::-webkit-scrollbar-thumb:vertical { /*::-webkit-scrollbar-thumb:vertical {*/
margin-right: 10px; /*margin-right: 10px;*/
background-color: #A6A6A6; /*background-color: #A6A6A6;*/
} /*}*/
::-webkit-scrollbar-thumb:vertical:hover { /*::-webkit-scrollbar-thumb:vertical:hover {*/
background-color: #aaa; /*background-color: #aaa;*/
} /*}*/
::-webkit-scrollbar-corner:vertical { /*::-webkit-scrollbar-corner:vertical {*/
background-color: #535353; /*background-color: #535353;*/
} /*}*/
::-webkit-scrollbar-resizer:vertical { /*::-webkit-scrollbar-resizer:vertical {*/
background-color: #FF6E00; /*background-color: #FF6E00;*/
} /*}*/
/*响应式代码控制*/ /*!*响应式代码控制*!*/
@media screen and (max-width: 768px) { /*@media screen and (max-width: 768px) {*/
.layui-layout-admin .layui-bg-black { /*.layui-layout-admin .layui-bg-black {*/
left: -200px; /*left: -200px;*/
} /*}*/
.layui-layout-admin .content-body { /*.layui-layout-admin .content-body {*/
left: 0; /*left: 0;*/
} /*}*/
.layui-layout-admin .layui-footer { /*.layui-layout-admin .layui-footer {*/
left: 0; /*left: 0;*/
} /*}*/
.layui-layout-left { /*.layui-layout-left {*/
display: none; /*display: none;*/
} /*}*/
} /*}*/

34
css/scroll-bar.css Normal file
View File

@ -0,0 +1,34 @@
/*美化滚动条代码*/
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-button:vertical {
display: none;
}
::-webkit-scrollbar-track:vertical {
background-color: black;
}
::-webkit-scrollbar-track-piece {
background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb:vertical {
margin-right: 10px;
background-color: #A6A6A6;
}
::-webkit-scrollbar-thumb:vertical:hover {
background-color: #aaa;
}
::-webkit-scrollbar-corner:vertical {
background-color: #535353;
}
::-webkit-scrollbar-resizer:vertical {
background-color: #FF6E00;
}

18
font-iconfont.html
View File

@ -3,7 +3,17 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>阿里巴巴图标库</title> <title>阿里巴巴图标库</title>
<link rel="stylesheet" href="css/okadmin.css"> <link rel="stylesheet" href="lib/layui/css/layui.css">
<style>
/*主体内容样式*/
.ok-body{padding:10px}
/*子页面面包屑导航样式*/
.ok-body-breadcrumb{position:relative;line-height:39px;height:41px;border-bottom:1px solid #e5e5e5}
/*子页面面包屑导航刷新按钮样式*/
.ok-body-breadcrumb .layui-btn{line-height:2.4em;margin-top:3px;float:right}
/*子页面面包屑导航刷新按钮图标样式*/
.ok-body-breadcrumb .layui-btn .layui-icon{line-height:40px}
</style>
</head> </head>
<body> <body>
<div class="ok-body"> <div class="ok-body">
@ -32,6 +42,10 @@
</div> </div>
<!--js逻辑--> <!--js逻辑-->
<script src="lib/layui/layui.js"></script> <script src="lib/layui/layui.js"></script>
<script src="js/okadmin.js"></script> <script>
layui.use(['element', 'code'], function () {
layui.code({about: false});
})
</script>
</body> </body>
</html> </html>

18
font-layui.html
View File

@ -3,7 +3,17 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Layui内置图标库</title> <title>Layui内置图标库</title>
<link rel="stylesheet" href="css/okadmin.css"> <link rel="stylesheet" href="lib/layui/css/layui.css">
<style>
/*主体内容样式*/
.ok-body{padding:10px}
/*子页面面包屑导航样式*/
.ok-body-breadcrumb{position:relative;line-height:39px;height:41px;border-bottom:1px solid #e5e5e5}
/*子页面面包屑导航刷新按钮样式*/
.ok-body-breadcrumb .layui-btn{line-height:2.4em;margin-top:3px;float:right}
/*子页面面包屑导航刷新按钮图标样式*/
.ok-body-breadcrumb .layui-btn .layui-icon{line-height:40px}
</style>
</head> </head>
<body> <body>
<div class="ok-body"> <div class="ok-body">
@ -32,6 +42,10 @@
</div> </div>
<!--js逻辑--> <!--js逻辑-->
<script src="lib/layui/layui.js"></script> <script src="lib/layui/layui.js"></script>
<script src="js/okadmin.js"></script> <script>
layui.use(['element', 'code'], function () {
layui.code({about: false});
})
</script>
</body> </body>
</html> </html>

96
index.html
View File

@ -7,7 +7,36 @@
<meta name="keywords" content="ok-admin v1.0,ok-admin网站后台模版,后台模版下载,后台管理系统模版,HTML后台模版下载"> <meta name="keywords" content="ok-admin v1.0,ok-admin网站后台模版,后台模版下载,后台管理系统模版,HTML后台模版下载">
<meta name="description" content="ok-admin v1.0，顾名思义，很赞的后台模版，它是一款基于Layui框架的轻量级扁平化且完全免费开源的网站后台管理系统模板，适合中小型CMS后台系统。"> <meta name="description" content="ok-admin v1.0，顾名思义，很赞的后台模版，它是一款基于Layui框架的轻量级扁平化且完全免费开源的网站后台管理系统模板，适合中小型CMS后台系统。">
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"/> <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" href="css/okadmin.css"> <link rel="stylesheet" href="lib/layui/css/layui.css">
<link rel="stylesheet" href="//at.alicdn.com/t/font_693759_zroiq6woob6gvi.css">
<style>
/*顶部导航菜单logo样式*/
.layui-layout-admin .layui-logo{color:#fff;font-size:20px}
/*顶部导航文字菜单样式*/
.layui-nav{padding:0}
/*顶部菜单左边部分菜单样式*/
.layui-layout-left{left:235px}
/*第一个tan选项卡隐藏取消图标*/
.layui-tab-title li:first-child .layui-tab-close{display:none}
/*隐藏/显示左边菜单按钮样式*/
.menu-switch{width:30px;height:30px;position:relative;left:200px;top:18px;color:#fff;background-color:#1AA094;text-align:center;line-height:30px;cursor:pointer}
/*主体内容样式*/
.content-body{position:absolute;top:46px;right:0;bottom:42px;left:200px;z-index:1;overflow:hidden}
/*主体内容选项卡内容样式*/
.content-body .layui-tab-content{position:absolute;top:50px;bottom:0;width:100%;padding:0;overflow:hidden}
/*使iframe高度100%,它的父类高度也需要100%*/
.content-body .layui-tab-content .layui-tab-item{height:100%}
/*使iframe高度100*/
.content-body .layui-tab-content .layui-tab-item iframe{height:100%}
/*响应式代码控制*/
@media screen and (max-width:768px){
.layui-layout-admin .layui-bg-black{left:-200px}
.layui-layout-admin .content-body{left:0}
.layui-layout-admin .layui-footer{left:0}
.layui-layout-left{display:none}
}
</style>
</head> </head>
<body class="layui-layout-body"> <body class="layui-layout-body">
<div class="layui-layout layui-layout-admin"> <div class="layui-layout layui-layout-admin">
@ -117,6 +146,69 @@
</div> </div>
<!--js逻辑--> <!--js逻辑-->
<script src="lib/layui/layui.js"></script> <script src="lib/layui/layui.js"></script>
<script src="js/okadmin.js"></script> <script>
layui.use(['element', 'layer'], function () {
var element = layui.element;
var $ = layui.jquery;
var layer = layui.layer;
/**
* 左边菜单显示/隐藏功能
* @type {boolean}
*/
$(".menu-switch").click(function () {
if ($(".layui-layout-admin .layui-side").css("left") == '0px') {
$(".layui-layout-admin .layui-side").animate({left: "-200px"});
$(".layui-layout-admin .content-body").animate({left: "0px"});
$(".layui-layout-admin .layui-footer").animate({left: "0px"});
} else {
$(".layui-layout-admin .layui-side").animate({left: "0px"});
$(".layui-layout-admin .content-body").animate({left: "200px"});
$(".layui-layout-admin .layui-footer").animate({left: "200px"});
}
});
/**
* 点击左边菜单在右边添加选项卡
*/
$(".layui-nav-child").find("dd").click(function () {
var title = $(this).text();
var path = $(this).children('a').attr('path');
var tabId = $(this).children('a').attr('tab-id');
// 去重复选项卡
for (var i = 0; i < $('.ok-frame').length; i++) {
if ($('.ok-frame').eq(i).attr('tab-id') == tabId) {
element.tabChange("ok-tab", tabId);
event.stopPropagation();
return;
}
}
// 添加选项卡
element.tabAdd("ok-tab", {
title: title,
content: "<iframe src='" + path + "' tab-id='" + tabId + "' class='ok-frame' frameborder='0' scrolling='yes' width='100%' height='100%'></iframe>",
id: tabId
});
// 切换选项卡
element.tabChange("ok-tab", tabId);
});
/**
* 捐赠作者
*/
$(".layui-footer button").click(function () {
layer.tab({
area: ["330px", "350px"],
tab: [{
title: "支付宝",
content: "<img src='images/zfb.jpg' width='200' height='300' style='margin-left: 60px'>"
}, {
title: "微信",
content: "<img src='images/wx.jpg' width='200' height='300' style='margin-left: 60px'>"
}]
});
});
});
</script>
</body> </body>
</html> </html>

184
js/okadmin.js
View File

@ -1,92 +1,92 @@
layui.use(['element', 'jquery', 'code', 'layer'], function () { // layui.use(['element', 'jquery', 'code', 'layer'], function () {
var element = layui.element; // var element = layui.element;
var $ = layui.jquery; // var $ = layui.jquery;
var layer = layui.layer; // var layer = layui.layer;
// 引用code方法 // // 引用code方法
layui.code({about: false}); // layui.code({about: false});
//
/** // /**
* 左边菜单显示/隐藏功能 // * 左边菜单显示/隐藏功能
* @type {boolean} // * @type {boolean}
*/ // */
$(".menu-switch").click(function () { // $(".menu-switch").click(function () {
if ($(".layui-layout-admin .layui-side").css("left") == '0px') { // if ($(".layui-layout-admin .layui-side").css("left") == '0px') {
$(".layui-layout-admin .layui-side").animate({left: "-200px"}); // $(".layui-layout-admin .layui-side").animate({left: "-200px"});
$(".layui-layout-admin .content-body").animate({left: "0px"}); // $(".layui-layout-admin .content-body").animate({left: "0px"});
$(".layui-layout-admin .layui-footer").animate({left: "0px"}); // $(".layui-layout-admin .layui-footer").animate({left: "0px"});
} else { // } else {
$(".layui-layout-admin .layui-side").animate({left: "0px"}); // $(".layui-layout-admin .layui-side").animate({left: "0px"});
$(".layui-layout-admin .content-body").animate({left: "200px"}); // $(".layui-layout-admin .content-body").animate({left: "200px"});
$(".layui-layout-admin .layui-footer").animate({left: "200px"}); // $(".layui-layout-admin .layui-footer").animate({left: "200px"});
} // }
}); // });
//
/** // /**
* 点击左边菜单在右边添加选项卡 // * 点击左边菜单在右边添加选项卡
*/ // */
$(".layui-nav-child").find("dd").click(function () { // $(".layui-nav-child").find("dd").click(function () {
var title = $(this).text(); // var title = $(this).text();
var path = $(this).children('a').attr('path'); // var path = $(this).children('a').attr('path');
var tabId = $(this).children('a').attr('tab-id'); // var tabId = $(this).children('a').attr('tab-id');
// 去重复选项卡 // // 去重复选项卡
for (var i = 0; i < $('.ok-frame').length; i++) { // for (var i = 0; i < $('.ok-frame').length; i++) {
if ($('.ok-frame').eq(i).attr('tab-id') == tabId) { // if ($('.ok-frame').eq(i).attr('tab-id') == tabId) {
element.tabChange("ok-tab", tabId); // element.tabChange("ok-tab", tabId);
event.stopPropagation(); // event.stopPropagation();
return; // return;
} // }
} // }
// 添加选项卡 // // 添加选项卡
element.tabAdd("ok-tab", { // element.tabAdd("ok-tab", {
title: title, // title: title,
content: "<iframe src='" + path + "' tab-id='" + tabId + "' class='ok-frame' frameborder='0' scrolling='yes' width='100%' height='100%'></iframe>", // content: "<iframe src='" + path + "' tab-id='" + tabId + "' class='ok-frame' frameborder='0' scrolling='yes' width='100%' height='100%'></iframe>",
id: tabId // id: tabId
}); // });
// 切换选项卡 // // 切换选项卡
element.tabChange("ok-tab", tabId); // element.tabChange("ok-tab", tabId);
}); // });
//
/** // /**
* 捐赠作者 // * 捐赠作者
*/ // */
$(".layui-footer button").click(function () { // $(".layui-footer button").click(function () {
layer.tab({ // layer.tab({
area: ["330px", "350px"], // area: ["330px", "350px"],
tab: [{ // tab: [{
title: "支付宝", // title: "支付宝",
content: "<img src='images/zfb.jpg' width='200' height='300' style='margin-left: 60px'>" // content: "<img src='images/zfb.jpg' width='200' height='300' style='margin-left: 60px'>"
}, { // }, {
title: "微信", // title: "微信",
content: "<img src='images/wx.jpg' width='200' height='300' style='margin-left: 60px'>" // content: "<img src='images/wx.jpg' width='200' height='300' style='margin-left: 60px'>"
}] // }]
}); // });
}); // });
}); // });
//
//
/** // /**
* 获取当前时间 // * 获取当前时间
*/ // */
var nowDate1 = ""; // var nowDate1 = "";
//
function setDate() { // function setDate() {
var date = new Date(); // var date = new Date();
var year = date.getFullYear(); // var year = date.getFullYear();
nowDate1 = year + "-" + addZero((date.getMonth() + 1)) + "-" + addZero(date.getDate()) + " "; // nowDate1 = year + "-" + addZero((date.getMonth() + 1)) + "-" + addZero(date.getDate()) + " ";
nowDate1 += addZero(date.getHours()) + ":" + addZero(date.getMinutes()) + ":" + addZero(date.getSeconds()); // nowDate1 += addZero(date.getHours()) + ":" + addZero(date.getMinutes()) + ":" + addZero(date.getSeconds());
document.getElementById("nowTime").innerHTML = nowDate1; // document.getElementById("nowTime").innerHTML = nowDate1;
setTimeout('setDate()', 1000); // setTimeout('setDate()', 1000);
} // }
//
/** // /**
* 年月日是分秒为10以下的数字则添加0字符串 // * 年月日是分秒为10以下的数字则添加0字符串
* @param time // * @param time
* @returns {number | *} // * @returns {number | *}
*/ // */
function addZero(time) { // function addZero(time) {
var i = parseInt(time); // var i = parseInt(time);
if (i / 10 < 1) { // if (i / 10 < 1) {
i = "0" + i; // i = "0" + i;
} // }
return i; // return i;
} // }

20
user.html
View File

@ -4,7 +4,18 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>用户列表</title> <title>用户列表</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="css/okadmin.css"> <link rel="stylesheet" href="lib/layui/css/layui.css">
<link rel="stylesheet" href="css/scroll-bar.css">
<style>
/*主体内容样式*/
.ok-body{padding:10px}
/*子页面面包屑导航样式*/
.ok-body-breadcrumb{position:relative;line-height:39px;height:41px;border-bottom:1px solid #e5e5e5}
/*子页面面包屑导航刷新按钮样式*/
.ok-body-breadcrumb .layui-btn{line-height:2.4em;margin-top:3px;float:right}
/*子页面面包屑导航刷新按钮图标样式*/
.ok-body-breadcrumb .layui-btn .layui-icon{line-height:40px}
</style>
</head> </head>
<body> <body>
<div class="ok-body"> <div class="ok-body">
@ -244,6 +255,11 @@
</div> </div>
<!--js逻辑--> <!--js逻辑-->
<script src="lib/layui/layui.js"></script> <script src="lib/layui/layui.js"></script>
<script src="js/okadmin.js"></script> <script>
layui.use(['element'], function () {
var element = layui.element;
var $ = layui.jquery;
})
</script>
</body> </body>
</html> </html>

41
welcome.html
View File

@ -7,7 +7,12 @@
<meta name="keywords" content="ok-admin v1.0,ok-admin网站后台模版,后台模版下载,后台管理系统模版,HTML后台模版下载"> <meta name="keywords" content="ok-admin v1.0,ok-admin网站后台模版,后台模版下载,后台管理系统模版,HTML后台模版下载">
<meta name="description" content="ok-admin v1.0，顾名思义，很赞的后台模版，它是一款基于Layui框架的轻量级扁平化且完全免费开源的网站后台管理系统模板，适合中小型CMS后台系统。"> <meta name="description" content="ok-admin v1.0，顾名思义，很赞的后台模版，它是一款基于Layui框架的轻量级扁平化且完全免费开源的网站后台管理系统模板，适合中小型CMS后台系统。">
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"/> <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" href="css/okadmin.css"> <link rel="stylesheet" href="lib/layui/css/layui.css">
<link rel="stylesheet" href="css/scroll-bar.css">
<style>
/*主体内容样式*/
.ok-body{padding:10px}
</style>
</head> </head>
<body> <body>
<div class="ok-body"> <div class="ok-body">
@ -129,10 +134,38 @@
</div> </div>
<!--js逻辑--> <!--js逻辑-->
<script src="lib/layui/layui.js"></script> <script src="lib/layui/layui.js"></script>
<script src="js/okadmin.js"></script> <script>
<script type="text/javascript"> /**
// 初始化函数 * 初始化函数
*/
setDate(); setDate();
/**
* 获取当前时间
*/
var nowDate1 = "";
function setDate() {
var date = new Date();
var year = date.getFullYear();
nowDate1 = year + "-" + addZero((date.getMonth() + 1)) + "-" + addZero(date.getDate()) + " ";
nowDate1 += addZero(date.getHours()) + ":" + addZero(date.getMinutes()) + ":" + addZero(date.getSeconds());
document.getElementById("nowTime").innerHTML = nowDate1;
setTimeout('setDate()', 1000);
}
/**
* 年月日是分秒为10以下的数字则添加0字符串
* @param time
* @returns {number | *}
*/
function addZero(time) {
var i = parseInt(time);
if (i / 10 < 1) {
i = "0" + i;
}
return i;
}
</script> </script>
</body> </body>
</html> </html>