DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../../js/jquery-1.8.3.min.js" >script>
<script type="text/javascript">
$(function(){
$("#print").click(function(){
alert("打印中...");
window.open("box-pack.html");
});
result = "2015-07-15 23:59:59";
var arr = new Array();
var arr1 = new Array();
var arr2 = new Array();
arr = result.split(" ");
var cdiv1 = $("");
var cdiv2 = $("");
cdiv1.text(arr[0]);
cdiv2.text(arr[1]);
$("#time").empty();
$("#time").append(cdiv1);
$("#time").append(cdiv2);
$("#time").css("color","white");
arr1 = arr[0].split("-");
arr2 = arr[1].split(":");
var year = new Number(arr1[0]);
var month = new Number(arr1[1]);
var day = new Number(arr1[2]);
var hour = new Number(arr2[0]);
var min = new Number(arr2[1]);
var ss = new Number(arr2[2]);
var time = new Number(0);
var timer = setInterval(function(){
ss++;
time++;
if(ss==60){
ss=0;
min++;
}
if(min==60){
min=0;
hour++;
}
if(hour==24){
hour=0;
day++;
}
$("#time").empty();
var str1 = changeNumber(year)+"-"+changeNumber(month)+"-"+changeNumber(day);
var str2 = " "+changeNumber(hour)+":"+changeNumber(min)+":"+changeNumber(ss);
var div1 = $("");
var div2 = $("");
div1.text(str1);
div2.text(str2);
$("#time").append(div1);
$("#time").append(div2);
if(time==7200){
clearInterval(timer);
$("#time").css("color","red");
}
},1000);
var fen = new Number(30);
var miao = new Number(0);
$("#reTime").css("color","white");
$("#reTime").text("30:00");
var timer2 = setInterval(function(){
if(miao==0){
miao=60;
fen--;
}
miao--;
var string = changeNumber(fen)+":"+changeNumber(miao);
$("#reTime").text(string);
if(fen==5&&miao==0){
/* if(miao%2==0){
$("#reTime").css("color","red");
}else{
$("#reTime").css("color","white");
} */
var tt = new Number(0);
var timer3 = setInterval(function(){
if(tt%2==0){
$("#reTime").css("visibility","hidden");
}else{
$("#reTime").css("visibility","visible");
}
tt++;
},500);
}
if(fen==-1){
$("#reTime").text("--:--");
$("#reTime").css("color","red");
clearInterval(timer2);
clearInterval(timer3);
}
},1000);
});
function changeNumber(time){
if(time<10){
return "0"+time;
}else{
return ""+time;
}
}
script>
<style>
* {
margin: 0px;
padding: 0px;
border: 0px;
}
body {
background-color: #efefef;
}
h1 {
margin-top: 70px;
text-align: center;
color: #30c;
}
.main1 {
margin: 20px 0px 0px 200px;
width: 600px;
height: 200px;
display: box;
display:-webkit-box;
text-align:left;
-webkit-box-orient:horizontal ;
-moz-box-orient:horizontal ;
-o-box-orient:horizontal ;
-ms-box-orient:horizontal ;
background-color: #f6f5ec;
}
.one {
-moz-box-flex:1;
-webkit-box-flex:1;
box-felx: 1;
background-color: #b2d235;
writing-mode:vertical-rl;
-webkit-writing-mode:vertical-rl;
}
.two {
margin: 5px;
-moz-box-flex:2;
-webkit-box-flex:2;
box-felx: 2;
background-color: #f47920;
}
.three {
-moz-box-flex:3;
-webkit-box-flex:3;
box-felx: 3;
background-color: #fedcbd;
}
.main2 {
margin: 20px 0px 100px 200px;
width: 600px;
height: 400px;
display: box;
display:-webkit-box;
-webkit-box-orient: vertical;
-moz-box-orient:horizontal ;
-o-box-orient:horizontal ;
-ms-box-orient:horizontal ;
background-color: #f6f5ec;
}
table {
margin-top: 30px;
}
.color1{
background-color: #b2d235;
}
.color2{
background-color: #fedcbd;
}
style>
head>
<body>
<h1>box模型横向切分h1>
<article class="main1">
<section class="one">山不在高、有仙则灵section>
<section class="two">box-felx: 2;section>
<section class="three">box-felx: 3;section>
article>
<center>
<h1>中间表单h1>
<form>
<table>
<tr>
<td class="color1">用户名：td>
<td class="color2" id="reTime"> td>
tr>
<tr>
<td class="color2">密 码:td>
<td class="color1" id="time"> td>
tr>
table>
form>
<br><br>
<button id="print" style="width:100px;height: 40px; text-algin:center;cursor: pointer;">打印测试button>
<br><br>
center>
<h1>box模型纵向切分h1>
<article class="main2">
<section class="one">box-felx: 1;section>
<section class="two">box-felx: 2;section>
<section class="three">box-felx: 3;section>
article>
<h1>div测试h1>
<div class="main2">
<div class="one">box-felx: 1;div>
<div class="two">box-felx: 2;div>
<div class="three">box-felx: 3;div>
div>
<div>div>
body>
页面引入了jquery，
前面一个计时 设置了初始时间。只记录了2小时，
后面一个倒计时 30分钟，到最后5分钟时，会闪烁提醒、、
writing-mode：文本排列方式貌似将div旋转了下、、