JavaScript 笔记

相关专题

  • 你不可不知的 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>

方法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);
    }
}

回到顶部按钮第一屏隐藏

纯 JavaScript 回到顶部，第一屏不显示按钮的效果。

便于移植把颜色写到行内了。

如果不想要第一屏隐藏可以移除 <script>标签及其中内容。

之所以使用 span 标签而不是 a 标签有利于 SEO。

<span id="backToTop" onclick="window.scrollTo({ top: 0, behavior: 'smooth' });" style="position: fixed; right: 1em; bottom: 1em; width: 2.5em; background: blue; color: #fff; padding: 0.5em 0.4em; line-height: 1.1em; border-radius: 0.4em; cursor: pointer; display: none;">回到顶部</span>
<script>
    // backToTopButton
    window.onscroll = function() {
        var backToTopButton = document.getElementById("backToTop");
        if (document.body.scrollTop > window.innerHeight || document.documentElement.scrollTop > window.innerHeight) {
            backToTopButton.style.display = "block";
        } else {
            backToTopButton.style.display = "none";
        }
    };
</script>

页面内全部锚点链接点击时平滑滚动

// href # scroll
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function(e) {
        e.preventDefault();

        document.querySelector(this.getAttribute('href')).scrollIntoView({
            behavior: 'smooth'
        });
    });
});

UA 头

英文全称：User-Agent String Format

常用UA配置

  • 浏览器UA标识
    • 微信 MicroMessenger

模拟设备 UA 标识参数

设备UA参数
iphone 6Mozilla/5.0 (iPhone; CPU iPhone OS 8_0 like Mac OS X) AppleWebKit/600.1.3 (KHTML, like Gecko) Version/8.0 Mobile/12A4345d Safari/600.1.4
iphone 6plusMozilla/5.0 (iPhone; CPU iPhone OS 8_0 like Mac OS X) AppleWebKit/600.1.3 (KHTML, like Gecko) Version/8.0 Mobile/12A4345d Safari/600.1.4
iphone 5Mozilla/5.0 (iPhone; CPU iPhone OS 7_0 like Mac OS X; en-us) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53
iphone 4Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_2_1 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8C148 Safari/6533.18.5
Samsung I9505 Galaxy S4Mozilla/5.0 (Linux; Android 4.2.2; GT-I9505 Build/JDQ39) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.59 Mobile Safari/537.36
Samsung Galaxy Note 3Mozilla/5.0 (Linux; U; Android 4.3; en-us; SM-N900T Build/JSS15J) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30
Nexus 4Mozilla/5.0 (Linux; Android 4.4.2; Nexus 4 Build/KOT49H) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.122 Mobile Safari/537.36
Nexus 5Mozilla/5.0 (Linux; Android 4.4.4; Nexus 5 Build/KTU84P) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/38.0.2125.114 Mobile Safari/537.36

获取更多设备信息

获取设备时区

Intl.DateTimeFormat().resolvedOptions().timeZone

demo

<p id="demo">时区加载中</p>

<script>
document.getElementById("demo").innerHTML = Intl.DateTimeFormat().resolvedOptions().timeZone;
</script>

时区加载中......

回到顶部

Copyright © 2017-2024 1px.run 像素教程 Distributed by an MIT license.

Site updated at 2024-12-20 08:28