프런트엔드 페이지 학습 1

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를 아래로 돌리는 것 같은데,
다음으로 전송:https://www.cnblogs.com/Seands/p/4653735.html

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

다양한 언어의 JSON

JSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

프런트엔드 페이지 학습 1

좋은 웹페이지 즐겨찾기