# 实例
# 使用base64显示图片
# 在 HTML 中使用 data URL
<img src="data:image/png;base64,image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC"/>
# 在 CSS 中使用 data URL
body {
background-image: url(`data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC`)
};
# 在JavaScript中使用 data URL
var img = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC`
document.getElementById("id").src = img;
# 设置与获取Cookie
# 创建Cookie
document.cookie="username=Tom";
可以为cookie添加过期时间（UTC或GMT时间）
document.cookie="username=Tom; expires=Thu, 18 Dec 2043 12:00:00 GMT";
可以使用path参数设置cookie路径，默认情况下cookie属于当前页面
document.cookie="username=Tom; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";
# 读取Cookie
var x=document.cookie;
# 修改Cookie
和创建Cookie一样，如果cookie名相同时会覆盖之前设计的cookie
document.cookie="username=Tom; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";
# 删除Cookie
只要把过期时间设置成之前的时间即可
document.cookie='username=Tom;expires=Thu,01 Jan 1900 00:00:00 GMT'
注意：如果设置了新的 cookie(名字不一样)，旧的 cookie 不会被覆盖。 新 cookie 将添加到 document.cookie 中，所以如果重新读取document.cookie，将获得所有cookie
对于这种情况可以参考以下这个非常不错的示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<head>
<script>
function setCookie(cname,cvalue,exdays){
var d = new Date();
d.setTime(d.getTime()+(exdays*24*60*60*1000));
var expires = "expires="+d.toGMTString();
document.cookie = cname+"="+cvalue+"; "+expires;
}
function getCookie(cname){
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i].trim();
if (c.indexOf(name)==0) { return c.substring(name.length,c.length); }
}
return "";
}
function checkCookie(){
var user=getCookie("username");
if (user!=""){
alert("欢迎 " + user + " 再次访问");
}
else {
user = prompt("请输入你的名字:","");
if (user!="" && user!=null){
setCookie("username",user,30);
}
}
}
</script>
</head>
<body onload="checkCookie()"></body>
</html>
# 设置快捷键
方法一：判断实现
document.onkeydown = onKeyDown;
function onKeyDown() {
if (window.event.altKey || window.event.ctrlKey || (window.event.keyCode == 65)) {
alert("alt或者ctrl或者a");
}
}
该方法通过判断键盘输入的键值来实现快捷键功能，不影响浏览器自身的快捷键
方法二：绑定onkeydown
window.onload = function() {
window.onkeydown=function() {
event.preventDefault();
// F1~F12
switch(event.keyCode){
case 112: console.log('f1'); break;
case 113: console.log('f2'); break;
case 114: console.log('f3'); break;
case 115: console.log('f4'); break;
case 116: console.log('f5'); break;
case 117: console.log('f6'); break;
case 118: console.log('f7'); break;
case 119: console.log('f8'); break;
case 120: console.log('f9'); break;
case 121: console.log('f10'); break;
case 122: console.log('f11'); break;
case 123: console.log('f12'); break;
}
console.log(event.keyCode);
if(event.ctrlKey && event.keyCode === 83){
console.log('保存成功');
}
}
}
这种方式绑定了onkeydown，相当于重新定义了按键，所以会影响一些功能键，这些功能键的功能被重新定义，如果你不自己给它们写功能，那就相当于没功能，那么一些功能按键就会出现失灵
注意这里的event已被弃用，虽然能够使用，但是仅限于在本地测试，如果需要打包部署，会提示报错信息。在此情况下，使用 window.event暂时替代event
# 判断是否为深色模式
# 启动时或刷新时判断
const systemTheme = window.matchMedia('(prefers-color-scheme: dark)')
if (systemTheme.matches) {
//是深色mo'shi
} else {
//不是深色模式
}
# 切换模式时判断
window.matchMedia('(prefers-color-scheme: dark)')
.addEventListener('change', event => {
if (event.matches) {
//是深色模式
} else {
//不是深色模式
}
})
# 判断UserAgent是否为移动端
先把这个函数放在代码中，如果是移动端就会返回 true(真)否则就返回false(假)
function isMobile() {
try {
var urlhash = window.location.hash;
if (!urlhash.match("fromapp")) {
if (navigator.userAgent.match(/(iPhone|Android)/i)) {
return true;
} else {
return false;
}
}
} catch (err) { }
}
如果需要调用函数做判断时写以下代码
if (isMobile()){
alert("手机端")
}else{
alert("桌面端")
}
# 控件显示与隐藏
# 方法一：
特点：隐藏后，页面的位置控件还占用位置，只是不显示
隐藏控件：
document.getElementById("控件ID").style.visibility= "hidden";
显示控件：
document.getElementById("控件ID").style.visibility= "visible";
# 方法二：
特点：隐藏后，页面的位置不被占用
隐藏控件：
document.getElementById("控件ID").style.display= "none";
显示控件：
document.getElementById("控件ID").style.display= "inline";
# 获取 input 输入框内容的几种方法
# 方法 1
document.getElementById('textbox_id').value // 获取指定 id 的内容
实例
document.getElementById("searchTxt").value;
# 方法 2
使用以下方法返回 HTMLCollection:
注意：以下方法 2、3、4 和 6 返回元素的集合, 通过索引 [index] 来获取制定元素，第一个元素使用 [0]，第二个元素使用 [1]，以此类推...
document.getElementsByClassName('class_name')[index].value
HTMLCollection 接口表示一个包含了元素（元素顺序为文档流中的顺序）的通用集合（与 arguments 相似的类数组 (array-like) 对象），还提供了用来从该集合中选择元素的方法和属性。
HTML DOM 中的 HTMLCollection 是即时更新的（live）；当其所包含的文档结构发生改变时，它会自动更新。
实例
document.getElementsByClassName("searchField")[0].value;
# 方法 3
通过标签名来获取 HTMLCollection：
document.getElementsByTagName('tag_name')[index].value
实例
通过 input 标签名来获取内容：
document.getElementsByTagName("input")[0].value;
# 方法 4
以下返回 NodeList，NodeList 对象是节点的集合，通常是由属性如 Node.childNodes 和 方法，如document.querySelectorAll 返回的。
NodeList 是一个实时集合，也就是说，如果文档中的节点树发生变化，NodeList 也会随之变化。
document.getElementsByName('name')[index].value
实例
通过元素设置的 name 属性来获取内容：
document.getElementsByName("searchTxt")[0].value; // name 属性值为 searchTxt
# 方法 5
使用 CSS 的选择器来获取，这种方法更强大：
document.querySelector('selector').value // selector 是 CSS 选择器
实例
document.querySelector('#searchTxt').value; *//通过 id 获取*
document.querySelector('.searchField').value; *//通过类 class 获取*
document.querySelector('input').value; *//通过标签名获取*
document.querySelector('[name="searchTxt"]').value; *//通过 name 属性和值来获取*
# 方法 6
querySelectorAll 可以返回所有 CSS 选择器对于的元素，是一个 Nodelist。
document.querySelectorAll('selector')[index].value
实例
document.querySelectorAll('#searchTxt')[0].value; *//通过 id 获取*
document.querySelectorAll('.searchField')[0].value; *//通过类 class 获取*
document.querySelectorAll('input')[0].value; *//通过标签名获取*
document.querySelectorAll('[name="searchTxt"]')[0].value; *//通过 name 属性和值来获取*
# 读写剪贴板
# 写入剪切板
navigator.clipboard.writeText('写入的内容')
# 读取剪切板
var clipPromise = navigator.clipboard.readText();//读取剪切板
clipPromise.then(function(clipText){ //then方法获取剪切内容
alert(clipText);
});
注意：因为这里使用的是异步的返回，所以方法返回的是一个Promise对象， 要获取剪贴板内容，可以在then方法中获取。
# 点击事件
# 单击事件
方法一：在标签中通过方法响应点击事件
先在js文件写入这个函数并写好触发后要执行的事件
function demo(){
alert("点击了确定")
}
然后在html文件中，把对应的函数写在要点击的元素标签里，例如**onclick="函数名称()**
<div onclick="demo()">确定</div>
方法二：通过id定位元素实现点击事件
先在要点击的元素标签中定义个id
<div id="demo">点击</div>
再定义变量a为这个元素的id，例如var a=document.getElementById("demo")
然后再给a写入点击事件，例如a.onclick=function()
var a=document.getElementById("demo")
a.onclick=function(){
alert("点击了确定")
}
方法三：监听点击事件
先在要点击的元素标签中定义个id
<div id="demo">点击</div>
再定义变量a为这个元素的id，例如var a=document.getElementById("demo")
然后添加监听事件a.addEventListener('click', function()
var a=document.getElementById("demo")
a.addEventListener('click', function(){
alert("点击了确定")
})
# 鼠标其他键单击
var a = document.getElementById("demo")
a.onmouseup = function (e) {
//e.button == 0对应鼠标左键
if (e.button == 0) {
alert("点击了左键")
}
//e.button == 1对应鼠标中键
if (e.button == 1) {
alert("点击了中键")
}
//e.button == 2对应鼠标右键
if (e.button == 2) {
alert("点击了右键")
}
}
由于在有些浏览器使用右键会触发默认的菜单弹窗，所以如果要使用这个方法时要加入下面这些代码来阻止弹窗行为
a.oncontextmenu = function () {
return false//阻止浏览器的默认弹窗行为
}
这个并不是一个聪明的点子我们完全可以使用下面的这个方法来实现右键单击的事件，这样可以节省一些代码
# 右键单击
var a=document.getElementById('demo')
a.oncontextmenu = function(){
alert("右键单击")
return false//阻止浏览器的默认的行为
}
# 双击事件
方法一：
<button id="demo">按钮</button>
var clickBtn = document.getElementById("demo");
clickBtn.onclick = function () {
console.log("单击")
}
clickBtn.ondblclick = function () {
console.log("双击");
}
注意：这样会同时触发单击和双击的事件，如果要解决这个问题我们要通过连续点击时间间隔来判断是双击还是单击，代码如下
var clickBtn = document.getElementById("demo");
var clickTimer = null;
clickBtn.onclick = function () {
clearTimeout(clickTimer); //清除计时器
clickTimer = setTimeout(() => {
console.log("单击")
},345);
}
clickBtn.ondblclick = function () {
clearTimeout(clickTimer);
console.log("双击---");
}
方法二：
<button onclick="btnClick()" ondblclick="btndbClick()">按钮</button>
function btnClick(e) {
console.log("单击")
}
function btndbClick(e) {
console.log("双击");
}
注意：这样会同时触发单击和双击的事件，如果要解决这个问题我们要通过连续点击时间间隔来判断是双击还是单击，代码如下
var clickTimer = null;
function btnClick(e) {
clearTimeout(clickTimer); //清除计时器
clickTimer = setTimeout(() => {
console.log("单击")
},345);
}
function btndbClick(e) {
clearTimeout(clickTimer);
console.log("双击");
}
# 定时器
# 间隔执行
setInterval(function,time); 设置间隔，每间隔一段时间执行一次，间隔按照设定的时间。
示例：这里按照毫秒计，1 秒=1000 毫秒，所以这里的1000为一秒
setInterval(function(){
},1000);
第二种方法：直接调用写好的函数
function test(){
console.log("1");
}
setInterval("test()",1000);
# 超时执行
setTimeout(function,time); 设置超时,超过设定的时间执行,只执行一次
setTimeout("test()",1000);
# 清除定时器
clearTimeout()和clearInterval() 分别对应setTimeout()和setInterval()
它们可以清除对应的定时器，示例：
var timer=setInterval(function(){//把变量timer定义为这个定时器
console.log("1");
},1000)
clearInterval(timer);//清除对应的定时器
同理setTimeout()也是如此
var timer=setTimeout(function(){
console.log(111);
},1000)
clearTimeout(timer);
# 弹窗
# alert提示框
alert("你好")
# confirm消息框
var isbeauty=confirm("你的选择是什么？");
//返回一个布尔值，点击确定返回true,点击取消返回false
if(isbeauty == true ){
alert("你选择了确定")
}else{
if(isbeauty == false ){
alert("你选择了取消")
}
}
option：数据类型是字符串；是弹框里的提示文字
# prompt输入框
prompt(option1[,option2])
var Response1 = prompt("年轻人，这个金斧子是你掉的吗？","不是");
option1：数据类型是字符串；是弹框里的提示文字。
option2：数据类型是字符串；是弹框里输入框的value预留值,第二个参数为空时，弹框输入框中的值为空。
# monaco-editor(代码编辑器)
Monaco Editor 是微软开发的开源代码编辑器,它是为在基于 VS 代码源的 Web 浏览器上工作而创建的。它支持 Edge、Chrome、Firefox、Safari 和 Opera，不支持移动浏览器和移动 Web 框架。
# 官方链接：
https://microsoft.github.io/monaco-editor/ (opens new window)
# 安装
npm install monaco-editor@0.34.1
# 导入项目
<script src="monaco-editor/min/vs/loader.js"></script>
# 使用示例
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
</head>
<body>
<div id="container" style="width:800px;height:600px;border:1px solid grey"></div>
<script src="monaco-editor/min/vs/loader.js"></script>
<script>
require.config({ paths: { 'vs': 'monaco-editor/min/vs' }});
require(['vs/editor/editor.main'], function() {
var editor = monaco.editor.create(document.getElementById('container'), {
value: [
'function x() {',
'\tconsole.log("Hello world!");',
'}'
].join('\n'),
language: 'javascript'
});
});
</script>
</body>
</html>
← JavaScript 参考 →