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. 冒泡排序【Java】

    1 public class Paixu { 2 public static void main(String args[]) { 3 int myNum[] = {2,6,4,1,5}; 4 //从 ...

  2. #最大密度子图，0/1分数规划#UVA1389 Hard Life

    题目 \(n\) 个点,\(m\) 条边的一个无向图,问导出子图的边数除以点数的最大值 分析 考虑二分这个答案,也就是0/1分数规划之后转换成 \(E-mid*V>0\) 这个问题虽然可以精确到 ...

  3. SQL PRIMARY KEY 约束- 唯一标识表中记录的关键约束

    SQL NOT NULL 约束 SQL NOT NULL 约束用于强制确保列不接受 NULL 值.这意味着该字段始终包含一个值,而不允许插入新记录或更新记录时不提供此字段的值. 在 CREATE TA ...

  4. 《深入理解Java虚拟机》读书笔记：运行时栈帧结构

    代码编译的结果从本地机器码转变为字节码,是存储格式发展的一小步,却是编程语言发展的一大步. 一.概述 在Java虚拟机规范中制定了虚拟机字节码执行引擎的概念模型,这个概念模型成为各种虚拟机执行引擎的统 ...

  5. HDC2021技术分论坛：跨端分布式计算技术初探

    作者:zhengkai,分布式通信首席技术专家 当今的移动应用都向着智能化和多样化方向发展,例如AI辅助,VR/AR应用,沉浸式游戏等.然而现实中的移动设备,因为便携性要求受限于尺寸.电池容量以及温控 ...

  6. Batch Normalization 和 DropOut

    Batch-Normalization https://www.cnblogs.com/guoyaohua/p/8724433.html 有几点需要注意: \(x^{(k)}\)指的是t层的输入. 也 ...

  7. jenkins 持续集成和交付 —— 邮箱服务器配置（九）

    前言 简介邮箱服务器的配置,让jenkins在构建完成后,能有一个邮箱结果通知到我们,这样就不用每次盯着jenkins 看是否完成了. 正文 1.安装插件 安装下面这个插件. Email Extens ...

  8. c# semaphoreSlim限制线程数

    前言 我们在使用线程的时候,如果多个线程数去访问一个资源的时候,那么是非常影响程序的运行的,因为如果有写的操作,那么需要写锁,那么线程都会堵在同一个地方,那么我们可以限制一下访问一个资源的线程数. 正 ...

  9. Kotlin 使用协程编写高效的并发程序

    概念: 轻量级的线程 协程允许我们在单线程模式下模拟多线程编程的效果,代码执行时的挂起与恢复完 全是由编程语言来控制的,和操作系统无关.这种特性使得高并发程序的运行效率得到了极大的提升. 依赖库: d ...

  10. Go 单元测试之mock接口测试

    目录 一.gomock 工具介绍 二.安装 三.使用 3.1 指定三个参数 3.2 使用命令为接口生成 mock 实现 3.3 使用make 命令封装处理mock 四.接口单元测试步骤 三.小黄书Se ...