登录 注册

登录

问题 寻求数字滚动增加的插件

更多
2017年04月01日 08:47 #1 作者: 李涛
老白,又来讨教了,现在想在网页顶部加一个数字不断滚动增加的效果。
类似这个网页底部的效果:https://www.bluejeans.com/

可能要翻墙才能看到,我截了个图。
额,新版页面不会插入图片。
就是一排数字,最后面的数字向上滚动,然后整体不断增加。

登录 或者   注册一个会员帐号 来参与讨论

更多
2017年04月02日 14:30 #2 作者: Joomla之门
好像还没有这样的 Joomla 扩展。不过,考虑到Joomla支持“自定义HTML”代码嵌入,你可以在网上搜索这种脚本代码(应该是一个非常简单的 JavaScript 语句,实现 n=n+1 而已),然后把这个代码插入到“自定义 HTML”模块里面即可。

付费下载 Joomla 3 扩展汉化版: 我要付费支持 Joomla 之门!

登录 或者   注册一个会员帐号 来参与讨论

更多
2017年04月02日 15:19 - 2017年04月03日 10:40 #3 作者: Joomla之门
简单分析了一下那个网站的源代码,发现 它是用 Drupal 搭建的 。那个计数器正是通过 JavaScript 实现的,在某个 JS 文件(文件名动态变化,因为网站启用了 JS 合并、压缩、缓存)中找到了相关代码片段:
function getRandomInt(min,max){return Math.floor(Math.random()*(max-min+1))+min}function updateMinutes(){var current=stripCommasToInt(minDiv.html());return current+=getRandomInt(minutesPerSec-2,minutesPerSec+2),numberWithCommas(current)}if($("body").hasClass("front")){var minDiv=$(".minutes_counter"),originalBjnMinutes=1422468482,originalSeconds=1460065339,minutesPerSec=4;Date.now||(Date.now=function(){return(new Date).getTime()});var utcSeconds=Math.floor(Date.now()/1e3),timeElapsed=utcSeconds-originalSeconds,currentTotal=timeElapsed*(10*minutesPerSec)+originalBjnMinutes;minDiv.html(numberWithCommas(currentTotal)).addClass("show");setInterval(function(){minDiv.html(updateMinutes())},100)}}),

你可以参考一下。

那个数字的初始值是 1422468482,你第一次访问该页面的时候,数字从 1422468482 开始增加,网页关闭时最后一个值会保存在 cookie 里面,下次再打开该网页,就会从上次保存的值继续增加;假设你清空浏览器缓存(患者换一个从来没访问过该页面的浏览器来访问),那个数字又会从 1422468482 开始。所以很显然这并不是“真实”统计结果,而是一个数字游戏。

我之前对这个“初始值”的理解有误。这个初始值应该是一个过去的固定日期、固定时间点的值,换算成了分钟数。每次打开页面的时候,都是用当前时间与该“初始值”做“减法”,计算出来的差值就是当前要显示的数字 —— 这样可以避免在数据库中存储计数结果的必要,也避免了在 cookie 中储存当前值的必要,更避免了不同访客打开网页时看到数字从同一个原点重新递增。由于时间永远是增加的,所以每个访客打开该页面时,“当前时间”与“初始时间”的差值永远是增加的,从而决定了那个显示的数字永远是递增的。

付费下载 Joomla 3 扩展汉化版: 我要付费支持 Joomla 之门!
最后修改: 2017年04月03日 10:40 由 Joomla之门.

登录 或者   注册一个会员帐号 来参与讨论

更多
2017年04月03日 10:44 #4 作者: Joomla之门
今天在网上找到一个代码,与上面的 “当前时间 - 初始时间 = 差值 = 显示数字” 其思路是完全一样的。经测试可以在页面上显示出递增的数字,刷新页面、重开浏览器等等都不影响数字“暗中仍在递增”。请按照以下步骤测试:

在 Joomla 3 后台“扩展 -> 模块管理”中,新建一个模块,类型选择为“自定义 HTML”,打开模块参数之后,将输入框的编辑器切换成源代码模式,然后填写下列代码:
<script type="text/javascript">
function countup(startingdate, base){
this.currentTime=new Date()
this.startingdate=new Date(startingdate)
this.base=base
this.start()
}
countup.prototype.oncountup=function(){}
countup.prototype.start=function(){
var thisobj=this
this.currentTime.setSeconds(this.currentTime.getSeconds()+1)
var timediff=(this.currentTime-this.startingdate)/1000
var secondfield=Math.floor((timediff))
var result={seconds:secondfield}
this.oncountup(result)
setTimeout(function(){thisobj.start()}, 1000) 
}
</script>
 
<p>这里输入数字上面的文字</p>
 
<div id="holder" class="dongtaishuzi">&nbsp;</div>
<script type="text/javascript">
var startDate=new countup("February 4, 2010 14:41:00", "seconds") // 修改第一个双引号之内的日期就能改变初始值
startDate.oncountup=function(result)
{
var mycountainer=document.getElementById("holder")
mycountainer.innerHTML=+result['seconds']
}
</script>
 
<p>这里输入数字下面的文字</p>

然后将这个模块发布到 Joomla 网站前台。刷新前台看效果。代码里面已经注释了修改初始值的方法 —— 改变初始值,就能实现你想“从多大的数字开始递增”。

付费下载 Joomla 3 扩展汉化版: 我要付费支持 Joomla 之门!

登录 或者   注册一个会员帐号 来参与讨论

更多
2017年04月06日 09:45 #5 作者: 李涛
老白,太感谢了,这么费心的帮忙解答,我试试,麻烦了!

登录 或者   注册一个会员帐号 来参与讨论