纯JavaScript实现“返回顶部”和“评分”，“分享”等小功能
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实现“返回顶部”和“评分”，“分享”等小功能的更多相关文章
- DIY 博客全文界面的推荐、反对、加关注、返回顶部、快速评论等小功能的集成
博客园已经很不错了,但作为比较“挑剔”的用户,在使用的过程中,还是有一些地方不爽的. 我不是一个专业的前台程序员,也只能凭借自己蹩脚的JS和CSS知识完成对页面的小改造(专业的大虾莫要鄙视呀..). ...
- 使用Javascript实现返回顶部功能。
为了提高网站的浏览体验及友好度,相信大部分网站需要一个返回顶部的按钮,如果使用传统的a标记,再做一个div加上链接的话,非常麻烦,不仅每个页面都需要添加,而且不能实现非常智能的效果及简化维护时间. 下 ...
- JavaScript之返回顶部
为了弄这个Hexo,今天又是坐在电脑面前待了一天( ⊙ o ⊙ ),老是出问题,在百度上也试验了很多方法,还是没弄好,诶...身心疲惫甚是乏累啊~~~ 算了,这个Hexo先不弄,还是安分点吧,在Hex ...
- JavaScript/Jquery返回顶部代码
<!DOCTYPE html> <html> <head> <title>返回顶部</title> <meta charset=&qu ...
- JavaScript实现返回顶部效果
仿淘宝回到顶部效果 需求:当滚动条到一定位置时侧边栏固定在某个位置,再往下滑动到某一位置时显示回到顶部按钮.点击按钮后页面会动态滑到顶部,速度由快到慢向上滑. 思路: 1.页面加载完毕才能执行js代码 ...
- 纯JavaScript实现的调用设备摄像头并拍照的功能
这篇文章本来不在Jerry计划内的,咱们SAP中国研究院今天已经正式上班了,Jerry也回到工作岗位开始搬砖了. 今天一位同事问我关于本文标题描述的功能如何实现,Jerry在网上随便搜了一下,类似的例 ...
- 原生态纯JavaScript 100大技巧大收集---你值得拥有
1.原生JavaScript实现字符串长度截取 function cutstr(str, len) { var temp; var icount = 0; var patrn = /[^\x00-\x ...
- JQuery 实现返回顶部
1.添加html <div id="back-to-top"> <a href="javascript:;" title="返回顶部 ...
- javascript返回顶部几种代码总结
纯js代码 /** * 回到页面顶部 * @param acceleration 加速度 * @param time 时间间隔 (毫秒) **/ function goTop(acceleration ...
- 添加“返回顶部”小图标按钮的JS(JavaScript)代码详解
如何给自己的网站添加方便快捷的"返回顶部"小图标按钮呢?如下图: JS源代码: /** * JavaScript脚本实现回到页面顶部示例 * @param acceleration ...
随机推荐
- Java实现动态数组【数据结构与算法】
1.数组 类型固定.长度固定 连续的内存空间 顺序存储.随机读取 查询快.新增删除慢.最好初始化的时候就指定数组大小.这样就可以避免一定的数组扩容出现的内存消耗. import java.util.A ...
- GeminiDB Cassandra接口新特性FLASHBACK发布：任意时间点秒级闪回
本文分享自华为云社区<GeminiDB Cassandra接口新特性FLASHBACK发布:任意时间点秒级闪回>,作者: GaussDB 数据库. 技术背景 数据库作为现代信息系统的核心组 ...
- #轮廓线dp，博弈论#洛谷 4363 [九省联考 2018] 一双木棋 chess
题目传送门 分析 菲菲想让答案尽量大,牛牛想让答案尽量小. 很天真的一种想法就是设 \(dp[i][j]\) 表示现在选择 \((i,j)\) 的答案. 但是这样有一个弊端就是并不知道其它位置怎么选择 ...
- #DP#CF9D How many trees?
题目 用\(n\)个点组成二叉树,问高度\(\geq h\)的有多少个. 分析 首先前缀和相减就能得到答案,做dp 设\(dp[n][h]\)表示节点数为\(n\),高度不超过\(h\)的树的个数 那 ...
- #Multi-SG#HDU 3032 Nim or not Nim?
题目 有\(n\)堆石子,每次可以从一堆中取出若干个或是将一堆分成两堆非空的石子, 取完最后一颗石子获胜,问先手是否必胜 分析 它的后继还包含了分成两堆非空石子的SG函数,找规律可以发现 \[SG[x ...
- OpenHarmony创新赛丨报名倒计时，超强秘籍带你直通大奖！
OpenHarmony创新赛报名倒计时开始啦! 设于开放原子全球开源大赛下的OpenHarmony创新赛,目前正在如火如荼地进行赛事招募中!这次大赛围绕创新应用.商显行业.金融行业三大赛题,邀请来 ...
- Hi3861 通过UART串口协议与其它开发板进行通信
一.搭建编译环境 1.下载虚拟机VMware和Ubuntu20.0.14 下载 VMware Workstation Pro | CN https://www.vmware.com/cn/produc ...
- 技术文档指南：版本说明、网站文案、FAQ、案例研究与内容优化
Release Notes 和产品公告 Release Notes 通常是软件文档的一部分,是在新产品发布时提供给用户的简短.高级摘要.它们包含有关更新的重要信息,包括新功能.增强功能.错误修复,通常 ...
- react native 0.73 配置 react-native-fs
安装react-native-fs npm npm install react-native-fs --save yarn yarn add react-native-fs 安卓配置 android/ ...
- ViT：拉开Trasnformer在图像领域正式挑战CNN的序幕 | ICLR 2021
论文直接将纯Trasnformer应用于图像识别,是Trasnformer在图像领域正式挑战CNN的开山之作.这种简单的可扩展结构在与大型数据集的预训练相结合时,效果出奇的好.在许多图像分类数据集上都 ...