纯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 ...
随机推荐
- Azkaban 2.5 Documentation
Overview Azkaban was implemented at LinkedIn to solve the problem of Hadoop job dependencies. We had ...
- #背包，位运算#洛谷 3188 [HNOI2007]梦幻岛宝珠
题目 分析 既然对于每个\(w_i\)都能被分解为\(a*2^b\), 那么考虑维护关于\(b\)的背包,再将关于\(b\)的背包统计为关于\(b+1\)的背包 代码 #include <cst ...
- C#_面试题2
1 :维护数据库的完整性.一致性.你喜欢用触发器还是自写业务逻辑?为什么答:尽可能用约束(包括CHECK.主键.唯一键.外键.非空字段)实现,这种方式的效率最好:其次用触发器,这种方式可以保证无论何种 ...
- C语言 06 无符号数
所有的数据底层都是采用二进制来进行保存的. 第一位用于保存符号位. 如果不考虑这个符号位,那么所有的数都是按照正数来表示. 比如考虑了符号位的 char 类型: 考虑符号表示范围:-128 ~ 127 ...
- openGauss数据库扩容指导
前置条件 当前集群状态正常 操作步骤 1.新节点创建用户和用户组,注意需要与当前集群的用户与用户组一致,密码也要保持一致.假设当前集群用户为 omm. 2.检查新节点环境变量,清理和 openGaus ...
- 域名之A记录,CNAME,NS联系和区别
域名解析中常常涉及:A记录,CNAME,NS 1. A记录 又称IP指向,用户可以在此设置子域名并指向到自己的目标主机地址上,从而实现通过域名找到服务器.说明:指向的目标主机地址类型只能使用IP地址; ...
- 开发指导—利用CSS动画实现HarmonyOS动效（一）
注:本文内容分享转载自HarmonyOS Developer官网文档 一. CSS语法参考 CSS是描述HML页面结构的样式语言.所有组件均存在系统默认样式,也可在页面CSS样式文件中对组件.页面自 ...
- nginx重新整理——————nginx 的设计模型[八]
前言 简单介绍一下nginx的设计模型,对我们设计程序还是有一定帮助的. 正文 这里先列一下模型哈,后面有深入篇,介绍的比较清楚. nginx 的处理模型: nginx 进程模型: 可以看到下面列出了 ...
- 重新点亮linux 命令树————用户和用户组的配置文件[八]
前言 简单整理一下 正文 首先看下vim /etc/passwd 这个东西. 可以看到这些就是我们的用户表. 刚才我们创建的user1就在末尾了. 那么下面有这个x:1001:1001 这个是什么意思 ...
- signalr 应用于微信小程序（二）
前言 本节基于一,为2017年写的脚本库. 正文 我们连接的是websocket那么我们需要看的是ws: 这里看到需要的参数其实只要connecttoken我们是没有的,那么如果得到的呢? 是网络请求 ...