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>

纯JavaScript实现“返回顶部”和“评分”，“分享”等小功能的更多相关文章

  1. DIY 博客全文界面的推荐、反对、加关注、返回顶部、快速评论等小功能的集成

    博客园已经很不错了,但作为比较“挑剔”的用户,在使用的过程中,还是有一些地方不爽的. 我不是一个专业的前台程序员,也只能凭借自己蹩脚的JS和CSS知识完成对页面的小改造(专业的大虾莫要鄙视呀..). ...

  2. 使用Javascript实现返回顶部功能。

    为了提高网站的浏览体验及友好度,相信大部分网站需要一个返回顶部的按钮,如果使用传统的a标记,再做一个div加上链接的话,非常麻烦,不仅每个页面都需要添加,而且不能实现非常智能的效果及简化维护时间. 下 ...

  3. JavaScript之返回顶部

    为了弄这个Hexo,今天又是坐在电脑面前待了一天( ⊙ o ⊙ ),老是出问题,在百度上也试验了很多方法,还是没弄好,诶...身心疲惫甚是乏累啊~~~ 算了,这个Hexo先不弄,还是安分点吧,在Hex ...

  4. JavaScript/Jquery返回顶部代码

    <!DOCTYPE html> <html> <head> <title>返回顶部</title> <meta charset=&qu ...

  5. JavaScript实现返回顶部效果

    仿淘宝回到顶部效果 需求:当滚动条到一定位置时侧边栏固定在某个位置,再往下滑动到某一位置时显示回到顶部按钮.点击按钮后页面会动态滑到顶部,速度由快到慢向上滑. 思路: 1.页面加载完毕才能执行js代码 ...

  6. 纯JavaScript实现的调用设备摄像头并拍照的功能

    这篇文章本来不在Jerry计划内的,咱们SAP中国研究院今天已经正式上班了,Jerry也回到工作岗位开始搬砖了. 今天一位同事问我关于本文标题描述的功能如何实现,Jerry在网上随便搜了一下,类似的例 ...

  7. 原生态纯JavaScript 100大技巧大收集---你值得拥有

    1.原生JavaScript实现字符串长度截取 function cutstr(str, len) { var temp; var icount = 0; var patrn = /[^\x00-\x ...

  8. JQuery 实现返回顶部

    1.添加html <div id="back-to-top"> <a href="javascript:;" title="返回顶部 ...

  9. javascript返回顶部几种代码总结

    纯js代码 /** * 回到页面顶部 * @param acceleration 加速度 * @param time 时间间隔 (毫秒) **/ function goTop(acceleration ...

  10. 添加“返回顶部”小图标按钮的JS(JavaScript)代码详解

    如何给自己的网站添加方便快捷的"返回顶部"小图标按钮呢?如下图: JS源代码: /** * JavaScript脚本实现回到页面顶部示例 * @param acceleration ...

随机推荐

  1. NOIP 2007 普及组

    NOIP 2007 普及组(DONE) 注:本文不附原题,可上Luogu有题对照查询. 1.CPU:即中央处理器,由运算器+控制器+寄存器组成,不含主板(但CPU是装在主板上的). 2.二维表即常见的 ...

  2. Scala 中断循环

    一.采用 Scala 自带的函数,退出循环 1 package com.atguigu.break 2 3 object TestBreak { 4 import scala.util.control ...

  3. Linux——ssh登录很慢解决方法

    1.背景 在同一机房中,有多台安装了CentOS 7操作系统的服务器,它们的配置除了IP地址不同外基本相同.这些服务器的资源利用率都不高,但在使用SSH连接时,发现有几台服务器连接速度较慢,可能需要等 ...

  4. .Net单元测试xUnit和集成测试指南(1)

    引言 在现代化的软件开发中,单元测试和集成测试是确保代码质量和可靠性的关键部分.ASP.NET Core 社区内提供了强大的单元测试框架,xUnit 是其中之一,它提供了简单.清晰和强大的测试功能,编 ...

  5. #线段树，矩阵乘法#洛谷 7453 [THUSCH2017] 大魔法师

    题目 分析 首先考虑如果修改操作都是单点修改怎么做, 以第一种修改为例那么就是 \[\left[\begin{matrix}A\\B\\C\\1\end{matrix}\right] \times \ ...

  6. #dfs,trie#洛谷 4341 [BJWC2010]外星联络

    题目 分析 首先时间复杂度\(O(n^2)\)可过,统计子串个数可以用trie或者更高级的方法 可以枚举所有的后缀,然后建一个trie,这样这个trie就可以记录全部的子串 关于字典序排序,深搜的时候 ...

  7. 快速加入Health Kit，一文了解审核流程

    HUAWEI Health Kit是为华为生态应用打造的基于华为帐号和用户授权的运动健康数据开放平台. 在获取用户授权后,开发者可以使用Health Kit提供的开放能力获取运动健康数据,基于多种类型 ...

  8. zbar：Qt调用zbar做条码识别

    编译: zbar Windows编译:https://gitee.com/vvvj/zbar-windows 下载下来后,直接使用vs来编译就可以了. zbar官网:https://zbar.sour ...

  9. 局部区块多个报表 TAB 页切换及局部区块的参数查询

    在企业的业务系统中,如何从纷繁复杂的数据中抽丝剥茧看到关键数据信息呢?一个重要的途径就是将企业和各部门运营中关键的 KPI 集中在一起显示,同时尽量省去在企业的各个业务系统中分别查找数据. 下面是我近 ...

  10. 面向切面编程AOP[一]（java 代码详解）

    前言 说句实话,在工作中,使用的aop不是特别多,但是特别重要,一般是辅助程序,在现代开发者辅助程序相当重要,比如说我们需要打印一些log,但是我们不可能去卸载我们的业务程序中,因为这太..... 正 ...