纯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 ...
随机推荐
- DNS的各种记录类型的应用解析
可能很多人平时工作中不会遇到DNS配置相关的问题, 但如果偶尔遇到不同类型DNS记录的配置, 在没有搞清楚它们都是干啥的情况下, 会眼花缭乱, 还记得很多年前实验室配置DNS不太对导致只能访问www. ...
- #容斥#51nod 1407 与与与与
题目 给出 \(n\) 个数,问有多少个子集的按位与为0 分析 考虑容斥,设 \(f[i]\) 表示有多少个数按位与为 \(x\),满足 \(x\&i=i\) 那么答案就是 \(\sum_{i ...
- 【开源三方库】Easyui：基于OpenAtom OpenHarmony ArkUI深度定制的组件框架
万冬阳 公司:中国科学院软件所 小组:知识体系工作组 简介 Easyui是一套基于ArkTS语言开发的轻量.可靠的移动端组件库,它是对OpenAtom OpenHarmony(以下简称" ...
- 从模型到部署，教你如何用Python构建机器学习API服务
本文分享自华为云社区<Python构建机器学习API服务从模型到部署的完整指南>,作者: 柠檬味拥抱. 在当今数据驱动的世界中,机器学习模型在解决各种问题中扮演着重要角色.然而,将这些模型 ...
- 初学STM32 SDIO (二)
SD命令由主机发出,以广播命令和寻址命令为例,广播命令是针对与SD主机总线连接的所有从设备发送的,寻址命令是指定某个地址设备进行命令传输. 1.SD命令格式 SD命令格式固定为48bit,都是通过 ...
- HMS Core机器学习服务身份证识别功能，实现信息高效录入
在各类App都要进行实名制的当下,进行身份认证自然不可避免.平时购买火车票.飞机票,住酒店.打游戏等都需要身份认证,如果每次都要输入那18位的身份证号十分麻烦,手一抖就会出错.因此,使用华为机器服务身 ...
- Ubuntu部署Django二：项目上传及测试
首先将我们开发好的工程代码上传到服务器(Ubuntu) 用命令启动,然后进去浏览器检查,看看是否能正常启动 python3 manage.py runserver 如果 settings.py ...
- 单机运行环境搭建之 －－CentOS-6.4安装MySQL 5.6.10并修改MySQL的root用户密码
单机运行环境搭建之 --CentOS-6.4安装MySQL 5.6.10并修改MySQL的root用户密码 Mysql 5.5以后使用了CMake进行安装,参考与以前的区别请参考: http://ww ...
- redis 面试题整理
前言 前天面试了一家公司,平时看一本redis书的也使用redis,对里面的东西也基本了解,结果回答的时候居然回答了只是使用了(因为认为是redis是运维的东西,做的东西多,所以忘了,好吧这是借口), ...
- Mui 消息推送
一.push通过H5+实现 简单实现方式:通过轮询服务器是否有新消息推送过来 mui.plusReady(function() {plus.navigator.closeSplashscreen(); ...