纯JavaScript实现“返回顶部”和“评分”，“分享”等小功能

最新推荐文章于 2025-08-04 11:13:30 发布

weixin_30248399

最新推荐文章于 2025-08-04 11:13:30 发布

阅读量58

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/cheryshi/p/8494453.html

本文介绍六种实用的前端技巧，包括返回顶部功能的实现、仿迅雷评分效果、页面分享功能、固定侧边栏广告、新窗口运行代码及事件冒泡处理。

1.返回顶部功能的实现

<!DOCTYPE html>
<html>
<head>
    <title>Back to Top</title>
    <style type="text/css">
        #btn{position:fixed;bottom: 0;right: 0px;}
    </style>
    <script type="text/javascript">
        window.onload=function(){
            var oBtn=document.getElementById('btn');
            var bSys=true;
            var timer=null;
            //如何检测用户拖动滚动条
            window.onscroll=function(){
                if(!bSys){
                    clearInterval(timer);
                }
                bSys=false;
            }
            oBtn.onclick=function(){
                timer=setInterval(function(){
                    var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
                    var iSpeed=Math.floor(-scrollTop/8);
                    if(scrollTop==0){
                        clearInterval(timer);
                    }
                    bSys=true;
                    document.documentElement.scrollTop=document.body.scrollTop=scrollTop+iSpeed;
                },100)
            }
        }
    </script>
</head>
<body style="height: 2000px;">
a11111
    <input id='btn' type="button" value="back to top">

</body>
</html>

2.仿迅雷评分的小功能

<!DOCTYPE html>
<html>
<head>
    <title>星级评论</title>
    <style type="text/css">
    *{margin:0;padding: 0;}
    #rank{width: 800px;margin: 0 auto;}
    li{list-style:none;background:url(images/timg.png)top center no-repeat;width: 140px;height: 150px; float: left;}
    .active{background:url(images/timg.png) -10px 0 no-repeat;}
    p{display: none;border:2px solid #000;text-align: center;}
</style>
<script type="text/javascript">
    var aData=['很差','较差','一般','推荐','力荐']
    window.onload=function(){
        var oDiv=document.getElementById('rank');
        var aLi=oDiv.getElementsByTagName('li');
        var oP=oDiv.getElementsByTagName('p')[0];
        for(var i=0;i<aLi.length;i++){
            aLi[i].index=i;
            aLi[i].onmouseover=function(){
                oP.style.display='block';
                oP.innerHTML=aData[this.index];
                for(var i=0;i<=this.index;i++){
                    aLi[i].className='active';
                }
            };
            aLi[i].onmouseout=function(){
                oP.style.display='none';
                for(var i=0;i<aLi.length;i++){
                    aLi[i].className='';
                }
            };
                aLi[i].onclick=function(){
            alert('评分为'+(this.index+1)*2+'分');
                    };

        };


    };
</script>
</head>

<body>
<div id="rank">
    <ul>
        <li></li>
        <li ></li>
        <li></li>
        <li></li>
        <li></li>
        <div style="clear: both;"></div>
    </ul>
    <p>一般</p>
</div>
</body>
</html>

3.分享小功能：平时我们会看到有些网站点击侧栏分享小按钮会有很多分享平台

<!DOCTYPE html>
<html>
<head>
    <title>share</title>
    <style type="text/css">
        #div1{width: 100px;height: 200px;background: #ccc;position: absolute;left:-100px;}
        #div1 span{width: 20px;height: 60px;line-height: 20px;text-align: center;left: 100px;top:70px;background: yellow;position: absolute;}
    </style>
    <script type="text/javascript">
window.onload=function(){
    var oDiv=document.getElementById('div1');
    oDiv.onmouseover=function(){
        startMove(0);
    }
    oDiv.onmouseout=function(){
        startMove(-100);
    }
}
        var timer=null;
        function startMove(iTarget){
            var oDiv=document.getElementById('div1');
            clearInterval(timer);
            timer=setInterval(function(){
                // var iSpeed=-10;
                if(oDiv.offsetLeft<iTarget){
                    iSpeed=10;
                }
                else{
                    iSpeed=-10;
                }
                if(oDiv.offsetLeft==iTarget){
                    clearInterval(timer);
                }else{
                    oDiv.style.left=oDiv.offsetLeft+iSpeed+'px';
                }
            },30)

        }
    </script>
</head>
<body>
<div id="div1">
    <span>分享到</span>
</div>
</body>
</html>

4.JS实现固定侧边栏广告，广告不会随着鼠标的滑动而变化位置

<!DOCTYPE html>
<html>
<head>
    <title>siderbarAd</title>
    <style type="text/css">
        #div1{width:100px;height:100px;position: absolute;right: 0;background: red;}
    </style>
    <script type="text/javascript">
    window.onresize=window.onload=window.onscroll=function(){
            var oDiv=document.getElementById('div1');
            var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
            var t=(document.documentElement.clientHeight-oDiv.offsetHeight)/2;
            oDiv.style.top=scrollTop+t+'px';
        }
    </script>
</head>
<body style="height: 2000px;">
    <div id="div1"></div>
</body>

5.有时候我们会看到打开新窗口就会运行里面的程序

点击run里面的程序代码会执行

<!DOCTYPE html>
<html>
<head>
    <title>open window</title>
    <script type="text/javascript">
        window.onload=function(){
            var oTxt=document.getElementById('txt1');
            var oBtn=document.getElementById('btn');
            oBtn.onclick=function(){
                //window.open('http://www.baidu.com/','_self');
                //document.write();
                var oNewWin=window.open('about:blank');
                oNewWin.document.write(oTxt.value);
            }
        }
    </script>
</head>
<body>
    <!-- <input id='btn' type="button" value="open"> -->
    <textarea id='txt1' rows="10" cols="40">
        <h1>Hello world!</h1>
    </textarea><br/>
    <input id='btn' type="button" value="run">
</body>
</html>

6.事件冒泡的处理：阻止事件冒泡可以防止触发父元素上面绑定的事件。

点击show会弹出一个div，点击其他地方div隐藏

<!DOCTYPE html>
<html>
<head>
    <title>shijianmaopao</title>
    <style type="text/css">
        #div1{width: 100px;height: 150px;background: red;display: none;}
    </style>
    <script type="text/javascript">
            window.onload=function(){
                var oBtn=document.getElementById('btn');
                var oDiv=document.getElementById('div1');
                oBtn.onclick=function(ev){
                    var oEvent=ev||event;
                    oDiv.style.display='block';
                    oEvent.cancelBubble=true;//阻止事件冒泡
                }; 
　　　　　　　　　//给整个document加点击事件
                document.onclick=function(){
                    oDiv.style.display='none';
                };
            };
    </script>

</head>
<body>
    <input id="btn" type="button" value="show">
    <div id="div1"></div>
</body>
</html>