关闭

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

389人阅读 评论(0) 收藏 举报

<!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 - 格式化。。。
 
 

 

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:43623次
    • 积分:1128
    • 等级:
    • 排名:千里之外
    • 原创:74篇
    • 转载:2篇
    • 译文:0篇
    • 评论:2条
    文章分类
    最新评论