python小项目-python 的一些小项目

功能：生成博客目录的JS工具

测试：IE8，火狐，google测试通过

li_qiang

2018-01-03

var BlogDirectory = {

获取元素位置，距浏览器左边界的距离（left）和距浏览器上边界的距离（top）

getElementPosition:function (ele) {

var topPosition = 0;

var leftPosition = 0;

while (ele){

topPosition += ele.offsetTop;

leftPosition += ele.offsetLeft;

ele = ele.offsetParent;

}

return {top:topPosition, left:leftPosition};

获取滚动条当前位置

getScrollBarPosition:function () {

var scrollBarPosition = document.body.scrollTop || document.documentElement.scrollTop;

return scrollBarPosition;

移动滚动条，finalPos 为目的位置，internal 为移动速度

moveScrollBar:function(finalpos, interval) {

//若不支持此方法，则退出

if(!window.scrollTo) {

return false;

}

//窗体滚动时，禁用鼠标滚轮

window.onmousewheel = function(){

return false;

};

//清除计时

if (document.body.movement) {

clearTimeout(document.body.movement);

}

var currentpos =BlogDirectory.getScrollBarPosition();//获取滚动条当前位置

var dist = 0;

if (currentpos == finalpos) {//到达预定位置，则解禁鼠标滚轮，并退出

window.onmousewheel = function(){

return true;

}

return true;

}

if (currentpos < finalpos) {//未到达，则计算下一步所要移动的距离

dist = Math.ceil((finalpos - currentpos)/10);

currentpos += dist;

}

if (currentpos > finalpos) {

dist = Math.ceil((currentpos - finalpos)/10);

currentpos -= dist;

}

var scrTop = BlogDirectory.getScrollBarPosition();//获取滚动条当前位置

window.scrollTo(0, currentpos);//移动窗口

if(BlogDirectory.getScrollBarPosition() == scrTop)//若已到底部，则解禁鼠标滚轮，并退出

{

window.onmousewheel = function(){

return true;

}

return true;

}

//进行下一步移动

var repeat = "BlogDirectory.moveScrollBar(" + finalpos + "," + interval + ")";

document.body.movement = setTimeout(repeat, interval);

htmlDecode:function (text){

var temp = document.createElement("div");

temp.innerHTML = text;

var output = temp.innerText || temp.textContent;

temp = null;

return output;

创建博客目录，

id表示包含博文正文的 div 容器的 id，

mt 和 st 分别表示主标题和次级标题的标签名称（如 H2、H3，大写或小写都可以！），

interval 表示移动的速度

createBlogDirectory:function (id, mt, st, interval){

//获取博文正文div容器

var elem = document.getElementById(id);

if(!elem) return false;

//获取div中所有元素结点

var nodes = elem.getElementsByTagName("*");

//创建博客目录的div容器

var divSideBar = document.createElement('DIV');

divSideBar.className = 'uprightsideBar';

divSideBar.setAttribute('id', 'uprightsideBar');

var divSideBarTab = document.createElement('DIV');

divSideBarTab.setAttribute('id', 'sideBarTab');

divSideBar.appendChild(divSideBarTab);

var h2 = document.createElement('H2');

divSideBarTab.appendChild(h2);

var txt = document.createTextNode('目录导航');

h2.appendChild(txt);

var divSideBarContents = document.createElement('DIV');

divSideBarContents.style.display = 'none';

divSideBarContents.setAttribute('id', 'sideBarContents');

divSideBar.appendChild(divSideBarContents);

//创建自定义列表

var dlist = document.createElement("dl");

divSideBarContents.appendChild(dlist);

var num = 0;//统计找到的mt和st

mt = mt.toUpperCase();//转化成大写

st = st.toUpperCase();//转化成大写

//遍历所有元素结点

for(var i=0; i

{

if(nodes[i].nodeName == mt|| nodes[i].nodeName == st)

{

//获取标题文本

var nodetext = nodes[i].innerHTML.replace(/?[^>]+>/g,"");//innerHTML里面的内容可能有HTML标签，所以用正则表达式去除HTML的标签

nodetext = nodetext.replace(/ /ig, "");//替换掉所有的

nodetext = BlogDirectory.htmlDecode(nodetext);

//插入锚

nodes[i].setAttribute("id", "blogTitle" + num);

var item;

switch(nodes[i].nodeName)

{

case mt: //若为主标题

item = document.createElement("dt");

break;

case st: //若为子标题

item = document.createElement("dd");

break;

}

//创建锚链接

var itemtext = document.createTextNode(nodetext);

item.appendChild(itemtext);

item.setAttribute("name", num);

item.onclick = function(){ //添加鼠标点击触发函数

var pos = BlogDirectory.getElementPosition(document.getElementById("blogTitle" + this.getAttribute("name")));

if(!BlogDirectory.moveScrollBar(pos.top, interval)) return false;

};

//将自定义表项加入自定义列表中

dlist.appendChild(item);

num++;

}

if(num == 0) return false;

/*鼠标进入时的事件处理*/

divSideBarTab.onmouseenter = function(){

divSideBarContents.style.display = 'block';

}

/*鼠标离开时的事件处理*/

divSideBar.onmouseleave = function() {

divSideBarContents.style.display = 'none';

}

document.body.appendChild(divSideBar);

}

};

window.οnlοad=function(){

/*页面加载完成之后生成博客目录*/

BlogDirectory.createBlogDirectory("cnblogs_post_body","h2","h3",20);

}

python小项目-python 的一些小项目相关推荐

python练手小游戏_Python小游戏练手EMS员工项目自学者练习
Python小游戏练手EMS员工项目自学者练习 # 显示欢迎信息 from typing import Any, Union print('-' * 20, '欢迎使用员工管理系统', '-' * 2 ...
python小项目-python 小项目
广告关闭 2017年12月,云+社区对外发布,从最开始的技术博客到现在拥有多个社区产品.未来,我们一起乘风破浪,创造无限可能. 事先录制好一段音频,客户接通电话后,自动播放https:blog.csd ...
【Python • 项目实战】pytesseract+pyqt实现图片识别软件小项目——（一）创建项目和画界面
本文默认你已经学习了上一篇文章,如果你还没有学习,就赶快去学习吧.关注博主,学习更多内容. 文章目录前言一.创建项目 1. 从模板创建项目 2. 使用pycharm打开项目 3. 安装Pyqt5库 ...
python熊猫小课_Python-机器学习小项目
学习机器学习相关技术的最好方式就是先自己设计和完成一些小项目. Python 是一种非常流行和强大的解释性编程语言.不像 R 语言,Python 是个很完整的语言和平台,你既可以用来做研发,也可以用来 ...
分享一个 Python + Django 实现的电商小项目
编辑:业余草来源:https://www.xttblog.com/?p=4944 分享一个 Python + Django 实现的电商小项目. 如果自学 Python,那么爬虫和电商项目将是你跳不过 ...
C++的学习心得和知识总结（十六）|基于EasyX实现小甲鱼Python飞机大战项目(C++版)
目录结构注:提前言明本文借鉴了以下博主.书籍或网站的内容,其列表如下: 1.小甲鱼Python项目 – 飞机大战 2.本文使用的掩码图生成工具自动生成遮罩图的程序,点击前往 3.EasyX官方链 ...
MySQL云数据库+微信小程序+Python做项目
MySQL云数据库+微信小程序+Python做项目文章目录 MySQL云数据库+微信小程序+Python做项目云数据库部分 Python连接云数据库微信小程序连接云数据库云数据库部分大学生如 ...
鸢尾花python程序_python实现机器学习的小项目-鸢尾花
一.确保你的python安装了这些包 #Check the versions of libraries#Python version importsysprint('Python: {}'.forma ...
python自动翻译小工具_Python实现翻译小工具
一.背景利用Requests模块获取有道词典web页面的post信息,BeautifulSoup来获取需要的内容,通过tkinter模块生成gui界面. 二.代码 git源码地址 Python实现翻 ...
python新手项目-Python 的练手项目有哪些值得推荐？
其实初学者大多和题主类似都会经历这样一个阶段,当一门语言基础语法学完,之后刷了不少题,接下来就开始了一段迷茫期,不知道能用已经学到的东西做些什么即便有项目也无从下手,而且不清楚该如何去提高技术水平. ...

python小项目-python 的一些小项目

python小项目-python 的一些小项目相关推荐

最新文章

热门文章