纯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 ...
随机推荐
- AtCoder Beginner Contest 347
AT link Problem A and B 略. Problem C 按照模 \(a + b\) 分类,记录最大值和最小值,如果差值小于等于假期时间即可,否则还需要判断按照 \(d_i = D_i ...
- GraphQl in ASP.NET Core
GraphQl in ASP.NET Core https://graphql.cn/ https://graphql-dotnet.github.io/docs/getting-started/ar ...
- 【分享汇总】AIoT 开源科技节暨 OpenHarmony 技术论坛（附链接）
在开源科技 OSTech 和环球资源联手举办的"AIoT 开源科技节暨 OpenHarmony 技术论坛"上,一众技术大咖.开源鸿蒙生态上下游厂商与开发者群体齐聚一堂,畅谈&quo ...
- C 语言文件处理全攻略：创建、写入、追加操作解析
C 语言中的文件处理 在 C 语言中,您可以通过声明类型为 FILE 的指针,并使用 fopen() 函数来创建.打开.读取和写入文件: FILE *fptr; fptr = fopen(filena ...
- HarmonyOS实现静态与动态数据可视化图表
一. 样例介绍 本篇Codelab基于switch组件和chart组件,实现线形图.占比图.柱状图,并通过switch切换chart组件数据的动静态显示.要求实现以下功能: 1. 实现静态数据可视化 ...
- 高并发场景QPS等专业指标揭秘大全与调优实战
高并发场景QPS等专业指标揭秘大全与调优实战 最近经常有小伙伴问及高并发场景下QPS的一些问题,特意结合项目经验和网上技术贴做了一些整理和归纳,供大家参考交流. 一.一直再说高并发,多少QPS才算高并 ...
- jenkins 持续集成和交付——一个构件小栗子前置(三)
前言 下面介绍构建一个小栗子. 在此之前有个小前提,就是已经安装好了git 服务器,用的是gogs,详细请看外篇. 正文 插件安装 首先你要安装一个git插件. 装完git插件后,我们还得安装一些gi ...
- TypeScript 的理解？与 JavaScript 的区别？
一.是什么 TypeScript 是 JavaScript 的类型的超集,支持ES6语法,支持面向对象编程的概念,如类.接口.继承.泛型等 ❝ 超集,不得不说另外一个概念,子集,怎么理解这两个呢,举个 ...
- 树莓派和esp8266在局域网下使用UDP通信，esp8266采集adc数据传递给树莓派，树莓派在web上显示结果
树莓派和esp8266需要在同一局域网下 esp8266使用arduino开发: 接入一个电容土壤湿度传感器,采集湿度需要使用adc #include <ESP8266WiFi.h> #i ...
- 力扣636(java)-函数的独占时间（中等）
题目: 有一个 单线程 CPU 正在运行一个含有 n 道函数的程序.每道函数都有一个位于 0 和 n-1 之间的唯一标识符. 函数调用 存储在一个 调用栈 上 :当一个函数调用开始时,它的标识符将会 ...