Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 109,037

HOME > PHP > PHP Forum > รบกวนแนะนำแนวทางโปรแกรมจับเวลาถอยหลัง โดยมีการ input ข้อมูลเข้าไปครับ



 

รบกวนแนะนำแนวทางโปรแกรมจับเวลาถอยหลัง โดยมีการ input ข้อมูลเข้าไปครับ

 



Topic : 117534



โพสกระทู้ ( 173 )
บทความ ( 0 )



สถานะออฟไลน์




sssss



Tag : PHP, MySQL






Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2015-07-03 11:15:40 By : woraman View : 2018 Reply : 13
 

 

No. 1



โพสกระทู้ ( 74,058 )
บทความ ( 838 )

สมาชิกที่ใส่เสื้อไทยครีเอท

สถานะออฟไลน์
Twitter Facebook

ลองเอา Code นี้ไปใช้ครับ ผมว่ามันใช้งานได้ดีเลยครับ

URL
https://www.thaicreate.com/php/forum/015332.html#2


แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2015-07-03 18:01:22 By : mr.win
 


 

No. 2



โพสกระทู้ ( 3,156 )
บทความ ( 0 )

สมาชิกที่ใส่เสื้อไทยครีเอท Hall of Fame 2012

สถานะออฟไลน์


http://jsfiddle.net/ogf1ffak/ ทำให้ดูเป็นตัวอย่างแต่เขียนแบบลวกๆน่ะครับ ขาดความสวยงามของภาษา 
<style type='text/css'>
.CountBox{
    display:block;
    width:346px;
    background:gray;
    color:white;
    padding:0.6em;
}
.row{
    display:block;
    width:340px;
    height:1.4em;
    padding-bottom:0.2em;
}
.Box{
    width:109px;
    display:inline-block;
    text-align:center;
    font-size:1.2em;
    
}
</style>
<label for='hrs'>Hour:<input type='text' id='hours' class='txtinput'  required /></label>
<label for='minutes'>Minute:<input type='text' id='minutes' class='txtinput' required /></label><button type='button' id='doCount'>Count Down</button>
<div class='CountBox'>
    <div class='row'>
        <div class='Box' id='CountHours'></div>
        <div class='Box' id='CountMinutes'></div>
        <div class='Box' id='CountSecond'></div>
    </div>
    <div class='row'>
        <div class='Box'>Hour</div>
        <div class='Box'>Minute</div>
        <div class='Box'>Second</div>
    </div>
</div>
<script src='https://code.jquery.com/jquery-1.11.3.min.js'></script>
<script>
$(document).ready(function(){
    var hrs=$("#CountHours"),
        min=$("#CountMinutes"),
        sec=$("#CountSecond"),
        Hrs=0,Min=0,Sec=0;
    $("#doCount").click(function(e){
        hrs.text($("#hours").val());
        min.text(parseInt($("#minutes").val())-1);
        sec.text('60');
        var CountDown = setInterval(function(){
            Sec=parseInt(sec.text())-1;
            Min=parseInt(min.text());
            Hrs=parseInt(hrs.text());
            if(Sec<0){
                Sec=59;
                --Min;
                min.text(Min);                
            }
            if(Min<0 && Hrs>0){
                --Hrs;
                Min=59;
                Sec=59;
                hrs.text(Hrs);
                min.text(Min);
            }
            sec.text(Sec);
            if(Min<=0 && Hrs<=0 && Sec<=0){
                clearInterval(CountDown);
                alert('Finish CountDown');
            }
           
        },1000);
    });
});
</script>



ประวัติการแก้ไข
2015-07-03 23:42:21
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2015-07-03 23:41:05 By : sakuraei
 

 

No. 3



โพสกระทู้ ( 3,156 )
บทความ ( 0 )

สมาชิกที่ใส่เสื้อไทยครีเอท Hall of Fame 2012

สถานะออฟไลน์


ตัวอย่างมีเยอะครับ http://www.w3schools.com/jsref/met_win_setinterval.asp
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2015-07-03 23:55:15 By : sakuraei
 


 

No. 4



โพสกระทู้ ( 1,819 )
บทความ ( 20 )

สมาชิกที่ใส่เสื้อไทยครีเอท

สถานะออฟไลน์
Facebook

Code (PHP)
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
        <title>Countdown Example</title>
    </head>
    <body>
        <div class="container">
            <div class="page-header">
                <h1>Countdown Example</h1>
            </div>
            <form class="form-horizontal" method="get">
                <div class="form-group">
                    <label class="control-label col-sm-4">ชั่วโมง</label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control" name="hours" placeholder="Hours">
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-4">นาที</label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control" name="minutes" placeholder="Minutes">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-4 col-sm-offset-4">
                        <button id="startButton" class="btn btn-primary btn-block" type="button">
                            เริ่ม
                        </button>
                    </div>
                </div>
            </form>
            <h3 id="countdown" class="well well-lg text-center"></h3>
        </div>
        <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
        <script>
        $(function () {
            function pad(v) {
                return (v = "" + v).length === 1 ? "0" + v : v;
            }
			var $countdown = $("#countdown");
            var $startButton = $("#startButton").click(function (event) {
                event.preventDefault();
                var time = parseInt($('input[name="hours"]').val()) * 3600
                    + parseInt($('input[name="minutes"]').val()) * 60;
                if (!isFinite(time)) {
					window.alert("กรุณากรอกข้อมูลให้ถูกต้อง");
                    return;
                }
                $startButton.prop("disabled", true);
                var id = window.setInterval(
                    function () {
                        if (time < 0) {
                            window.clearInterval(id);
                            $startButton.prop("disabled", false);
                            return;
                        }
                        var hours = Math.floor(time / 3600),
                            minutes = Math.floor(time / 60 % 60),
                            seconds = Math.floor(time % 60);
                        $countdown.text(
                            pad(hours) + ":" + pad(minutes) + ":" + pad(seconds)
                        );
                        time--;
                    },
                    1000
                );
            });
        });
        </script>
    </body>
 </html>

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2015-07-04 00:54:48 By : phpinfo()
 


 

No. 5



โพสกระทู้ ( 3,156 )
บทความ ( 0 )

สมาชิกที่ใส่เสื้อไทยครีเอท Hall of Fame 2012

สถานะออฟไลน์


ตอบความคิดเห็นที่ : 4 เขียนโดย : phpinfo() เมื่อวันที่ 2015-07-04 00:54:48
รายละเอียดของการตอบ ::
เยี่ยมครับ responsive ด้วย
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2015-07-04 08:11:49 By : sakuraei
 


 

No. 6



โพสกระทู้ ( 5,105 )
บทความ ( 4 )

สมาชิกที่ใส่เสื้อไทยครีเอท Hall of Fame 2012

สถานะออฟไลน์


แอบมาขโมย....
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2015-07-04 08:20:14 By : apisitp
 


 

No. 7



โพสกระทู้ ( 173 )
บทความ ( 0 )



สถานะออฟไลน์


ตอบความคิดเห็นที่ : 4 เขียนโดย : phpinfo() เมื่อวันที่ 2015-07-04 00:54:48
รายละเอียดของการตอบ ::
- หากผมต้องการให้ตัวนับเวลาถอยหลังเป็นอีก page หนึ่งต้องทำไงครับ
- หากหมดเวลาแล้วให้มีการแจ้งเตือนว่าเวลาหมดแล้ว
- แล้วต้องการขนาดของตัวเลขให้เต็มหน้า ผมหาส่วนของ ที่เป็น echo ไม่เจอครับ
รบกวนช่วยอีกหน่อยนะครับ ขอบพระคุณอย่างสูงครับ
พอดีพวก function กับ script ผมเขียนไม่ได้เลยครับ ได้พื้นฐาน html กับ php นิดหน่อยครับ


ประวัติการแก้ไข
2015-07-04 08:49:07
2015-07-04 08:58:18
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2015-07-04 08:46:50 By : woraman
 


 

No. 8



โพสกระทู้ ( 3,156 )
บทความ ( 0 )

สมาชิกที่ใส่เสื้อไทยครีเอท Hall of Fame 2012

สถานะออฟไลน์


Code (PHP)
<form method='post' action='countdown-2.php'>
<label for='hrs'>Hour:<input type='text' id='hours' name='hours' class='txtinput'  required /></label>
<label for='minutes'>Minute:<input type='text' id='minutes' name='minutes' class='txtinput' required /></label><button id='doCount'>Count Down</button>
</form>


countdown-2.php
<style type='text/css'>
.CountBox{
    display:block;
    width:346px;
    background:gray;
    color:white;
    padding:0.6em;
}
.row{
    display:block;
    width:340px;
    height:1.4em;
    padding-bottom:0.2em;
}
.Box{
    width:109px;
    display:inline-block;
    text-align:center;
    font-size:1.2em;
    
}
</style>
<div class='CountBox'>
    <div class='row'>
        <div class='Box' id='CountHours'></div>
        <div class='Box' id='CountMinutes'></div>
        <div class='Box' id='CountSecond'></div>
    </div>
    <div class='row'>
        <div class='Box'>Hour</div>
        <div class='Box'>Minute</div>
        <div class='Box'>Second</div>
    </div>
</div>

<script src='https://code.jquery.com/jquery-1.11.3.min.js'></script>
<script>
$(document).ready(function(){
    var hrs=$("#CountHours"),
        min=$("#CountMinutes"),
        sec=$("#CountSecond"),
        Hrs=0,Min=0,Sec=0;

        hrs.text('<?php echo $_POST["hours"];?>');
        min.text('<?php echo $_POST["minutes"]-1;?>');
        sec.text('60');
        var CountDown = setInterval(function(){
            Sec=parseInt(sec.text())-1;
            Min=parseInt(min.text());
            Hrs=parseInt(hrs.text());
            if(Sec<0){
                Sec=59;
                --Min;
                min.text(Min);                
            }
            if(Min<0 && Hrs>0){
                --Hrs;
                Min=59;
                Sec=59;
                hrs.text(Hrs);
                min.text(Min);
            }
            sec.text(Sec);
            if(Min<=0 && Hrs<=0 && Sec<=0){
                clearInterval(CountDown);
                alert('Finish CountDown');
            }
           
        },1000);
    
});
</script>

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2015-07-04 11:40:00 By : sakuraei
 


 

No. 9



โพสกระทู้ ( 3,156 )
บทความ ( 0 )

สมาชิกที่ใส่เสื้อไทยครีเอท Hall of Fame 2012

สถานะออฟไลน์


countdown-2.php ตัวนี้ครับเต็มหน้าจอ
<style type='text/css'>
.CountBox{
    display:block;
    margin: auto;
    width: 65%;
    background:gray;
    color:white;
    padding:0.6em;
	text-align:center;
}
.row{
    display:block;
    width:100%;    
    padding-bottom:0.2em;
}
.Box ,.sBox{
    width:33%;
    display:inline-block;
    text-align:left;
    font-size:15em; 
	height:1.2em;	
}
.sBox{
    font-size:4em;    
	vertical-align: baseline;
	text-align:center;
	height:1.0em;
}
</style>

<div class='CountBox'>
    <div class='row'>
        <div class='Box' id='CountHours'></div>
        <div class='Box' id='CountMinutes'></div>
        <div class='Box' id='CountSecond'></div>
    </div>
    <div class='row'>
        <div class='sBox'>Hour</div>
        <div class='sBox'>Minute</div>
        <div class='sBox'>Second</div>
    </div>
</div>

<script src='https://code.jquery.com/jquery-1.11.3.min.js'></script>
<script>


function lpad(value, length) {
    return (value.toString().length < length) ? lpad("0"+value, length):value;
}

$(document).ready(function(){
    var hrs=$("#CountHours"),
        min=$("#CountMinutes"),
        sec=$("#CountSecond"),
        Hrs=0,Min=0,Sec=0;

        hrs.text(lpad('<?php echo $_POST["hours"];?>',2)+':');
        min.text(lpad('<?php echo $_POST["minutes"]-1;?>',2)+':');
        sec.text('60');
        var CountDown = setInterval(function(){
            Sec=parseInt(sec.text())-1;
            Min=parseInt(min.text());
            Hrs=parseInt(hrs.text());
            if(Sec<0){
                Sec=59;
                --Min;
                min.text(lpad(Min,2)+':');                
            }
            if(Min<0 && Hrs>0){
                --Hrs;
                Min=59;
                Sec=59;
                hrs.text(lpad(Hrs,2)+':');
                min.text(lpad(Min,2)+':');
            }
            sec.text(lpad(Sec,2));
            if(Min<=0 && Hrs<=0 && Sec<=0){
                clearInterval(CountDown);
                alert('Finish CountDown');
            }
           
        },1000);
    
});
</script>

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2015-07-04 12:17:31 By : sakuraei
 


 

No. 10



โพสกระทู้ ( 3,156 )
บทความ ( 0 )

สมาชิกที่ใส่เสื้อไทยครีเอท Hall of Fame 2012

สถานะออฟไลน์


Quote:
if(Min<=0 && Hrs<=0 && Sec<=0){
clearInterval(CountDown);

var snd = new Audio('http://www.orangefreesounds.com/wp-content/uploads/2014/09/Ding-dong.mp3');
snd.play();
alert('Finish CountDown');
}


เติมเสียงไปอีกสักหน่อย
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2015-07-04 12:43:53 By : sakuraei
 


 

No. 11



โพสกระทู้ ( 173 )
บทความ ( 0 )



สถานะออฟไลน์


ตอบความคิดเห็นที่ : 10 เขียนโดย : sakuraei เมื่อวันที่ 2015-07-04 12:43:53
รายละเอียดของการตอบ ::
ผมจัดตำแหน่งให้มันใหญ่ไม่ถูกครับ รบกวนต้องปรับตรงไหนครับ ตรง css หรือ ตรง ECho ครับ
Code (PHP)
<style type='text/css'>
.CountBox{
    display:block;
    width:1000px;
	height:500px;
	margin-left:auto;
	margin-right:auto;
	margin-top:50px;
    background:gray;
    color:#FFF;
    padding:0.6em;
}
.row{
    display:block;
    width:340px;
    height:1.4em;
    padding-bottom:0.2em;
}
.Box{
    width:109px;
    display:inline-block;
    text-align:center;
    font-size:1.2em;
    
}
</style>

ฟหกห
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2015-07-04 14:29:00 By : woraman
 


 

No. 12



โพสกระทู้ ( 3,156 )
บทความ ( 0 )

สมาชิกที่ใส่เสื้อไทยครีเอท Hall of Fame 2012

สถานะออฟไลน์


Code (PHP)
<style type='text/css'>
.CountBox{
    display:block;
    margin: auto;
    width: 85%;
    background:gray;
    color:white;
    padding:0.6em;
	text-align:center;
}
.row{
    display:block;
    width:100%;    
	margin:auto;
    padding-bottom:0.2em;
}
.Box ,.sBox{
    width:33%;
    display:inline-block;
    text-align:left;
    font-size:20em; 
	height:1.2em;	
}
.sBox{
    font-size:4em;    
	vertical-align: baseline;
	text-align:center;
	height:1.0em;
}
</style>

<div class='CountBox'>
    <div class='row'>
        <div class='Box' id='CountHours'></div>
        <div class='Box' id='CountMinutes'></div>
        <div class='Box' id='CountSecond'></div>
    </div>
    <div class='row'>
        <div class='sBox'>Hour</div>
        <div class='sBox'>Minute</div>
        <div class='sBox'>Second</div>
    </div>
</div>

<script src='https://code.jquery.com/jquery-1.11.3.min.js'></script>
<script>


function lpad(value, length) {
    return (value.toString().length < length) ? lpad("0"+value, length):value;
}

$(document).ready(function(){
    var hrs=$("#CountHours"),
        min=$("#CountMinutes"),
        sec=$("#CountSecond"),
        Hrs=0,Min=0,Sec=0;

        hrs.text(lpad('<?php echo $_POST["hours"];?>',2)+':');
        min.text(lpad('<?php echo $_POST["minutes"]-1;?>',2)+':');
        sec.text('60');
        var CountDown = setInterval(function(){
            Sec=parseInt(sec.text())-1;
            Min=parseInt(min.text());
            Hrs=parseInt(hrs.text());
            if(Sec<0){
                Sec=59;
                --Min;
                min.text(lpad(Min,2)+':');                
            }
            if(Min<0 && Hrs>0){
                --Hrs;
                Min=59;
                Sec=59;
                hrs.text(lpad(Hrs,2)+':');
                min.text(lpad(Min,2)+':');
            }
            sec.text(lpad(Sec,2));
            if(Min<=0 && Hrs<=0 && Sec<=0){
                clearInterval(CountDown);
                //http://www.orangefreesounds.com/wp-content/uploads/2015/07/Noisy-music-loop-120-bpm.mp3
				//http://www.orangefreesounds.com/wp-content/uploads/2014/09/Ding-dong.mp3
				var snd = new Audio('http://www.orangefreesounds.com/wp-content/uploads/2015/07/Noisy-music-loop-120-bpm.mp3');
				snd.play();
				alert('Finish CountDown');
            }
           
        },1000);
    
});
</script>


thaicreate-117534-countdown


ประวัติการแก้ไข
2015-07-04 15:04:36
2015-07-04 15:09:28
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2015-07-04 15:01:54 By : sakuraei
 


 

No. 13



โพสกระทู้ ( 173 )
บทความ ( 0 )



สถานะออฟไลน์


ขอบพระคุณทุกท่านครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2015-07-04 15:20:50 By : woraman
 

   

ค้นหาข้อมูล
   
 

แสดงความคิดเห็น
Re : รบกวนแนะนำแนวทางโปรแกรมจับเวลาถอยหลัง โดยมีการ input ข้อมูลเข้าไปครับ
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
 Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)







Exchange: นำเข้าสินค้าจากจีน, Taobao, เฟอร์นิเจอร์, ของพรีเมี่ยม, ร่ม, ปากกา, power bank, แฟลชไดร์ฟ, กระบอกน้ำ

Load balance : Server 01
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2024 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่