前端页面学习1

时间：2015-07-17 11:53:37 阅读：146 评论：0 收藏：0 [点我收藏+]

标签：

<!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 = $("<div></div>");
        var cdiv2 = $("<div></div>");
        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 = $("<div></div>");
            var div2 = $("<div></div>");
            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">&nbsp;&nbsp;&nbsp;</td>
        </tr>
        <tr>
            <td class="color2">密&nbsp;&nbsp;码:</td>
            <td class="color1" id="time">&nbsp;&nbsp;&nbsp;</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旋转了下、、

前端页面学习1

标签：

原文地址：http://www.cnblogs.com/Seands/p/4653735.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行