百度网盘web登录页-原生js实现
2024-05-07 16:59:08
html
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><!-- 搜索时显示的网站描述 --><meta name="description" content="" /><!-- 搜索网站时的关键字 --><meta name="keyword" content="" /><title>百度网盘，让美好永远相伴</title><scripttype="text/javascript"rel="stylesheet"src="bootstrap/js/jquery-3.5.1.min.js"></script><scripttype="text/javascript"rel="stylesheet"src="bootstrap/js/bootstrap.min.js"></script><scripttype="text/javascript"rel="stylesheet"src="js/baiduPan.js"></script><!-- 网页的标题图标 --><linktype="text/css"rel="stylesheet"href="bootstrap/css/bootstrap.min.css"/><link rel="shortcut icon" href="img/baiduPan/icon1.webp" /><link rel="stylesheet" href="css/baiduPan.css" /><style></style></head><body><div class="upper"><div id="login-header"><div class="logo"><aclass="yun-logo"href="//pan.baidu.com/"target="_blank"title="百度网盘"style="text-decoration: none"><imgsrc="img/baiduPan/icon1.webp"style="width: 50px; height: 50px"/> 百度网盘</a></div><span class="login-title"><aclass="b-no-ln"href="javascript:void(0);"id="top_menu_other"target="_blank"style="color: #f00">百度网盘严打违规文件公告及非法有害信息举报</a><aclass="b-no-ln"hidefocus="true"href="http://www.baidu.com"target="_blank">百度首页</a><aclass="b-no-ln"hidefocus="true"href="//pan.baidu.com/download"id="loginHeadDlink"target="_blank">客户端下载</a><aclass="b-no-ln"hidefocus="true"href="http://weibo.com/p/1006062952668222"target="_blank">官方微博</a><aclass="b-no-ln"hidefocus="true"href="https://help.baidu.com/newadd?prod_id=29&category=2&ptype=48"target="_blank">问题反馈</a><aclass="b-no-ln f-ln-trans"hidefocus="true"href="https://pan.baidu.com/disk/main#/certification/introductionweb?from=webdl"target="_blank">企业认证<span></span></a><aclass="b-no-ln"hidefocus="true"href="https://pan.baidu.com/union?from=panlogin"target="_blank">开放平台</a><aclass="b-no-ln center-entry"hidefocus="true"href="https://pan.baidu.com/buy/center?tag=8&from=loginpage"target="_blank"style="background: linear-gradient(-139deg, #f0d7a3 0, #efcb85 100%)#f0d7a3;color: black;border: 1px solid #f0d7a3;border-radius: 10px;padding: 2px 5px;text-decoration: none;">会员中心</a></span></div><div class="wrap" id="wrap"><ul id="pic"><li><imgsrc="img/baiduPan/lunbo1.webp"alt=""style="width: 1263px; height: 550px"/></li><li><imgsrc="img/baiduPan/lunbo2.webp"alt=""style="width: 1263px; height: 550px"/></li><li><imgsrc="img/baiduPan/lunbo3.webp"alt=""style="width: 1263px; height: 550px"/></li><li><imgsrc="img/baiduPan/lunbo4.webp"alt=""style="width: 1263px; height: 550px"/></li></ul><ol id="list" style="list-style: none"><li class="on">1</li><li>2</li><li>3</li><li>4</li></ol><ul class="wordDescript" id="wordDescript"><li>“百度网盘企业版<br />企业级文件极速传输工具”</li><li>“在线预览<br />文件即开即看”</li><li>“多端并用<br />数据随身携带”</li><li>“好友分享<br />共度幸福时光”</li></ul></div><div class="login"><div class="login-top" id="login-top"><p><span>账号密码登录</span><a class="login-mail" id="login-mail" style="text-decoration: none">短信快捷登录<svgt="1627976112598"class="icon"viewBox="0 0 1024 1024"version="1.1"xmlns="http://www.w3.org/2000/svg"p-id="1943"width="12px"height="12px"><pathd="M327.513656 1023.900007c-13.299016 0-26.698024-4.899637-36.997261-14.798904-21.698394-20.39849-22.69832-54.695951-2.199837-76.294353L679.887572 518.037453c10.499223-11.299164 10.299238-29.897787-0.79994-40.596995l-389.571163-384.971503c-21.098438-20.998446-21.298423-55.195914-0.39997-76.494337 20.898453-21.098438 55.095922-21.398416 76.394345-0.299978l389.671155 384.87151c52.496114 51.796166 53.89601 137.689808 3.399748 191.485826l-391.671007 414.86929c-10.899193 11.299164-25.198135 16.998742-39.397084 16.998741z"fill="#1296DB"p-id="1944"></path></svg></a></p><input class="input1" type="text" placeholder="手机/邮箱/用户名" /><input class="input2" type="text" placeholder="密码" /><button>登录</button><aclass="login-forget"style="text-decoration: none"href="https://passport.baidu.com/?getpassindex&tt=1628037953864&gid=BD74DC9-6CE6-4D50-A803-72714E4C4C9C&tpl=netdisk&u=https%3A%2F%2Fpan.baidu.com%2Fdisk%2Fhome">忘记密码</a></div><div class="login-top2" id="login-top2" style="display: none"><p><span>短信快捷登录</span><aclass="login-mail2"id="login-mail2"style="text-decoration: none">账号密码登录<svgclass="icon"viewBox="0 0 1024 1024"version="1.1"xmlns="http://www.w3.org/2000/svg"p-id="1943"width="12px"height="12px"><pathd="M327.513656 1023.900007c-13.299016 0-26.698024-4.899637-36.997261-14.798904-21.698394-20.39849-22.69832-54.695951-2.199837-76.294353L679.887572 518.037453c10.499223-11.299164 10.299238-29.897787-0.79994-40.596995l-389.571163-384.971503c-21.098438-20.998446-21.298423-55.195914-0.39997-76.494337 20.898453-21.098438 55.095922-21.398416 76.394345-0.299978l389.671155 384.87151c52.496114 51.796166 53.89601 137.689808 3.399748 191.485826l-391.671007 414.86929c-10.899193 11.299164-25.198135 16.998742-39.397084 16.998741z"fill="#1296DB"p-id="1944"></path></svg> </a><br /><spanstyle="color: #999;line-height: 30px;font-weight: 400;font-size: 12px;">验证即登录，未注册将自动创建百度帐号</span></p><input class="input3" type="text" placeholder="手机号" /><input class="input4" type="text" placeholder="验证码" /><input class="input5" type="submit" value="发送验证码" /><button style="margin: 30px 0 10px 0">登录</button><span style="font-size: 12px; color: #969696">阅读并接受</span><atarget="_blank"style="font-size: 14px; color: #09aaff"href="http://passport.baidu.com/static/passpc-account/html/protocal.html">《百度用户协议》</a></div><div class="login_grey" id="login_grey1"><a style="text-decoration: none ; cursor: pointer;" id="login-mail2">扫一扫登录</a><imgsrc="img/baiduPan/loginIcon.png"usemap="#login1"alt="logintype"class="loginShape"/><map name="login1" id="login1"><areashape="rect"coords="0,0,30,28"href="/example/html/sun.html"target="_blank"alt="新浪微博"/><areashape="rect"coords="40,0,60,28"href="/example/html/sun.html"target="_blank"alt="QQ账号"/><areashape="rect"coords="70,0,100,28"href="/example/html/sun.html"target="_blank"alt="微信"/></map><astyle="text-decoration: none"href="https://passport.baidu.com/v2/?reg&tt=1628470150542&overseas=undefined&gid=BB233AA-5275-4414-813F-A071DBD07F08&tpl=netdisk&u=https%3A%2F%2Fpan.baidu.com%2Fdisk%2Fhome">立即注册</a></div><div class="login-top3" id="login-top3" style="display: none;"><div><span class="scanCode">扫一扫登录</span><br /><spanstyle="text-align: center;font-size: 14px;font-weight: 400;display: block;margin-bottom: 10px;">请使用<a href="https://pan.baidu.com/download?from=login#pan" target="_blank">百度网盘App</a>扫码登陆</span><img src="img/baiduPan/scan_the_code.png" style="width: 312px" /><p style="text-align: center; color: #999; font-size: 12px">最新版百度网盘App - 首页右上角 - 扫一扫</p></div></div><div class="login_grey" id="login_grey2" style="display: none;"><a style="text-decoration: none ; cursor: pointer;" id="login-mail2">账号密码登录</a><imgsrc="img/baiduPan/loginIcon.png"usemap="#login1"alt="logintype"class="loginShape"/><map name="login1" id="login1"><areashape="rect"coords="0,0,30,28"href="/example/html/sun.html"target="_blank"alt="新浪微博"/><areashape="rect"coords="40,0,60,28"href="/example/html/sun.html"target="_blank"alt="QQ账号"/><areashape="rect"coords="70,0,100,28"href="/example/html/sun.html"target="_blank"alt="微信"/></map><astyle="text-decoration: none"href="https://passport.baidu.com/v2/?reg&tt=1628470150542&overseas=undefined&gid=BB233AA-5275-4414-813F-A071DBD07F08&tpl=netdisk&u=https%3A%2F%2Fpan.baidu.com%2Fdisk%2Fhome">立即注册</a></div></div></div><div class="bottom"><imgsrc="img/baiduPan/bottomIcon.png"border="0"usemap="#planetmap"alt="tools"class="toolShape"/><map name="planetmap" id="planetmap"><areashape="rect"coords="0,20,80,90"href="/example/html/sun.html"target="_blank"alt="Windows"/><areashape="rect"coords="170,20,230,90"href="/example/html/sun.html"target="_blank"alt="Android"/><areashape="rect"coords="320,20,380,90"href="/example/html/sun.html"target="_blank"alt="Iphone"/><areashape="rect"coords="490,20,540,90"href="/example/html/sun.html"target="_blank"alt="Ipad"/><areashape="rect"coords="640,20,700,90"href="/example/html/sun.html"target="_blank"alt="Mac"/></map><div class="footer"><div xmlns="http://www.w3.org/1999/xhtml">©2021 Baidu<div class="tooltip-test" data-toggle="tooltip"><span id="Business">商务合作</span><div id="temawork-intr" style="display: none"><p><svgstyle="width: 16px; max-height: 20px; margin: 10px"t="1628241965818"class="icon"viewBox="0 0 1024 1024"version="1.1"xmlns="http://www.w3.org/2000/svg"p-id="2035"width="200"height="200"><pathd="M512 537.6l512-156.444444V312.888889c0-62.577778-51.2-113.777778-113.777778-113.777778H113.777778c-62.577778 0-113.777778 51.2-113.777778 113.777778v68.266667l512 156.444444z"fill="#ffffff"p-id="2036"></path><pathd="M537.6 620.088889l-5.688889 14.222222-19.911111-5.688889-22.755556 5.688889-5.688888-14.222222-483.555556-147.911111V824.888889c0 62.577778 51.2 113.777778 113.777778 113.777778h796.444444c62.577778 0 113.777778-51.2 113.777778-113.777778V472.177778l-486.4 147.911111z"fill="#ffffff"p-id="2037"></path></svg><span>商务合作联系方式</span></p><ul><li>会员业务合作联系：wonglaye@baidu.com</li><li>开放平台业务合作联系：mars-union@baidu.com<ahref="https://pan.baidu.com/union?from=web"target="_blank">了解更多</a></li></ul></div></div>|<aclass="b-lnk-gy"href="//pan.baidu.com/platform/home"target="_blank">移动开放平台</a>|<a class="b-lnk-gy" href="/disk/duty/" target="_blank">服务协议</a> |<aclass="b-lnk-gy"href="http://yun.baidu.com/disk/privacy"target="_blank">权利声明</a>|<aclass="b-lnk-gy"href="http://yun.baidu.com/disk/version"target="_blank">版本更新</a>|<aclass="b-lnk-gy"href="http://yun.baidu.com/disk/help"target="_blank">帮助中心</a>|<aclass="b-lnk-gy"href="http://copyright.baidu.com/index.php/index/complaint"target="_blank">版权投诉</a>|<aclass="b-lnk-gy"href="http://e.baidu.com?refer=1008"target="_blank">百度营销</a>|<aclass="b-lnk-gy"href="//pan.baidu.com/disk/main#/certification/introductionweb?from=loginFooter"target="_blank">企业认证</a></div></div></div></body>
</html>
css
* {margin: 0;padding: 0;
}
.wrap {z-index: -1;height: 600px;width: 100%;margin: auto;overflow: hidden;position: absolute;top: 0;
}
.login-title {display: inline-block;margin: 25px 20px 0 120px;
}
.login-title a {color: #fff;font-family: Microsoft YaHei, SimHei, Tahoma;margin: 30px 20px 0 0;
}
.wrap ul {position: absolute;list-style: none;
}#pic li{cursor: pointer;transition: all 2s;
}
#pic li:hover{transform: scale(1.05);
}
.wrap ul li {height: 800px;
}
.wrap ol {list-style-type: circle;position: absolute;right: 570px;bottom: 60px;
}
.wrap ol li {height: 20px;width: 20px;background: #ccc;border: solid 1px #666;margin-left: 5px;color: #000;float: left;line-height: center;text-align: center;cursor: pointer;
}
/* 登录框 */
.login {background-color: #fff;border-radius: 3px;height: 405px;width: 352px;float: right;margin-right: 80px;margin-top: 50px;
}
.login-top{padding: 0 20px;
}
.login-top2 ,.login-top3{padding: 20px;
}
.login-top p {margin: 40px 0;
}
.login-top2 p {margin: 20px 0;
}
.login-mail ,.login-mail2{font-size: 16px;float: right;cursor: pointer;font-family: Microsoft YaHei, SimHei, Tahoma;
}
.login span {font-weight: 600;font-size: 18px;text-align: left;
}
.input1, .input2{width: 100%;height: 41px;padding: 7px 10px 7px 16px;border: 1px solid #e7e7e7;
}
.input1 {border-top-left-radius: 4px;border-top-right-radius: 4px;
}
.input2 {border-bottom-left-radius: 4px;border-bottom-right-radius: 4px;
}
.input3,.input4,.input5{border-radius: 4px;height: 41px;padding: 7px 10px 7px 16px;border: 1px solid #e7e7e7;
}
.input3{width: 100%;margin-bottom: 10px;
}
.input4{margin-right: 6px;width: 160px;
}
.input5{width: 140px;
}
.login button {width: 100%;margin-top: 50px;height: 41px;background: #09aaff;border-radius: 4px;transition: 0.3s;font-size: 16px;border: 0;color: #fff;cursor: pointer;text-decoration: none;font-family: Microsoft YaHei, SimHei, Tahoma;font-weight: 100;
}
.login-forget {color: #666;display: block;font-size: 14px;margin: 20px 0;
}.login_grey {margin-top: 10px;padding: 20px;background: #f3f8ff;height: 65px;width: auto;
}
.loginShape {width: 100px;margin: 0 30px;
}
.scanCode{display: block;margin: 10px 0 10px 110px;font-size: 18px;font-weight: 600;font-family: Microsoft YaHei,SimHei,Tahoma;
}
.wordDescript {position: absolute;left: 200px;top: 300px;font-size: 44px;color: #fff;
}
.wrap ol .on {background: #e97305;color: #fff;
}.logo {float: left;margin: 10px 30px;
}
.yun-logo {font-size: 24px;color: #fff;
}
.bottom {position: relative;top: 500px;left: 280px;
}
.toolShape {width: 700px;
}
.b-lnk-gy {display: inline-block;
}
.footer,
.footer a {color: #999;font-size: 12px;text-decoration: none;
}
.footer {margin: 20px 0 10px 48px;
}
.tooltip-test {display: inline-block;
}
#temawork-intr{height: 120px;position: absolute;top: 26px;left: 20px;border-radius: 8px;background-color: #fff;box-shadow: #666 0px 0px 10px;
}
#temawork-intr p{border-top-left-radius: 8px;border-top-right-radius: 8px;background-color: rgb(3, 190, 247);color: #fff;height: 40px;
}
#temawork-intr span{position: absolute;top: 12px;font-size: 14px;font-weight: 600;
}
#temawork-intr ul{margin-left: 20px;
}
#temawork-intr a{color: #09aaff;margin: 0 10px;
}
js
window.onload = function () {var wrap = document.getElementById("wrap"),pic = document.getElementById("pic").getElementsByTagName("li"),list = document.getElementById("list").getElementsByTagName("li"),word=document.getElementById("wordDescript").getElementsByTagName("li"),index = 0,timer = null;// 定义并调用自动播放函数timer = setInterval(autoPlay, 3000);// 鼠标划过整个容器时停止自动播放wrap.onmouseover = function () {clearInterval(timer);};// 鼠标离开整个容器时继续播放至下一张wrap.onmouseout = function () {timer = setInterval(autoPlay, 3000);};// 遍历所有数字导航实现划过切换至对应的图片for (var i = 0; i < list.length; i++) {list[i].onmouseover = function () {clearInterval(timer);index = this.innerText - 1;changePic(index);changeWord(index);};}function autoPlay() {if (++index >= pic.length ) index = 0;changePic(index);changeWord(index);}// 定义图片切换函数function changePic(curIndex) {for (var i = 0; i < pic.length; ++i) {pic[i].style.display = "none";list[i].className = "";}pic[curIndex].style.display = "block";list[curIndex].className = "on";}// 定义文字切换函数function changeWord(curIndex) {for (var i = 0; i < word.length; ++i) {list[i].className = "";word[i].style.display="none";}list[curIndex].className = "on";word[curIndex].style.display="block"}//切换标签var traget1=document.getElementById("login-top"),//账号页traget3=document.getElementById("login-mail"),//账号页上方切换链接traget2=document.getElementById("login-top2"),//短信页traget4=document.getElementById("login-mail2"),//短信页上方切换链接traget7=document.getElementById("login_grey1");//账号和短信页下方切换链接traget5=document.getElementById("login-top3"),//扫一扫页traget6=document.getElementById("login_grey2"),//扫一扫页下方切换链接traget3.onclick = function(){traget1.style.display="none";traget2.style.display="";};traget4.onclick = function(){traget2.style.display="none";traget1.style.display="";};traget6.onclick = function(){traget1.style.display="";traget7.style.display="";traget2.style.display="none";traget5.style.display="none";traget6.style.display="none";};traget7.onclick = function(){traget1.style.display="none";traget2.style.display="none";traget7.style.display="none";traget5.style.display="";traget6.style.display="";};//显示提示框var tip=document.getElementById("Business"),tip2=document.getElementById("temawork-intr");tip.onmouseover = function(){tip2.style.display="";};tip2.onmouseover = function(){tip2.style.display="";};tip2.onmouseout = function(){tip2.style.display="none";};
};
百度网盘web登录页-原生js实现相关推荐
- 如何取消百度网盘自动登录状态？
在电脑端设备中很常见,当设置了记住密码+自动登录时,运行百度网盘会自动进行登录,但因为设置了该双重选项,为了避免账号被其他人使用而暴露隐私,有时也很头疼,而且你不能通过点击[切换账号].关掉[自动登录 ...
- 基于Aria2c的百度网盘免登录高速下载器，KinhDown v1.0.88 PC+安卓
小伙伴们注意:公众号的推送机制不再按照时间前后推送了,微信公众号信息流乱序.君哥建议大家把公众号置顶(设为星标★),以便第一时间看到推送,方法如下图: 万水千山总是情,为君哥三连行不行 谢谢大家了 ...
- 百度网盘电脑登录二维码加载不出来解决方法
原因:百度云的二维码是依赖ie浏览器生成 所以方法:重置IE浏览器
- 百度网盘第三方登录时出错，提示“由于网络原因”
1. [我的电脑]右键,点击[属性],打开系统属性,选择左上角[控制面板] , 2. 单击[网络和Internet], 3. 单击[Internet选项] 4. 选择[连接]右下角的[局域网设置] 5 ...
- 百度网盘如何取消自动登录
百度网盘如何取消自动登录,首先你要登录到百度网盘并登录时选择了自动登录,以前版本登录进去有一个设置----->注销功能,点击就可以退出登录并到登录页面这时再登录不要选自动登录. 百度网盘6.60 ...
- 用户盘云存储——百度网盘
近期一直在学习用户盘之类的问题,上午正好有机遇和大家分享一下. 百度网盘 百度网盘是百度推出的一项云存储服务,初次注册即有机遇得取15GB的空间,前目有Web版.Windows客户端.Android手 ...
- 2019的百度网盘下载速度太慢老是限速怎么解决？
还在为Mac百度网盘下载速度慢而烦恼吗?百度云盘又是一个非常实用的分享工具,可支持图片.视频.音乐.文档.种子以及其他资源分类储存,但是,百度网盘客户端限速后一般只有几十K的下载速度,今天要给大家分享 ...
- 百度网盘超级会员，年卡低至198元！百度官方直充，会员实时生效！
大家都喜欢用百度网盘来存储文件.照片,还用百度网盘分享文档,但没有会员的,容量就太小,传输速度也受限,还是咬牙充个会员吧!幻海优品是一家正规的会员充值平台,价格很实惠! 百度网盘超级会员特价充值 百度 ...
- 百度网盘秒传链接怎么用及实现原理
为了防止分享链接被恶意举报,一些资源提供者开始使用秒传链接形式进行分享.本文探索了秒传链接提取的原理,并介绍了简单的用法. 如何使用 关于原理的部分请跳到下一节. 安装扩展及脚本(1.2均为必选,非二 ...
最新文章
- 各品牌交换机常用命令整理
- 【机器学习】太强了！这个建模神器可以玩一辈子
- Linux——vim程序编辑器
- 机器学习框架ML.NET学习笔记【1】基本概念与系列文章目录
- jmeter制造大批量的用户数据数据
- 实体类的动态生成（一）
- 46 - 算法 -Leetcode-189-旋转数组-数据结构vector或者reverse函数
- javascript 事件冒泡和事件代理
- 监听独立于数据库服务器的配置，解决ORA-12520及ORA-12545错误
- ctx-＞cvdl-＞cuvidGetDecoderCaps(ctx-＞caps8) failed -＞ CUDA_ERROR_DEINITIALIZED: driver shutting down
- linux添加凤凰引导,凤凰系统率先升级内核到Linux4.9
- VM虚拟机配置动态ip和静态ip访问
- Tomcat设置开机启动 - CentOS（结尾附视频）
- TPU中的指令并行和数据并行
- RISCV学习笔记5.3--ubuntu18.04芯片设计软件(vcs、verdi)的简单使用
- vue前端使用jsencrypt RSA 加解密插件
- JS基础知识必看篇(黄梦岚)
- L9110S电机驱动——让小车动起来
- python遥感影像分类代码_【博客翻译】使用 Python Tensorflow 实现简单的神经网络卫星遥感影像分类...
- 学习巴菲特的正确姿势