相关专题
- 你不可不知的 JavaScript 二三事：https://ithelp.ithome.com.tw/users/20112483/ironman/2016
ECMAScript 6
ECMAScript 6入门教程-阮一峰（网页书） http://es6.ruanyifeng.com/
30分钟掌握ES6/ES2015核心内容 http://www.jianshu.com/p/ebfeb687eb70
判断
var urlPat = location.pathname;
if (domain == 'baidu.com' || domain == 'google.com'){
}
}
else if (domain == 'facebook.com' || domain == 'twitter.com'){
if (urlPat.indexOf('/profile') != -1){
}
}
案例
var brPort = location.protocol; //获取协议
var brHost = location.host; //获取域名
var brPat = location.pathname; // 获取页面路径
var brUrl = brPort + '//' + brHost + brPat; // 拼接成完整的网址
var old = document.getElementsByTagName("body")[0].className;
var domain = location.host //获取域名
if (domain == "123.1px.run"){ // 当前页面域名为 123.1px.run 时
document.getElementsByTagName("body")[0].className = " domain-123"; // 增加 Class domain-123
}
安装浏览器语言跳转对应语言网址
- filename 独立出来时便于不同文件、不同语言便于修改
- 请不要同样的代码放在不同的语言，否则会导致死循环
<script>
!function () {
var lang = navigator.language||navigator.userLanguage;
lang = lang.substr(0, 2);
filename = 'privacy_policy.html';
if(lang == 'en'){
window.location.replace('https://1px.run/' + filename)
}else{
}
}()
</script>
未尝试方案
!function ()
{
if (navigator.appName == 'Netscape')
var language = navigator.language;
else
var language = navigator.browserLanguage;
if (language.indexOf('en') > -1) document.write('english');
else if (language.indexOf('nl') > -1) document.write('dutch');
else if (language.indexOf('fr') > -1) document.write('french');
else if (language.indexOf('de') > -1) document.write('german');
else if (language.indexOf('ja') > -1) document.write('japanese');
else if (language.indexOf('it') > -1) document.write('italian');
else if (language.indexOf('pt') > -1) document.write('portuguese');
else if (language.indexOf('es') > -1) document.write('Spanish');
else if (language.indexOf('sv') > -1) document.write('swedish');
else if (language.indexOf('zh') > -1) document.write('chinese');
else
document.location.href = 'english';
}
修改 CSS
<a href="javascript:" onclick="javascript:document.getElementById('boxMain').style.display='block';">联系客服</a>
移除 Class
<a href="javascript:" onclick="javascript:document.getElementById('boxMain').classList.remove('dno')">移除 dno</a>
增加 Class
<button id="w3Button" type="button" onclick="clickFunction()">Click on button</button>
<p id="w3Text">Welcome to W3Docs!</p>
<script>
function clickFunction() {
// Select element and set attribute
document.getElementById("w3Text").setAttribute("class", "text-class");
}
</script>
使用 JavaScript 动态插入 link style.css 样式表链接
方法1：
var style = document.createElement('link');
style.rel = 'stylesheet';
style.href = '/css/style.css';
document.getElementsByTagName('HEAD').item(0).appendChild(style);
方法2：
var link = document.createElement('link');
link.rel = "stylesheet";
link.href = "/css/style.css";
document.head.appendChild(link);
方法3：
var html = '<link rel="stylesheet" type="text/css" href="/css/style.css" />';
document.head.innerHTML += html;
插入 HTML 内容结构
在 #container 中插入 html 内容（不是替换）
document.getElementById('container').innerHTML += '<span class="color-green">green</span>';
在 body 插入 html 内容 Markdown 格式的页面标题和链接
var inner_centent = "[" + document.title + "](" + window.location.href + ")";
document.getElementsByTagName("body")[0].innerHTML += inner_centent;
获取 UA 根据 UA 修改页面链接
// cyao
function getVersion(str){
var reg = new RegExp('appPackage/(.+)','ig');
return parseInt(reg.exec(str)[1].split('.').join(""))
}
var share_story = document.getElementById('share_story');
var share_story2 = document.getElementById('share_story2');
var userAgent = navigator.userAgent.toLowerCase();// get ua
if(userAgent.indexOf("appPackage") != -1){
// app in
if(getVersion(userAgent) >= 131){
share_story.setAttribute('href','appPackage://com.appPackage/share/');
share_story2.setAttribute('href','appPackage://com.appPackage/share/');
}else{
share_story.setAttribute('href','appPackage://com.appPackage/');
share_story2.setAttribute('href','appPackage://com.appPackage/');
}
}else{
// not app
share_story.setAttribute('href','appPackage://com.appPackage/');
share_story2.setAttribute('href','appPackage://com.appPackage/');
}
随机展示一段文字
var quotes=new Array('第一段','第二段','第三段');
var quote_note;
quote_note=quotes[parseInt(Math.random()*5)];
document.write(quote_note);
数学运算
除法计算百分比并保留小数点后2位
document.write(Math.round(5 / 9 * 10000) / 100.00 + "%");
JavaScript中的Date
得到本地时间，在不同时区打印 new Date() ，输出的结果将会不一样：
new Date();
得到本地时间距 1970年1月1日午夜（GMT时间）之间的毫秒数：
new Date().getTime();
返回本地时间与 GMT 时间之间的时间差，以分钟为单位：
new Date().getTimezoneOffset();
在不同的地区按当地时区显示当地时间
如何在任何地方都能正确显示当地时间（只要知道该地的timezone）：
//目标表时间，东八区
let timezone = 8；
//获取本地时间与格林威治时间的时间差(注意是分钟，记得转换)
const diff = new Date().getTimezoneOffset();
//根据本地时间和时间差获得格林威治时间
const absTime = new Date().getTime() + diff * 60 * 1000;
//根据格林威治时间和各地时区，得到各地时区的时间
let localTime = new Date(absTime + timeZone * 60 * 60 * 1000)；
//处理夏令时(isDST为自己封装的处理方法)
if(isDST(localTime, country)) {
localTime = new Date(absTime + (timeZone + 1) * 60 * 60 * 1000)；
}
return localTime;
参考：https://zhuanlan.zhihu.com/p/135951778
复制内容
复制指定单行文字
将要复制的内容写在 button 标签中。
优点：可以无限复用。
缺点：如果页面写了内容，还有重复在 button 标签写。不支持多行
<button onclick="copyToClip('内容')"> Copy </button>
/**
* 复制内容到粘贴板
* content : 需要复制的内容
* message : 复制完后的提示，不传则默认提示"复制成功"
*/
function copyToClip(content, message) {
var aux = document.createElement("input");
aux.setAttribute("value", content);
document.body.appendChild(aux);
aux.select();
document.execCommand("copy");
document.body.removeChild(aux);
if (message == null) {
alert("复制成功");
} else{
alert(message);
}
}
复制指定多行文字
/**
* 复制多行内容到粘贴板
* contentArray: 需要复制的内容（传一个字符串数组）
* message : 复制完后的提示，不传则默认提示"复制成功"
*/
function copyToClip(contentArray, message) {
var contents = "";
for (var i = 0; i < contentArray.length; i++) {
contents += contentArray[i] + "\n";
}
const textarea = document.createElement('textarea');
textarea.value = contents;
document.body.appendChild(textarea);
textarea.select();
if (document.execCommand('copy')) {
document.execCommand('copy');
}
document.body.removeChild(textarea);
if (message == null) {
alert("复制成功");
} else{
alert(message);
}
}