مشکل در شمارش معکوس [بایگانی]

mojtabakhazaeli

پنج شنبه 28 خرداد 1394, 21:14 عصر

سلام
یک صفح انتقال دهنده لینک ساختم ولی باهاش یه مشکلی دارم
وقتی بازش میکنم نوشتم (در صورتی که تا 10 ثانیه به صفحه جدید منتقل نشدید روی دکمه پایین کلیک کنید )اما این عدد 10 اینجا ثابته
میخوام اینو به صورت شمارش معکوس در بیارم که عدد 10 بعد از هر یک ثانیه یکی ازش کم شه اما این کارو بلد نیستم
کد رو گزاشتم لطفا برام ویرایشش کنید مبتدی ام
مرسی

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>انتقال دهنده پالت</title>
<meta name="keywords" content="paaler,پالت">
<meta name="description" content="پالت">
<meta http-equiv="refresh" content="10;URL=<?php $url=$_GET['url']; echo"$url"; ?>">
<link href="favicon.png" rel="shortcut icon">
<style>
@font-face{font-family:'Yekan';src:url('Fonts/BYekan.ttf') format('truetype'), url('Fonts/BYekan.eot?#') format('eot'), url('Fonts/BYekan.woff') format('woff');font-style:normal;font-weight:normal;}
*{border:0;padding:0;margin:0;}
body{direction:rtl;color:#34495e;background-image:url(http://s3.picofile.com/file/8194257384/back.png);
margin:0;padding:0;text-align:center;font:11px/1.9 tahoma;}
a{text-decoration:none;color:#34495e;transition:all 0.3s ease-out;}
a:hover{text-decoration:none;color:#3297da;}
.logo {background: url('logo.png') no-repeat;width: 200px;margin: 50px auto;height: 50px;}
#redirectpage {width: 500px;margin: 10px auto;padding: 15px;text-align: center;}
#redirectpage h1{font: 40px Yekan,tahoma;color:#ffffff}
#redirectpage h2{font: 20px Yekan,tahoma;color:#ffffff}
#redirectpage p{margin:20px;font: 15px Yekan,tahoma;color: #ffffff;}
#redirectpage a.redirectme {margin: 15px;background: #25de5e;color: #ffffff;border-right: 10px solid #14a841;font: 16px Yekan,tahoma;transition: all 0.5s ease 0s;text-shadow: 1px 1px 0px #aaf2d4;border-radius: 2px;padding: 10px 30px 8px 10px;}
#redirectpage a:hover {opacity: 0.8;}
span.shuffle {background: url('shuffle.png') no-repeat scroll transparent;width: 24px;height: 19px;margin: 4px -29px 0px;position: absolute;}
@media screen and (max-width:530px){#redirectpage {width:100%}}
</style>
</head>
<body>
<div id="redirectpage">
<h1>انتقال دهنده لینک</h1>
<h2>در حال انتقال به صفحه جدید</h2>
<p style="margin-bottom: 30px;">در صورتی که تا 10 ثانیه به صفحه جدید منتقل نشدید روی دکمه پایین کلیک کنید</p>
<p><a class="redirectme" href="<?php $url=$_GET['url']; echo"$url"; ?>"><span class="shuffle"></span>کلیک کنید</a></p>
</div>
</body>
</html>

barnamenevis2016

جمعه 29 خرداد 1394, 11:53 صبح

سلام....کد زیر کد جاوا اسکریپت لازم برای اینکاره:

<script>
function timing(){
ele = document.getElementById('url_timing');
ele.innerHTML = ele.innerHTML -1;
if(ele.innerHTML!=0)setTimeout("timing()",1000)
}
setTimeout("timing()",1000)
</script>
کد بالا می آد محتوی مقدار درون تگی با آی دی url_timing رو چک می کنه و هر ثانیه یکی از مقدار اون کم می کنه تا اینکه به صفر رسیده و اینکار رو متوقف می کنه...و نکته اصلی کد بالا استفاده از تابع setTimeout در اون هست که این تابع تعریف می کنه پس از مدت فلان ثانیه (هر 1000 که اونجا زدم معادل یک ثانیه است) فلان تابع دلخواه رو اجرا کنه....حالا اون تگ با آی دی url_timing رو باید در مکانی که دوس دارید قرار بدید...یعنی تگ زیر رو :

<b id="url_timing">10</b>
فقط اینو بگم که کد بالا و یا تگ بالا رو باید قبل از کد جاوا اسکریپتتون قرار بدید...

mojtabakhazaeli

شنبه 13 تیر 1394, 23:28 عصر

سلام....کد زیر کد جاوا اسکریپت لازم برای اینکاره:

<script>
function timing(){
ele = document.getElementById('url_timing');
ele.innerHTML = ele.innerHTML -1;
if(ele.innerHTML!=0)setTimeout("timing()",1000)
}
setTimeout("timing()",1000)
</script>
کد بالا می آد محتوی مقدار درون تگی با آی دی url_timing رو چک می کنه و هر ثانیه یکی از مقدار اون کم می کنه تا اینکه به صفر رسیده و اینکار رو متوقف می کنه...و نکته اصلی کد بالا استفاده از تابع setTimeout در اون هست که این تابع تعریف می کنه پس از مدت فلان ثانیه (هر 1000 که اونجا زدم معادل یک ثانیه است) فلان تابع دلخواه رو اجرا کنه....حالا اون تگ با آی دی url_timing رو باید در مکانی که دوس دارید قرار بدید...یعنی تگ زیر رو :

<b id="url_timing">10</b>
فقط اینو بگم که کد بالا و یا تگ بالا رو باید قبل از کد جاوا اسکریپتتون قرار بدید...
سلام یک سوال دارم میشه کاری کنم که تا قبل از ده ثانیه اینیبل یک باتن فالس باشه؟
ادرس صفحه
ent.paalet.ir

SCoder

چهارشنبه 17 تیر 1394, 22:14 عصر

می توانی با قرار دادن عدد 10 در یک span با id=clock وسپس قرار دادن این کد script در بخش head عدد 10 رو به صورت انیمیشن دربیاری ینی 10 9 8 و الی آخر...<script>
var Clock=new function()
{
//these are props
this.id=null;
this.span=null;//this is a ref to the div
this.sec=null;//this is the total seconds

//methods
this.init=function()
{
var self=Clock;
self.id='clock';
self.span=document.getElementById(self.id);
self.span.innerHTML='';
self.sec=10;
self.span.innerHTML=''+self.sec;
self.animate();
}
this.animate=function()
{
var self=Clock;
if (self.sec > 0) setTimeout(self.countBack,1000);
}
this.countBack=function()
{
var self=Clock;
self.sec--;
self.printOut();
self.animate();
}
this.printOut=function()
{
var self=Clock;
self.span.innerHTML='';
self.span.innerHTML=''+self.sec;
}
}

window.onload=Clock.init;
</script>

و این هم کد خودت با اعمال تغییرات ...

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>انتقال دهنده پالت</title>
<meta name="keywords" content="paaler,پالت">
<meta name="description" content="پالت">
<meta http-equiv="refresh" content="10;URL=<?php $url=$_GET['url']; echo $url; ?>" />
<link href="favicon.png" rel="shortcut icon">
<style>
@font-face{font-family:'Yekan';src:url('Fonts/BYekan.ttf') format('truetype'), url('Fonts/BYekan.eot?#') format('eot'), url('Fonts/BYekan.woff') format('woff');font-style:normal;font-weight:normal;}
*{border:0;padding:0;margin:0;}
body{direction:rtl;color:#34495e;background-image:url(http://s3.picofile.com/file/8194257384/back.png);
margin:0;padding:0;text-align:center;font:11px/1.9 tahoma;}
a{text-decoration:none;color:#34495e;transition:all 0.3s ease-out;}
a:hover{text-decoration:none;color:#3297da;}
.logo {background: url('logo.png') no-repeat;width: 200px;margin: 50px auto;height: 50px;}
#redirectpage {width: 500px;margin: 10px auto;padding: 15px;text-align: center;}
#redirectpage h1{font: 40px Yekan,tahoma;color:#fff}
#redirectpage h2{font: 20px Yekan,tahoma;color:#fff}
#redirectpage p{margin:20px;font: 15px Yekan,tahoma;color: #fff;}
#redirectpage a.redirectme {margin: 15px;background: #25de5e;color: #ffffff;border-right: 10px solid #14a841;font: 16px Yekan,tahoma;transition: all 0.5s ease 0s;text-shadow: 1px 1px 0px

#aaf2d4;border-radius: 2px;padding: 10px 30px 8px 10px;}
#redirectpage a:hover {opacity: 0.8;}
span.shuffle {background: url('shuffle.png') no-repeat scroll transparent;width: 24px;height: 19px;margin: 4px -29px 0px;position: absolute;}
@media screen and (max-width:530px){#redirectpage {width:100%}}
</style>
<script>
var Clock=new function()
{
//these are props
this.id=null;
this.span=null;//this is a ref to the div
this.sec=null;//this is the total seconds

//methods
this.init=function()
{
var self=Clock;
self.id='clock';
self.span=document.getElementById(self.id);
self.span.innerHTML='';
self.sec=10;
self.span.innerHTML=''+self.sec;
self.animate();
}
this.animate=function()
{
var self=Clock;
if (self.sec > 0) setTimeout(self.countBack,1000);
}
this.countBack=function()
{
var self=Clock;
self.sec--;
self.printOut();
self.animate();
}
this.printOut=function()
{
var self=Clock;
self.span.innerHTML='';
self.span.innerHTML=''+self.sec;
}
}

window.onload=Clock.init;
</script>
</head>
<body>
<div id="redirectpage">
<h1>انتقال دهنده لینک</h1>
<h2>در حال انتقال به صفحه جدید</h2>
<p style="margin-bottom: 30px;">در صورتی که تا
<span id='clock'>10</span>
ثانیه به صفحه جدید منتقل نشدید روی دکمه پایین کلیک کنید</p>
<p><a class="redirectme" href="<?php $url=$_GET['url']; echo $url; ?>"><span class="shuffle"></span>کلیک کنید</a></p>
</div>
</body>
</html>