当前位置:首页 > 网页设计 >Javascript >

js实现显示来访者的停留时间

发布时间:2020-06-19 17:47:35 作者:佚名 阅读:(22)

最近有一些小伙伴问有没有一些好的特效,让自己的网站增加一下效果,今天吾爱编程就为大家分享两个Javasript特效:字符随鼠标漂动和显示访问者的停留时间,有需要的小伙伴可以参考一下:

1、字符随鼠标漂动

  这个特效可以让你的鼠标在网页上移动时,在鼠标的后面会有你指定的文字跟着漂动,这个特效足可以让你的主页新鲜一阵了。下面就是它的源代码。

  (1)、在<head>与</head>之间添加下面的js和css代码:

<style>
    .spanstyle {
        position: absolute;
        visibility: visible;
        top: -50px;
        font-size: 10pt;
        font-family: Verdana;
        font-weight: bold;
        color: red;
    }
</style>
<script>
    var x, y
    var step = 20
    var flag = 0
    var message = "吾爱编程 https://www.itbiancheng.com"
    message = message.split("") var xpos = new Array() for (i = 0; i <= message.length - 1; i++) {
        xpos[i] = -50
    }
    var ypos = new Array() for (i = 0; i <= message.length - 1; i++) {
        ypos[i] = -50
    }

    function handlerMM(e) {
        x = (document.layers) ? e.pageX : document.body.scrollLeft + event.clientX y = (document.layers) ? e.pageY : document.body.scrollTop + event.clientY flag = 1
    }

    function makesnake() {
        if (flag == 1 && document.all) {
            for (i = message.length - 1; i >= 1; i--) {
                xpos[i] = xpos[i - 1] + step ypos[i] = ypos[i - 1]
            }
            xpos[0] = x + step ypos[0] = y
            for (i = 0; i < message.length - 1; i++) {
                var thisspan = eval("span" + (i) + ".style") thisspan.posLeft = xpos[i] thisspan.posTop = ypos[i]
            }
        } else if (flag == 1 && document.layers) {
            for (i = message.length - 1; i >= 1; i--) {
                xpos[i] = xpos[i - 1] + step ypos[i] = ypos[i - 1]
            }
            xpos[0] = x + step ypos[0] = y
            for (i = 0; i < message.length - 1; i++) {
                var thisspan = eval("document.span" + i) thisspan.left = xpos[i] thisspan.top = ypos[i]
            }
        }
        var timer = setTimeout("makesnake()", 30)
    }
</script>

    (2)、把<body>修改为:

<body onLoad="makesnake()" style="width:100%;overflow-x:hidden;overflow-y:scroll">

  (3)最后在<body>和</body>之间加入下面的js:

<script>
    for (i = 0; i <= message.length - 1; i++) {
        document.write("<span id='span" + i + "' class='spanstyle'>")
        document.write(message[i]) document.write("</span>")
    }
    if (document.layers) {
        document.captureEvents(Event.MOUSEMOVE);
    }
    document.onmousemove = handlerMM;
</script>

  这样一个效果不错的Javasript特效就做成了,只是你要把上面有下划线地方的文字换成你的内容,否则你网页上就会漂出我的主页名称和地址哟。怎么样,很酷吧。

2、 显示访问者的停留时间

这个特效可以让你的主页出现一个数字时钟,上面能显示访问者在你的主页上所停留的时间(见图一)。下面是这个Javasript特效的源代码。

(1)、在<head>与</head>之间加上以下js:

<script LANGUAGE="JAVASCRIPT">
    var ap_name = navigator.appName;
    var ap_vinfo = navigator.appVersion;
    var ap_ver = parseFloat(ap_vinfo.substring(0, ap_vinfo.indexOf('(')));
    var time_start = new Date();
    var clock_start = time_start.getTime();
    var dl_ok = false;

    function init() {
        if (ap_name == "Netscape" && ap_ver >= 3.0) dl_ok = true;
        return true;
    }

    function get_time_spent() {
        var time_now = new Date();
        return ((time_now.getTime() - clock_start) / 1000);
    }

    function show_secs() // show the time user spent on the side 
        {
            var i_total_secs = Math.round(get_time_spent());
            var i_secs_spent = i_total_secs % 60;
            var i_mins_spent = Math.round((i_total_secs - 30) / 60);
            var s_secs_spent = "" + ((i_secs_spent > 9) ? i_secs_spent : "0" + i_secs_spent);
            var s_mins_spent = "" + ((i_mins_spent > 9) ? i_mins_spent : "0" + i_mins_spent);
            document.time.time_spent.value = s_mins_spent + ":" + s_secs_spent;
            window.setTimeout('show_secs()', 1000);
        }
</script>

(2)、把<body>修改为以下代码:

<body onLoad="init(); window.setTimeout('show_secs()',1);">

(3)、在你<body>与</body>之间加上以下代码:

<form name="time" onSubmit="0">
    <p>你的停留時间为:
        <br>
        <input type="text" name="time_spent" size="7" onFocus="this.blur()" BGCOLOR="#FFFFCC">
</form>

这样你的主页上就有了一个可以记载访问者停留时间的时钟了。

以上就是吾爱编程为大家介绍的字符随鼠标漂动和显示访问者的停留时间js特效的代码,了解更多相关文章请关注吾爱编程网!

欢迎分享转载→ js实现显示来访者的停留时间

© 2015-2019 - 吾爱编程网 版权所有 苏ICP备18033726号-1关于我们 - 网站声明 - 联系我们