活动倒计时+fixed定位+跳转到本页指定位置

原创 2013年12月04日 14:30:00

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>position</title>
</head>

<body>
<?php 
 //实现php倒计时的功能
//php的时间是以秒算。js的时间以毫秒算  
 
date_default_timezone_set('PRC');
//date_default_timezone_set("Asia/Hong_Kong");//地区设置  
 
//配置每天的活动时间段  
$starttimestr = "2013-4-29 8:10:00"; 
$endtimestr = "2013-4-29 9:43:00"; 
 
$starttime = strtotime($starttimestr); 
$endtime = strtotime($endtimestr); 
$nowtime = time(); 
$lefttime = $endtime-$nowtime;
?> 
 
<script language="JavaScript"> 
var runtimes = 0; 
function GetRTime(){ 
var nMS = <?php echo $lefttime; ?>*1000-runtimes*1000; 
if (nMS>=0){ 
var nD=Math.floor(nMS/(1000*60*60*24))%24; 
var nH=Math.floor(nMS/(1000*60*60))%24; 
var nM=Math.floor(nMS/(1000*60)) % 60; 
var nS=Math.floor(nMS/1000) % 60; 
document.getElementById("RemainD").innerHTML=nD; 
document.getElementById("RemainH").innerHTML=nH; 
document.getElementById("RemainM").innerHTML=nM; 
document.getElementById("RemainS").innerHTML=nS; 
if(nMS==5*60*1000) 

alert("还有最后五分钟!"); 

runtimes++; 
setTimeout("GetRTime()",1000); 


window.onload=GetRTime; 
</script> 
 
<h4>距离活动开始还有 <strong id="RemainD"></strong>天 <strong id="RemainH"></strong>小时 <strong id="RemainM"></strong>分钟 <strong id="RemainS"></strong>秒</h4> 
<!--position:fixed是指悬浮框的位置相对于浏览器窗口固定-->
<!--onclick是指点击点击图片之后跳转到本页指定的位置-->
<div style="position:fixed; width:auto; top:300px; left:300px">
<img src="uploads/images/face/1.gif" onclick="location.href='#11'">
</div>
<div style="position:fixed; width:auto; top:330px; left:300px">
<img src="uploads/images/face/1.gif" onclick="location.href='#22'">
</div>
<div>看看效果</div>
<div>看看效果</div>
<div>看看效果</div>
<div>看看效果</div>
<div>看看效果</div>
<div>看看效果</div>
<div>看看效果</div>
<div>看看效果</div>
<div>看看效果</div>
<div>看看效果</div>
<div>看看效果</div>
<div>看看效果</div>
<div>看看效果</div>
<div>看看效果</div>
<div>看看效果</div>
<div>看看效果</div>
<div>看看效果</div>
<div>看看效果</div>
<div>看看效果</div>
<div>看看效果</div>
<div>看看效果</div>
<div id="11" style="color:red">变换下</div>
<div>看看效果</div>
<div>看看效果</div>
<div>看看效果</div>
<div>看看效果</div>
<div>看看效果</div>
<div>看看效果</div>
<div>看看效果</div>
<div>看看效果</div>
<div>看看效果</div>
<div>看看效果</div>
<div>看看效果</div>
<div>看看效果</div>
<div>看看效果</div>
<div>看看效果</div>
<div>看看效果</div>
<div>看看效果</div>
<div>看看效果</div>
<div>看看效果</div>
<div>看看效果</div>
<div>看看效果</div>
<div>看看效果</div>
<div>看看效果</div>
<div>看看效果</div>
<div>看看效果</div>
<div>看看效果</div>
<div>看看效果</div>
<div>看看效果</div>
<div>看看效果</div>
<div>看看效果</div>
<div>看看效果</div>
<div>看看效果</div>
<div>看看效果</div>
<div>看看效果</div>
<div>看看效果</div>
<div>看看效果</div>
<div>看看效果</div>
<div>看看效果</div>
<div>看看效果</div>
<div>看看效果</div>
<div>看看效果</div>
<div>看看效果</div>
<div>看看效果</div>
<div>看看效果</div>
<div>看看效果</div>
<div>看看效果</div>
<div>看看效果</div>
<div>看看效果</div>
<div>看看效果</div>
<div>看看效果</div>
<div>看看效果</div>
<div>看看效果</div>
<div>看看效果</div>
<div id="22" style="color:green">come on!!!</div>
<div>看看效果</div>
<div>看看效果</div>
<div>看看效果</div>
<div>看看效果</div>
<div>看看效果</div>
<div>看看效果</div>
<div>看看效果</div>
<div>看看效果</div>
<div>看看效果</div>
</body>
</html>

效果如如下(下面的时间显示是实时的):

活动倒计时+fixed定位+跳转到本页指定位置 - cuiruijunphp - 格式化。。。
活动倒计时+fixed定位+跳转到本页指定位置 - cuiruijunphp - 格式化。。。
 
 

 

倒计时自动关闭本页代码

  • 2008年12月26日 17:24
  • 869B
  • 下载

js跳转到指定div位置

  • 2017年07月21日 11:11
  • 313B
  • 下载

wap页活动倒计时

1.活动倒计时 2.商品倒计时(定时更换图片及位置) html: id="timer"> id="t_status"> id="goods" style="height: 41.52r...

splash页面定时跳转,引导页倒计时功能开发

splash页面定时器,引导页倒计时功能开发一、概述思绪乱飞 - - 1030一直以来都以为都不怎么在意更新博客,最近电脑加了固态硬盘,整理内存资料时发现,资料乱的一堆,乱七八糟,个人也有喜欢收集资...

圆形头像和倒计时引导页按钮点击跳转

一:布局界面     xmlns:tools="http://schemas.android.com/tools"     xmlns:app="http://schemas.android....

从一个页面跳转到另一个页面的指定位置(带平滑移动的效果)

从一个页面跳转到另一个页面的指定位置 如果不带平滑移动的效果 很容易 加个 锚点就行了  比如 想跳到 mao.aspx 的页面 的div id="s" 的位置    那么   只用  就可实现跳转到...

fullcalendar搜索事件并定位以及跳转到指定年月

日历日程和事件最后的需求就是检索和定位。以及日期的跳转。别看功能很简单,这项功能也不是大家都有的,下面腾讯的TIM主推的日程暂时也没这个功能啊。 在顶端自定义添加了检索框和跳转框。 ...

ViewPager无限自动轮播小圆点+网络加载图片+活动倒计时

代码; //网络请求的图片 private String[] image={"http://l2.51fanli.net//tuan//images//1//5806eac956808.jpg","h...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:活动倒计时+fixed定位+跳转到本页指定位置
举报原因:
原因补充:

(最多只允许输入30个字)