前端canvas實現(xiàn)電子簽約完成線上簽署功能
更新時間：2025年01月09日 08:35:32 作者：久宇詩
最近發(fā)現(xiàn)現(xiàn)在租房還是簽合同,越來越多采用電子簽約的方式進行,好處不用多說節(jié)約成本,節(jié)約時間,下面我們來看看使用canvas實現(xiàn)電子簽約完成線上簽署功能
最近發(fā)現(xiàn)現(xiàn)在租房還是簽合同，越來越多采用電子簽約的方式進行，好處不用多說節(jié)約成本，節(jié)約時間。抱著好奇的心理，嘗試自己動手實現(xiàn)一個電子簽。原來并不復(fù)雜主要通過了canvas繪畫能力進行實現(xiàn)的。
主要功能
創(chuàng)建合同模板：使用HTML和CSS創(chuàng)建一個合同模板。
添加簽名區(qū)域：在合同模板中添加一個區(qū)域用于簽名。
實現(xiàn)簽名功能：使用
將簽名保存到合同模板：將簽名繪制到合同模板中。
提供下載功能：允許用戶下載帶有簽名的合同png/pdf格式。
展示效果如下
實現(xiàn)
主要三個重要點：實現(xiàn)簽名，簽名放到指定位置，保存pdf/png
1. 實現(xiàn)簽名
const canvas = $('#signatureCanvas')[0]// document.getElementById('signatureCanvas');
const ctx = canvas.getContext('2d');
let drawing = false;
$('#signatureCanvas').on('mousedown touchstart', (e) => {
drawing = true;
draw(e);
});
$('#signatureCanvas').on('mousemove touchmove', (e) => {
if (drawing) {
draw(e);
}
});
$('#signatureCanvas').on('mouseup mouseout touchend', () => {
drawing = false;
ctx.beginPath();
});
function draw(e) {
const rect = canvas.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
ctx.lineWidth = 4;
ctx.lineCap = 'round';
ctx.strokeStyle = '#000000';
ctx.lineTo(x, y);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(x, y);
}
2. 簽名放到指定位置
//取消簽名
document.getElementById('clearButton').addEventListener('click', () => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
});
// 保存簽名
document.getElementById('saveButton').addEventListener('click', () => {
const dataURL = canvas.toDataURL();
let name = '.' + signName
if (name) {
const signTexts = document.querySelectorAll(name);
signTexts.forEach(signText => {
signText.style.backgroundImage = `url(${dataURL})`;
signText.style.backgroundSize = 'cover';
signText.textContent = ''; // 清空文本內(nèi)容
});
$('.pop').hide();
}
});
3. 保存pdf/png
這里用到了html2canvas保存圖片格式，html2pdf保存pdf格式
// 下載簽名與輸入完成后的后合同
$('#downloadAgree').click(function () {
// 你可以指定要轉(zhuǎn)換為PDF的元素
const element = document.body;
/*
html2pdf()
.from(element)
.save('page.pdf');
*/
// 將當(dāng)前頁面保存為png格式
html2canvas(element).then(canvas => {
// 創(chuàng)建一個a標(biāo)簽來下載PNG文件
const link = document.createElement('a');
link.href = canvas.toDataURL('image/png');
link.download = 'page.png';
element.appendChild(link);
link.click();
element.removeChild(link);
});
});
完成代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="author" content="cypking"></meta>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
</head>
<style>
html,
body {
height: 100%;
width: 100%;
padding: 20px;
}
.pop {
height: 100vh;
width: 100vw;
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, .5);
display: flex;
align-items: center;
justify-content: center;
}
.mark {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
h1 {
text-align: center;
margin: auto;
}
.sign {
width: 100%;
display: flex;
align-items: center;
justify-content: space-around;
}
input {
display: inline-block;
margin-left: 10px;
margin-top: 10px;
height: 24px;
line-height: 24px;
}
dl {
display: flex;
flex-direction: column;
align-items: flex-end;
}
dt,
dd {
display: flex;
align-items: center;
}
.sign-text,
.sign-date,
.sign-text1,
.sign-date1 {
margin-top: 10px;
height: 40px;
width: 80px;
border: 1px dashed #ccc;
display: flex;
align-items: center;
text-align: center;
justify-content: center;
border-radius: 4px;
cursor: pointer;
}
#signatureCanvas {
background-color: white;
}
#downloadAgree {
display: inline-block;
margin: 20px auto 40px;
}
.controlPanel {
position: fixed;
bottom: 20px;
right: 20px;
}
.party {
width: 50px;
height: 50px;
border-radius: 100%;
border: 1px dashed black;
position: relative;
margin-bottom: 20px;
}
.partya::after {
content: '甲';
width: 16px;
height: 16px;
border-radius: 100%;
font-size: 12px;
line-height: 16px;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.partyb::after {
content: '乙';
width: 16px;
height: 16px;
border-radius: 100%;
font-size: 12px;
line-height: 16px;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
</style>
<body>
<span>??</span>
<!-- 合同 -->
<div class="agreement">
<h1> 居住房屋租賃合同</h1>
<br />
<br>出租人 (甲方): <input type="text" placeholder="請輸入" />
<br>證件類型及編號:<input type="text" placeholder="請輸入" />
<br>
<br>承租人 (乙方):<input type="text" placeholder="請輸入" />
<br>證件類型及編號:<input type="text" placeholder="請輸入" />
<br>
<br>根據(jù)《中華人民共和國民法典》等有關(guān)法律、法規(guī)的規(guī)定，甲、乙雙方在平等、自愿、公平和誠實信用的基礎(chǔ)上，經(jīng)協(xié)商一致，就乙方承租甲方可依法出租的房屋事宜，訂立本合同。
<br>
<br>租金及支付方式
<br>租賃起止日期: 2025-02-01 至 2026-02-01
<br>租賃期限:1年
<br>
<br>方式①
<br>租金付款方式:年付****12元人民幣
<br>押金：***元人民幣
<br>總金額：***元人民幣
<br>（大寫）：***
<br>期數(shù)：1次
<br>
<br>租客身份信息
<br>姓名:<input type="text" placeholder="請輸入" />
<br>性別:<input type="text" placeholder="請輸入" />
<br>聯(lián)系電話:<input type="text" placeholder="請輸入" />
<br>證件類型:<input type="text" placeholder="請輸入" />
<br>證件號碼:<input type="text" placeholder="請輸入" />
<br>工作：<input type="text" placeholder="請輸入" />
<br>
<br>條款內(nèi)容
<br>第一條出租房屋情況和租賃用途
<br>1-1.甲方將*** 房屋出租給乙方。該房屋建筑面積為 *** 平方米。
<br>1-2.乙方向甲方承諾，承租該房屋僅用作居住使用。
<br>
<br>第二條交付日期和租賃期限
<br>2-1.甲、乙雙方約定，該房屋租賃期起止時間 2025-02-01 至 2026-02-01
<br>2-2.雙方同意，甲方于 *** 前將該房屋交付給乙方，由乙方進行驗收。
<br>
<br>第三條 租金及支付方式
<br>3-1.乙方使用 年付，即在租賃期限內(nèi)一次性付清支付房租。
<br>3-2.甲乙雙方約定，在租賃期間內(nèi)，該房屋采用方式①進行支付，房屋押金為 ***元，月租金 *** 元，一次性繳納費用*** 元，。(注:
雙方約定的租金為甲方凈得租金)最后一期租期不足期的，以實際居住天數(shù)計算該期租金。在租賃期間內(nèi)，未經(jīng)雙方協(xié)商一致，任何一方不得擅自調(diào)整租金標(biāo)準(zhǔn)。
<br>3-3.該房屋租賃期滿后，甲乙雙方協(xié)商一致續(xù)租的，乙方須支付甲方一個月租金作為甲方服務(wù)費，則戶屋押金自動轉(zhuǎn)為該房屋續(xù)租押金，不足部分(若有)由乙方補足。租賃期滿后甲、乙雙方確認(rèn)不續(xù)租或本合同解除后，房屋押金除用以抵扣應(yīng)由乙方承擔(dān)但尚未交納的費用(包括但不限于租金、違約金等本合同約定由乙方承擔(dān)的費用)
外，剩余部分 (若有) 應(yīng)無息退還乙方。
<br>
<br>第四條其他相關(guān)費用
<br>4-1.租賃期限內(nèi)，該房屋所發(fā)生的:水費、電費、煤氣費、有線電視費、網(wǎng)絡(luò)寬帶費、物業(yè)管理費、室內(nèi)設(shè)施維修費 (人為使用不當(dāng)?shù)膽?yīng)由乙方承擔(dān)的除外)、保潔費、暖氣費中，甲方承擔(dān)的費用為:物業(yè)管理費、暖氣費。
<br>除甲方承擔(dān)的費用外，其他費用均由乙方承擔(dān)；
<br>4-2.甲方應(yīng)依法收取本條項下費用(費用標(biāo)準(zhǔn)以國家電網(wǎng)、當(dāng)?shù)厝細饧瘓F、自來水公司等服務(wù)提供商制定的為準(zhǔn))。
<br>
<br>第五條提供材料
<br>（一）本人及同住人員，真實有效身份證件正反面照片或紙質(zhì)版復(fù)印件一份
<br>（二）本人及同住人員聯(lián)系方式
<br>（三）寵物種類及數(shù)量
<br>
<br>第六條 房屋使用要求和維修責(zé)任
<br>5-1.甲方應(yīng)確保該房屋交付時符合規(guī)定的安全條件。乙方入住 30 天內(nèi)附屬設(shè)施、設(shè)備非乙方使用不當(dāng)或不合理使用有損壞或故障時，甲方負責(zé)維修;乙方入住超過 30
天后，附屬設(shè)施、設(shè)備有損壞或故障時由乙方自行維修解決，甲方不負責(zé)維修。
<br>5-2.乙方應(yīng)對該房屋的使用安全負責(zé)。租賃期間，乙方應(yīng)合理使用并愛護該房屋及其附屬設(shè)施、設(shè)備因乙方使用不當(dāng)或不合理使用，致使該房屋及其附屬設(shè)施、設(shè)備損壞或發(fā)生故障的，乙方應(yīng)負責(zé)修復(fù)，乙方不維修的，甲方可代為維修，費用由乙方承擔(dān)。
<br>5-3.租賃期間，甲方應(yīng)定期對該房屋進行檢查、養(yǎng)護，保證該房屋及其附屬設(shè)施、設(shè)備處于正常的可使用和安全的狀態(tài)。甲方應(yīng)在檢查養(yǎng)護前 3 日通知乙方。檢查養(yǎng)護時，乙方應(yīng)予以配合。甲方應(yīng)減少對乙方使用該房屋的影響。
<br>5-4.租賃期間，乙方須全力配合甲方因該房屋注冊公司 (含:工商、稅務(wù)、資質(zhì)審批部門)所需要的實地核查，每年實地核查次數(shù)不超過 3次。若乙方以各種理由拒不配合視乙方違約，賠償甲方壹個月房租做為違約金。
<br>
<br>第七條 轉(zhuǎn)租、承租權(quán)轉(zhuǎn)讓和交換
<br>6-1.租賃期間，乙方無轉(zhuǎn)租權(quán)。
<br>6-2.租賃期間，乙方不得將該房屋轉(zhuǎn)讓給他人承租或與他人承租的居住房屋進行交換
<br>
<br>第八條 續(xù)租
<br>7-1. 該房屋租賃期限屆滿、乙方需繼續(xù)承租的，乙方應(yīng)于租賃期限屆滿前三十日內(nèi)向甲方提出續(xù)租，經(jīng)甲、乙雙方協(xié)商一致后，重新簽訂合同。乙方支付續(xù)租賬單 (包括但不限于支付租金或補足續(xù)租押金)
即視為乙方已完全了解續(xù)租租期、續(xù)租租金等重要信息并確認(rèn)該續(xù)租合同，與甲方建立房屋租賃關(guān)系。乙方不續(xù)租的，甲方有權(quán)在租賃期限屆滿前三十日內(nèi)帶人看房，乙方需給予配合。
<br>
<br>第九條 房屋返還
<br>8-1.除甲方同意乙方續(xù)租外，乙方應(yīng)在本合同的租期屆滿后 1日內(nèi)返還該房屋
<br>8-2.乙方未經(jīng)甲方書面同意逾期返還該房屋的，每逾期一日，乙方應(yīng)按該房屋日租金的 三倍向甲方支付房屋占用費。
<br>8-3.除本合同附件另有約定外，乙方返還該房屋時，該房屋及其裝修、附屬設(shè)施和設(shè)備應(yīng)當(dāng)符合正常使用后的狀態(tài)。經(jīng)甲方書面驗收認(rèn)可后，相互結(jié)清各自應(yīng)當(dāng)承擔(dān)的費用
<br>
<br>第十條 解除本合同的條件
<br>10-1.甲、乙雙方同意在租賃期內(nèi)，有下列情形之一的，本合同解除，雙方互不擔(dān)責(zé):
<br>(一) 該房屋占用范圍內(nèi)的土地使用權(quán)依法提前收回的;
<br>(二) 該房屋因公共利益需要被依法征收的;
<br>(三) 該房屋因城市建設(shè)需要被依法列入房屋拆遷許可范圍的;
<br>(四) 該房屋因不可抗力原因毀損、滅失，致使乙方不能正常使用的:
<br>(五) 簽訂本合同時，甲方已告知乙方該房屋已設(shè)定抵押，租賃期間被處分的;
<br>(六) 甲乙雙方協(xié)商一致解除本合同的。
<br>10-2.甲、乙雙方同意，甲方有下列情形之一的，乙方可書面通知甲方解除本合同，并有權(quán)要求甲方賠償損失。
<br>(一) 甲方未按合同約定按時交付該房屋，經(jīng)乙方書面催告后 7日內(nèi)仍未交付的;
<br>(二) 甲方交付的該房屋不符合本合同約定或存在重大質(zhì)量缺陷，致使乙方不能正常使用的;
<br>
<br>10-3.甲、乙雙方同意，乙方有下列情形之一的，甲方可書面通知乙方解除本合同，并有權(quán)要求乙方賠償損失。
<br>(一) 乙方擅自改變房屋居住用途的;
<br>(二) 因乙方原因造成房屋結(jié)構(gòu)損壞的:
<br>(三) 乙方擅自轉(zhuǎn)租該房屋、轉(zhuǎn)讓該房屋承租權(quán)或與他人交換各自承租的房屋的;
<br>(四) 乙方擅自增加承租同住人，或人均承租建筑面積、使用面積低于規(guī)定標(biāo)準(zhǔn)的
<br>(五) 乙方利用承租的居住房屋從事違法違規(guī)活動的:
<br>(六) 乙方逾期不支付本合同項下約定由乙方承擔(dān)的費用的(包括但不限于房屋押金、租金、水電煤費用等);
<br>(七)乙方擅自將該房屋鑰匙交付或配給非居住人員的;
<br>(八)乙方隱瞞、漏報、謊報自身傳染性疾病或隱性疾病的;
<br>(九) 乙方在未承租的房間堆放私人物品的。
<br>(十) 欠繳各項費用達月租金額 15%的。
<br>
<br>第十一條違約責(zé)任
<br>11-2.甲方未在本合同中告知乙方，該房屋出租前已抵押，造成乙方損失的，甲方應(yīng)負責(zé)賠償。
<br>11-3.乙方未征得甲方書面同意或者超出甲方書面同意的范圍擅自裝修房屋或者增設(shè)附屬設(shè)施的，甲方可以要求乙方恢復(fù)房屋原狀并賠償損失。
<br>11-4.租賃期間，非本合同約定的情況，甲方提前解除合同，甲方應(yīng)向乙方支付壹個月房屋租金作為違約金。若違約金不足抵付乙方損失的，甲方還應(yīng)負責(zé)賠償。
<br>11-5.租賃期間，非本合同約定的情況，乙方中途擅自退租的，乙方應(yīng)向甲方支付壹個月房屋租金作為違約金。若違約金不足抵付甲方損失的，乙方還應(yīng)負責(zé)賠償。
<br>11-6.租賃期間，甲方有本合同第 10-2條約定情形之一的，應(yīng)向乙方支付貳個月房屋租金作為違約金，若違約金不足抵付乙方損失的，甲方還應(yīng)負責(zé)賠償。
<br>11-7.租賃期間，乙方有本合同第 10-3 條約定情形之一的，應(yīng)向甲方支付貳個月房屋租金作為違約金，若違約金不足抵付甲方損失的，乙方還應(yīng)負責(zé)賠償。
<br>11-8租賃期間，乙方承諾租賃期內(nèi)不使用煤氣罐，不給電動車電池充電，若乙方私自違反承諾，造成意外事故與甲方無關(guān)，所有責(zé)任由乙方自行承擔(dān)。合同期內(nèi)甲方不定期實地檢查屋內(nèi)安全隱患，一經(jīng)發(fā)現(xiàn)乙方使用煤氣罐或給電動車電池充電行為，視乙方嚴(yán)重違約，甲方有權(quán)收回房屋且押金不退。
<br>
<br>第十二條 其他條款
<br>12.1
租賃期間內(nèi)，承租人是房屋的實際管理人，承租人需時刻注意防火、防盜、防觸電，不做危及自身人身安全的活動，房屋內(nèi)發(fā)生的一切安全事故都由承租人來承擔(dān)，與出租人無關(guān)，包括但不限于高空拋物，水電煤氣使用不當(dāng)，在房屋內(nèi)摔倒等，如果承租人利用此房進行不正當(dāng)?shù)慕?jīng)營或者違法活動，出租方有權(quán)無條件的立刻收回房屋，給出租方造成損失的，要按照實際損失進行賠償。
<br>12.2.本合同未盡事宜，經(jīng)甲、乙雙方協(xié)商一致，可訂立補充條款。本合同補充條款及附件，為本合同不可分割的一部分。
<br>12.3.本合同為電子合同，經(jīng)乙方在本系統(tǒng)點擊”確認(rèn)簽署“或支付本合同項下賬單 (該房屋租金及/或押金賬單) 后生效。
<br>12.4.本合同生效后，甲、乙雙方對合同內(nèi)容的變更或補充應(yīng)另行訂立合同，作為本合同的附件。本合同附件與本合同具有同等法律效力。
<br>
<br>第十三條 解決爭議的方式
<br>11-1.本合同由中華人民共和國法律、法規(guī)管轄。
<br>11-2.雙方在履行本合同過程中若發(fā)生爭議的，甲、乙雙方可協(xié)商解決或者向人民調(diào)解委員會申請調(diào)解，也可選擇下列第二種方式解決:
<br>(一) 提交當(dāng)?shù)刂俨梦瘑T會仲裁，(二) 依法向人民法院提起訴訟。
<br>
<br>其它內(nèi)容
<br>房間家具清單:
<br>床2。床墊2。衣柜1。茶幾1。沙發(fā)1。電視柜 1。椅子4。窗簾3。冰箱1。洗衣機1。鑰匙 1。電卡 1。戶門禁 1。油煙機 1。洗碗機 1。茶幾1。餐桌1。
<br>公共家具清單:
<br>
<br>
<br>
<br>
<br>
<div class="sign">
<dl>
<dt>甲方（出租人）簽字：<div class="sign-text">簽字</div>
</dt>
<dd>日期：<div class="sign-date">簽字</div>
</dd>
</dl>
<dl>
<dt>乙方（承租人）簽字：<div class="sign-text1">簽字</div>
</dt>
<dd>日期：<div class="sign-date1">簽字</div>
</dd>
</dl>
</div>
</div>
<div class="controlPanel">
<div class="party partya"></div>
<div class="party partyb"></div>
<button id="downloadAgree">下載合同</button>
</div>
<div class="pop">
<div class="mark">
<canvas id="signatureCanvas" width="700" height="400" style="border:1px solid #000000;"></canvas>
<div>
<button id="clearButton">清除簽名</button>
<button id="saveButton">保存簽名</button>
</div>
</div>
</div>
</body>
<script>
$('.pop').hide();
let signName = ''
$(' .sign-text,.sign-date , .sign-text1,.sign-date1').click(function (e) {
console.log(111, e.target.className);
signName = e.target.className
$('.pop').show();
});
const canvas = $('#signatureCanvas')[0]// document.getElementById('signatureCanvas');
const ctx = canvas.getContext('2d');
let drawing = false;
$('#signatureCanvas').on('mousedown touchstart', (e) => {
drawing = true;
draw(e);
});
$('#signatureCanvas').on('mousemove touchmove', (e) => {
if (drawing) {
draw(e);
}
});
$('#signatureCanvas').on('mouseup mouseout touchend', () => {
drawing = false;
ctx.beginPath();
});
function draw(e) {
const rect = canvas.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
ctx.lineWidth = 4;
ctx.lineCap = 'round';
ctx.strokeStyle = '#000000';
ctx.lineTo(x, y);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(x, y);
}
//取消簽名
document.getElementById('clearButton').addEventListener('click', () => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
});
// 保存簽名
document.getElementById('saveButton').addEventListener('click', () => {
const dataURL = canvas.toDataURL();
let name = '.' + signName
if (name) {
const signTexts = document.querySelectorAll(name);
signTexts.forEach(signText => {
signText.style.backgroundImage = `url(${dataURL})`;
signText.style.backgroundSize = 'cover';
signText.textContent = ''; // 清空文本內(nèi)容
});
$('.pop').hide();
}
});
</script>
<script>
// 下載簽名與輸入完成后的后合同
$('#downloadAgree').click(function () {
// 你可以指定要轉(zhuǎn)換為PDF的元素
const element = document.body;
/*
html2pdf()
.from(element)
.save('page.pdf');
*/
// 將當(dāng)前頁面保存為png格式
html2canvas(element).then(canvas => {
// 創(chuàng)建一個a標(biāo)簽來下載PNG文件
const link = document.createElement('a');
link.href = canvas.toDataURL('image/png');
link.download = 'page.png';
element.appendChild(link);
link.click();
element.removeChild(link);
});
});
</script>
</html>以上就是前端canvas實現(xiàn)電子簽約完成線上簽署功能的詳細內(nèi)容，更多關(guān)于canvas電子簽約的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Javascript中eval函數(shù)的詳細用法與說明
Javascript中eval函數(shù)的詳細用法與說明...2007-03-03
js實現(xiàn)可兼容IE、FF、Chrome、Opera及Safari的音樂播放器
這篇文章主要介紹了js實現(xiàn)可兼容IE、FF、Chrome、Opera及Safari的音樂播放器,通過自定義javascript函數(shù)audioplayer實現(xiàn)兼容各常見瀏覽器的音樂播放功能,非常具有實用價值,需要的朋友可以參考下2015-02-02
JavaScript 自定義html元素鼠標(biāo)右鍵菜單功能
這篇文章主要介紹了JavaScript 自定義html元素鼠標(biāo)右鍵菜單功能，本文通過實例代碼給大家分享實現(xiàn)思路，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-12-12
這篇文章主要為大家詳細介紹了原生js實現(xiàn)公告滾動效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12
BootStrap Validator使用注意事項(必看篇)
針對bootstrap2和bootstrap3有不同的版本，在使用bootstrap validator時需要了解其注意事項，下面小編把我遇到的注意事項分享給大家，供大家參考2016-09-09
查找字符的情況下會使用replace()方法，此方法很常見也很實用，下面有個不錯的示例，感興趣的朋友可以參考下，希望對大家有所把幫助2013-10-10
推薦幾個不錯的console調(diào)試技巧實現(xiàn)
這篇文章主要介紹了推薦幾個不錯的console調(diào)試技巧實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
這篇文章主要為大家詳細介紹了JS實現(xiàn)隨機點名器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-04-04
詳解JS中continue關(guān)鍵字和break關(guān)鍵字的區(qū)別
在javascript中continue的作用是退出當(dāng)前次循環(huán)，break的作用則是一旦當(dāng)前循環(huán)有break那么直接退出整個循環(huán)。本文將通過一些示例為大家詳細講講二者的區(qū)別，感興趣的可以了解一下2022-08-08
OpenLayers3實現(xiàn)地圖鷹眼以及地圖比例尺的添加
這篇文章主要為大家詳細介紹了OpenLayers3實現(xiàn)地圖鷹眼以及地圖比例尺的添加，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09