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

最新推荐文章于 2021-04-06 14:37:17 发布
最新推荐文章于 2021-04-06 14:37:17 发布
阅读量574 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010242979/article/details/17118233
版权

<!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.οnlοad=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" οnclick="location.href='#11'">
</div>
<div style="position:fixed; width:auto; top:330px; left:300px">
<img src="uploads/images/face/1.gif" οnclick="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
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Android倒计时动画效果与locSDK_4.0定位例子
11-24
Android倒计时动画效果与locSDK_4.0定位例子
五、Appium-python-UI自动化之强制等待:sleep，隐式等待:implicitly_wait，显示等待:WebDriverWait()
旅行没有终点的博客
02-16 2648
一、强制等待sleep() ''' 设置固定休眠时间，单位为秒。 由python的time包提供, 导入 time 包后就可以使用。 缺点：不智能，使用太多的sleep会影响脚本运行速度。 ''' import time sleep(10) #等待10秒 二、隐式等待:implicitly_wait() ''' 由webdriver提供的方法，一旦设置，这个隐式等待会在WebD...
javascript实现倒计时
WOSHISUNXIANGFU的专栏
07-23 593
 http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml" lang="gbk"> 倒计时效果 var startTime = new Date();var EndTime=startTime.getTime()+6000*60*1000;   //getTime返回的是毫秒数fu
活动已结束，日期时间比较并弹框跳转
weixin_30800987的博客
12-16 120
var now = new Date(), 　　end = new Date("2014/12/16 10:00"); if(now > end){ var html = '<div id="mbox_overlay" class="mbox_overlay"></div>'+ ...
javascript实现促销倒计时+fixed固定在底部
12-07
代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ... <head> <... charset=UTF-8″ /> <... #lefttime3 { backgroun
Android利用CountDownTimer实现倒计时功能 Android实现停留5s跳转到登录页面
08-29
主要为大家详细介绍了Android利用CountDownTimer实现倒计时功能，Android实现停留5s跳转到登录页面，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
HTML+CSS+JS 春节倒计时跳转烟花特效
02-20
春节倒计时 倒计时归零时 自动跳转至烟花效果
开源高考倒计时+语基展示工具 1.2版本
03-14
语基版块会在每次程序启动时随机选择一条进行展示，也可在菜单选择“下一随机”切换或“跳转指定”跳到指定一条。 程序默认不会自启，可通过菜单设置或取消。 关于中展示了作者的吾爱账号以及程序更新日志。 自带...
php 时间格式 毫秒,php获取当前时间的毫秒数详解
weixin_28893221的博客
03-10 611
php获取当前时间的毫秒数详解var runtimes = 0;function GetRTime(){var nMS = *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/...
JS实现倒计时结束后跳转到指定页面
@芈文 的博客
12-03 1482
<body> <p><span id="con">3</span>秒后页面跳转<p> </body> <script> var con = document.getElementById("con"); var i = 3; var num ...
php 限时活动,限时活动
weixin_39559486的博客
04-06 83
date_default_timezone_set('PRC');$starttimestr ="08:00:00";$endtimestr ="22:00:00";$starttime = strtotime($starttimestr);$endtime =strtotime($endtimestr);$nowtime=time();if($nowtime < $starttime){d...
JavaScript实现页面到滚动到指定位置执行某些操作
热门推荐
L-YASHU
08-07 4万+
使用JavaScript实现页面滑动到指定位置加载动画。 若页面滚动到class名为group-pic的元素的位置时开始加载 $(document).ready(function(){ var a,b,c; a = $(window).height(); //浏览器窗口高度 var group = $(".group-pic"); $(window).
让页面在指定时间之后跳转代码
cheng198938的博客
07-23 1053
让页面在指定时间之后跳转代码: 本章节介绍一下如何让页面在指定的时间后跳转，使用javascript能够很轻松的实现，当然如果使用更简单的方式的话，可以使用头部标签实现，代码如下: 将以上代码放入头部即可，content里面的第一个数字参数是规定时间，单位是秒，也就是多少秒之后就会进行跳转，url规定跳转的目标地址。 原文地址是:http://www.51texiao
JS精确到毫秒的倒计时
pan_junbiao的博客
07-22 1万+
JS精确到毫秒的倒计时 1、页面HTML代码 <div id="CountMsg"> 今天距离 <strong id="EndTimeMsg"></strong> 还有 <strong id="RemainD">0</strong>天 <strong id="RemainH">00...
postionfixed固定_js滚动到指定位置再进行固定定位(position:fixed)
weixin_26938645的博客
12-23 434
在写js交互效果时,遇到一个问题场景,想让某部分div一开始是固定的,当滚动一定距离的时候,这部分div就开始固定定位(position:fixed),查了网上的资料后,自己已经写出了这个交互效果,但是还有一个小bug,bug如下当滚动到最底部的时候,红色标注部分会超出底部界限范围,我程序的思路是判断滚动条距顶部的距离scrollTop的范围值,当滚动距离超过一定范围距离的时候,给后侧部分加上po...
在指定的时间后跳转到指定的页面
*童稚的心*
07-13 2823
 在示例中，我设置了5秒后将跳转到另一个页面，然后过2秒再跳转回来@ page contentType="text/html;charset=gb2312" %>html>head>meta http-equiv="Content-Type" content="text/html; charset=gb2312">meta HTTP-EQUIV=REFRESH CONTENT=5; UR
html中利用setTimeout实现一定时间后自动跳转
奔跑的菜鸡
03-22 669
<html> <head> <meta charset="utf-8"> <title>错误提示</title> <link href="https://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap.min.css" rel="styleshee...
uni-app启动页+3秒倒计时跳转(vue3+ts)
最新发布
08-18
你可以使用uni-app的生命周期钩子函数和定时器来实现启动页和倒计时跳转的功能。下面是一个示例代码，可以在uni-app中使用Vue3和TypeScript： ```vue template> <!-- 这里是启动页的内容 --> import { ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值