JavaScript

展开层次号标签值

1 示例

1.1 方法

1.1.1 添加风格

function addStyle(style) {
    var node = document.createElement("style");        
    node.id = "mystyleid";        
    node.type = "text/css";        
    node.innerHTML = style.replace(/\n/g,"  ");        
    document.getElementsByTagName("HEAD").item(0).appendChild(node);
};
addStyle("body { background-color:black; color:#CCFF99; }");

1.1.2 删除结点

function removeNode(id) {
    var node = document.getElementById(id);
    if ( node != null ) 
        node.parentNode.removeChild(node);
};
removeNode("mystyleid");

1.2 网页

1.2.1 值

1.2.1.1 读取Cookie

document.cookie;

1.2.1.2 页面高度

document.documentElement.scrollHeight || document.body.scrollHeight;

1.2.1.3 页面宽度

document.documentElement.scrollWidth || document.body.scrollWidth;

1.2.2 选择

1.2.2.1 全选

window.getSelection().removeAllRanges();     
var selection = window.getSelection();        
var range = document.createRange();        
range.selectNode(document.documentElement);        
selection.addRange(range);

1.2.2.2 都不选

window.getSelection().removeAllRanges();

1.2.2.3 选择结点

function selectNode(id) {
    window.getSelection().removeAllRanges();     
    var selection = window.getSelection();        
    var range = document.createRange();        
    range.selectNode(document.getElementById(id));        
    selection.addRange(range);
};
selectNode("someid");

1.2.2.4 当前选择的字串

window.getSelection().toString();

1.2.2.5 当前选择的网页代码

var selectionObj = window.getSelection();        
var rangeObj = selectionObj.getRangeAt(0);        
var docFragment = rangeObj.cloneContents();        
var div = document.createElement("div");        
div.appendChild(docFragment);        
div.innerHTML;

1.2.3 操作

1.2.3.1 滚动

window.scrollTo(50,70 );

1.2.3.2 设置网页可编辑

document.body.contentEditable=true;

1.2.3.3 弹出信息

alert("人生得意须尽欢！");

1.2.3.4 确认

confirm("能饮一杯无？");

1.2.3.5 输入

prompt("君不见");

1.2.3.6 打开网址

window.open("http://www.nlc.cn");

1.3 变量

1.3.1 字串

var 字串a = "hello";
字串a += " world";
"包含e："+ (字串a.indexOf("e") >= 0) + "    长度：" + 字串a.length

1.3.2 时间

"当前时间：" + new Date() + "\n" + 
"格式yyyy/mm/dd：" + new Date('2022/11/30 10:35:32') + "\n" + 
"格式mm/dd/yyyy：" + new Date('11/30/2022 10:35:32') + "\n" + 
"格式yyyy-mm-dd：" + new Date('2022-11-30 10:35:32'.replace(/-/g,'/'));

1.3.3 数组

var 数组a =  [-1.2, 3.2, 15, 4.912];
数组a[2];

1.3.4 对象

var 猫猫1 = {颜色:"白", 年龄:"15", 名字:"乖乖"};
猫猫1.名字

1.4 表达式

1.4.1 字符串处理

1.4.1.1 比较

'Hello' == 'hello' || 'a' < 'A' || 'a' != 'A'

1.4.1.2 替换首个

"Hello World! World is yourself.".replace("World", "Feeling");

1.4.1.3 替换所有

"Hello World! World is yourself.".replace(/World/g, "Feeling");

1.4.1.4 开始于

'Hello'.startsWith('h')

1.4.1.5 结尾于

'Hello'.endsWith('o')

1.4.1.6 子串

'Hello'.substring(2, 5)

1.4.1.7 字符

'hello'.charAt(2)

1.4.1.8 连接

'hello'.concat(' world')

1.4.1.9 分割

'1,2,3,4'.split(',')

1.4.1.10 位置

'hello'.indexOf('e')

1.4.1.11 最后位置

'hello'.lastIndexOf('l')

1.4.1.12 长度

'hello'.length

1.4.1.13 查找

var 字符串a = "abc1233hello";
var 规则表达式a = /3{2,}/ig;
字符串a.search(规则表达式a)

1.4.1.14 小写

'Hello'.toLowerCase()

1.4.1.15 大写

'Hello'.toUpperCase()

1.4.2 数组运算

1.4.2.1 长度

var 数组a =  [-1.2, 3.2, 15, 4.912];
数组a.length

1.4.2.2 添加

var 数组a =  [-1.2, 3.2, 15, 4.912];
数组a.push(-47);

1.4.2.3 删除

var 数组a =  [-1.2, 3.2, 15, 4.912];
数组a.pop()

1.4.3 布尔运算

1.4.3.1 字符串包含

var 字符串a = "abc1233hello";
var 规则表达式a = /3{2,}/ig;
字符串a.search(规则表达式a) >= 0

1.4.3.2 字符串匹配

var 字符串a = "abc1233hello";
var 规则表达式a = /\S*3{2,}\S*/ig;
字符串a.search(规则表达式a) >= 0

1.4.3.3 数组包含

var 数组a =  ['A', 'B', 'C', 'D'];
数组a.includes('C');

1.4.3.4 是否为数值

Math.abs(2a) >= 0

1.4.3.5 与/或/否

var 数组a =  ['A', 'B', 'C', 'D'];
var 字符串a = "abc1233hello";
数组a.includes('C') && (数组a.length >= 8 || 字符串a.length < 5 || !字符串a.endsWith("h"));

1.4.4 时间运算

1.4.4.1 时间的格式

"当前时间：" + "\n" + 
"new Date() = " + new Date()+ "\n" + 
"new Date().getTime() = " + new Date().getTime() + "\n" + 
"new Date().toLocaleString() = " + new Date().toLocaleString()+ "\n" + 
"new Date().toGMTString() = " + new Date().toGMTString()+ "\n" + 
"new Date().toISOString() = " + new Date().toISOString()+ "\n" + 
"new Date().toUTCString() = " + new Date().toUTCString()+ "\n" + 
"new Date().toString() = " + new Date().toString()+ "\n" + 
"new Date().toJSON() = " + new Date().toJSON()+ "\n" + 
"new Date().toDateString() = " + new Date().toDateString()+ "\n" + 
"new Date().toTimeString() = " + new Date().toTimeString()+ "\n" + 
"new Date().toLocaleDateString() = " + new Date().toLocaleDateString()+ "\n" + 
"new Date().toLocaleTimeString() = " + new Date().toLocaleTimeString()

1.4.4.2 时间的解析

new Date('2022/11/30 10:35:32').toLocaleString() + "\n" + 
new Date('11/30/2022 10:35:32').toLocaleString() + "\n" + 
new Date('2022-11-30 10:35:32'.replace(/-/g,'/')).toLocaleString() + "\n" + 
new Date('2022/11/30') + "\n" + 
new Date('2022-11-30'.replace(/-/g,'/'))

1.4.4.3 时间的分量

var 时间b = new Date('11/30/2022 10:35:32');
"年：" + 时间b.getFullYear() + "\n月：" + (时间b.getMonth() + 1) + "\n日：" + 时间b.getDate()
 + "\n星期：" + 时间b.getDay() + "\n小时：" + 时间b.getHours()+ "\n分钟：" + 时间b.getMinutes()
+ "\n秒：" + 时间b.getSeconds();

1.4.4.4 比较时间

new Date('2012/05/19').getTime()  > new Date('2016/05/19 09:23:12').getTime()

1.4.5 数值计算

1.4.5.1 以2为底的对数

// ECMAScript 6支持，而ECMAScript 5.1不支持
Math.log2(6)

1.4.5.2 上舍入

Math.ceil(4.13)

1.4.5.3 下舍入

Math.floor(4.67)

1.4.5.4 四舍五入

Math.round(4.83)

1.4.5.5 整数部分

Math.trunc(4.83)

1.4.5.6 随机数

Math.random()

1.4.5.7 最大值

Math.max(1,2,-3)

1.4.5.8 最小值

Math.min(1,2,-3)

1.4.5.9 欧拉数

Math.E

1.4.5.10 圆周率

Math.PI

1.4.5.11 绝对值

Math.abs(-5.611)

1.4.5.12 欧拉冥

Math.exp(2)

1.4.5.13 平方根

Math.sqrt(9)

1.4.5.14 三次方根

Math.pow(27,1/3)

1.4.5.15 幂

Math.pow(2,5)

1.4.5.16 余弦

Math.cos(0)

1.4.5.17 正弦

Math.sin(9)

1.4.5.18 正切

Math.tan(5)

1.4.5.19 反正切

Math.atan(-7.3)

1.4.5.20 反余弦

Math.acos(0.5)

1.4.5.21 反正弦

Math.asin(0.3)

1.4.5.22 自然对数（底为e）

Math.log(6)

1.4.5.23 常用对数（底为10）

// ECMAScript 6支持，而ECMAScript 5.1不支持
Math.log10(6)

* 网页可编辑时，链接和控件可能不响应。