敲点JavaScript代码
2024-05-14 10:21:57
1. DOM DEMO-表格的行排序
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DEMO~DEMO</title>
<style type="text/css"></style></head>
<body><table id="tab" border=1><thead><tr><th>Name</th><th>Age</th></tr></thead><tbody><tr><td>111</td><td>1</td></tr><tr><td>888</td><td>7</td></tr><tr><td>333</td><td>3</td></tr><tr><td>555</td><td>6</td></tr></tbody></table><script type="text/javascript">/** 根据指定表格每行第n的单元格的值，对第一个<tbody>中的行排序，* 如果存在comparator函数则使用它，否则按字母表顺序比较。*/function sortrows(table, n, comparator){var tbodys = table.tBodies[0];var rows = tbodys.getElementsByTagName("tr"); //tbody中的所有行rows = Array.prototype.slice.call(rows, 0); //真实数组中的快照
rows.sort(function(row1, row2){var ceil1 = row1.getElementsByTagName("td")[n]; //获得第n个单元格var ceil2 = row2.getElementsByTagName("td")[n]; var val1 = ceil1.textNode || ceil1.innerText; //获得文本内容var val2 = ceil2.textNode || ceil2.innerText; //比较if(comparator) return comparator(val1, val2);if(val1 < val2) return -1;else if(val1 > val2) return 1;else return 0;});//在tbody中按它们的顺序进行添加for(var i=0; i<rows.length; i++)tbodys.appendChild(rows[i]);}/** 查找表格的<th>元素，让它们可点击，以便点击列标题，按该列对行排序*/function makeSortable(table){var headers = table.getElementsByTagName("th");for(var i=0; i<headers.length; i++){(function(n){headers[i].onclick = function(){sortrows(table, n);};}(i));}}var tab = document.getElementById("tab");makeSortable(tab);</script>
</body>
</html>View Code
2. 生成子目录
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DEMO~DEMO</title>
<style type="text/css">#TOC {border:solid black 1px; margin:10px; padding:10px}.TOCEntry {font-family:sans-serif;}.TOCEntry a {text-decoration:none;}.TOCLevel1 {font-size:16px; font-weight:bold;}.TOCLevel2 {font-size:12px; margin-left:.5in;}.TOCSectNum:after {content: ":";} /*表示每个段编号之后都有一个冒号和空格符。*/.TOCSectNum {display:none;}
</style></head>
<body><div id="TOC"></div><h1>h1</h1><h2>h2</h2><h3>h3</h3><h4>h4</h4><h5>h5</h5><h6>h6</h6><script type="text/javascript">(function(){//查找TOC元素，如果不存在，则在文档中创建一个var toc = document.getElementById("TOC");if(!toc){toc = document.createElement("div");toc.id = "TOC";document.body.insertBefore(toc,document.body.firstChild);}//查找所有的标题元素var headings;if(document.querySelectAll){document.querySelectAll("h1,h2,h3,h4,h5,h6");} else {headings = findHeadings(document.body, []);}//递归遍历document.body，查找标题元素function findHeadings(root, sects){for(var c=root.firstChild; c!=null; c=c.nextSibling){if(c.nodeType !== 1) continue;if(c.tagName.length == 2 && c.tagName.charAt(0) == "H"){sects.push(c);} else {findHeadings(c,sects);}}return sects;}//初始化一个数组来保持跟踪章节号var sectionNumbers = [0,0,0,0,0,0];//循环已找到的标题元素for(var h=0; h<headings.length; h++){var heading = headings[h];//跳过在TOC容器中的标题元素if(heading.parentNode == toc) continue;//判断标题级别var level = parseInt(heading.tagName.charAt(1));if(isNaN(level) || level<1 || level>6) continue;//对于该标题级别增加sectionNumbers对应的数字，重置所以标题比它级别低的数字为零sectionNumbers[level-1]++;for(var i=level; i<6; i++)sectionNumbers[i] = 0;//将所有标题级别的章节组合产生一个章节号，如2.3.1var sectionNumber = sectionNumbers.slice(0,level).join(".");//为标题级别增加章节号，把数组放在<span>中，使其可以用样式修饰var span = document.createElement("span");span.className = "TOCSectNum";span.innerHTML = sectionNumber;heading.insertBefore(span, heading.firstChild);//用命名的锚点将标题包起来，以便为它增加链接var anchor = document.createElement("a");anchor.name = "TOC"+sectionNumber;heading.parentNode.insertBefore(anchor,heading);anchor.appendChild(heading);//现在为该节点创建一个链接var link = document.createElement("a");link.href = "#TOC" + sectionNumber; //链接的目标地址link.innerHTML = heading.innerHTML; //将链接地址放在一个div中，div用基于级别名字的样式修饰var entry = document.createElement("div");entry.className = "TOCEntry TOCLevel"+level;entry.appendChild(link);toc.appendChild(entry);}}());</script>
</body>
</html>View Code
转载于:https://www.cnblogs.com/borage/p/4449767.html
敲点JavaScript代码相关推荐
- vim中实现javascript代码自动完成功能
JavaScript是web脚本语言.另一方面Vim是许多编程人员的首选编辑器.Vim能公丰富,可以对JavaScript的语法进行自动完成.为了能够使用这个特性,你必须先要开启它. 在Vim的命令模 ...
- 如何用 200 行 JavaScript 代码实现人脸检测？
在超市.地铁.车站等很多场景中,人脸识别已经被广泛应用,但是这个功能究竟是怎么实现的? 在本文中,将以 pico.js 库为例,分享实现轻量级人脸识别功能的具体开发过程 . 作者 | tehnokv ...
- 优雅的写出 JavaScript 代码
目录 前言 避免使用 js 糟粕和鸡肋 编写简洁的 JavaScript 代码 使用 ES6/ES7 新特性 Babel ESLint Prettier 采用函数式编程 优雅的敲 JS 代码的几个原则 ...
- 程序员合同日期不到想辞职_程序员山洞开发程序，两年敲45万行代码，网友：一般人扛不住...
近几年网络发展的越来越好,其中的功劳离不开默默付出的程序员,正是他们任劳任怨的付出,才换来现在的便捷,在程序员汇聚的论坛,一名程序员却道出另一种现象:好久没打代码了,回想以前辞职到老家矿洞里秘密开发的 ...
- 翻译-高质量JavaScript代码书写基本要点(转载)
by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=1173 原文作者:S ...
- javascript 代码_如何使您JavaScript代码保持简单并提高其可读性
javascript 代码 by Leonardo Lima 莱昂纳多·利马(Leonardo Lima) 如何使您JavaScript代码保持简单并提高其可读性 (How to keep your ...
- javascript 代码_代码简介：2016年JavaScript的现状
javascript 代码 Here are three stories we published this week that are worth your time: 这是我们本周发布的三个值得您 ...
- js如何运行python代码_python中执行javascript代码
python中执行javascript代码: 1.安装相应的库,我使用的是PyV8 2.import PyV8 ctxt = PyV8.JSContext() ctxt.enter() func = ...
- 优化javaScript代码，提高执行效率
今天看完书,总结了一下可以如何优化 JavaScript . 1.合并js文件 为优化性能,可以把多个js文件(css文件也可以)合并成极少数大文件.跟十个5k的js文件相比,合并成一个50k的文件更 ...
最新文章
- 记录一下集成修改触发模式的过程
- Confluence 6 应该如何在我的空间中组织内容
- 皮克斯技术指导辞职读博：研究AI设计怪物，从《游戏王》卡牌开始
- Android系统分区理解及分区目录细解
- 重写equals和hashCode
- 【LeetCode】LeetCode之乘积最大子数组——枚举+动态规划+Kadane算法
- [转]HTTP/3 未来可期？
- 分布式缓存应用（转载的）
- 如何看待苹果2016秋季发布会？
- 关于php的函数吗,关于PHP的函数运行你了解多少？
- IntelliJ IDEA导入Spring源码
- OSPF路由协议实验配置命令
- c语言----斐波那契数列
- pmp知识点（7）-项目成本管理
- dw中html网页如何加音乐播放器,在dreamweaver网页制作中插入音乐播放器详细参考...
- 最新电销语音机器人完整版源码+含安装教程
- allegro使用汇总 [转贴]
- cocoscreator的Bundle加载问题
- Unity技术手册-初识编辑器（上）
- linux内核参数分析,linux内核启动第一阶段分析