| 【MOOC】JS脚本｜便于复制粘贴中国大学MOOC网站的测试题和选项 | 您所在的位置：网站首页 › 大学课程题目 › 【MOOC】JS脚本｜便于复制粘贴中国大学MOOC网站的测试题和选项 |
【MOOC】JS脚本｜便于复制粘贴中国大学MOOC网站的测试题和选项
|
文章目录
运行结果完整代码可复用的部分1. 删除指定Class或Id的DOM元素2. 在页面上添加按钮并绑定事件、添加css、class3. 等待页面加载完成，运行异步函数4. 选中某个DOM元素的文本并复制5. 数组去重（ES6支持）6. 递归获得特定Class或者Id的子节点7. 向DOM元素中追加文本(包括\n换行)8. Toast实现(轻弹窗)9. sleep函数以及正确使用方式10. forEach不能对空数组遍历
运行结果
添加三个按钮，DEL删除多余元素，(刷新复原) COPY一键复制所有题目和选项的文本至剪切板中，暂不支持图片复制。(不记录正确答案) 鼠标移至文字上方即可显示“复制”、“必应搜索”两个按钮。 DISABLE可以禁用“复制”、“必应搜索”避免影响做题，禁用后将变成ABLE按钮。 可以用"x"关闭按钮，关闭后会变成"s"，再次点击按钮会重现。 下图是个GIF图，如果不会动，请右键在新标签页打开它。 GreasyFork链接(可直接安装) 具体代码有点长，就不贴了，下面记录部分实现细节。 可复用的部分 1. 删除指定Class或Id的DOM元素 function delAll(){ var delClass=["qaCate","m-nav-container","scoreLabel","m-learnhead","m-learnleft","totalScore","u-learn-moduletitle","j-activityBanner","j-activityBanner"],i,j; var delId=['j-activityBanner']; //注意倒序删除，先删除前面的结点时，js会自动补全dom列表 for(i=delClass.length-1;i>=0;i--) { let list=document.getElementsByClassName(delClass[i]); for(j=list.length-1;j>=0;j--) { list[j].remove(); } } for(i=delId.length-1;i>=0;i--) { let dom=document.getElementById(delId[i]); dom.remove(); } } 2. 在页面上添加按钮并绑定事件、添加css、class function createAButton(element,value,onclick,css,cla="temp"){ var Button = document.createElement("input"); Button.type="button"; Button.value=value; Button.onclick=onclick; Button.setAttribute("style",css) ; Button.setAttribute("class",cla) ; element.appendChild(Button); return Button; } 3. 等待页面加载完成，运行异步函数 async function mainFunc(){ //code here. } (function() { 'use strict'; // add mainFunc to onload var oldonload = window.onload; if (typeof window.onload != 'function') { mainFunc(); } else { window.onload = function() { oldonload(); mainFunc(); } } // Your code here... })(); 4. 选中某个DOM元素的文本并复制默认不移除被复制节点 function selectText(element) { if (document.createRange) { let range = document.createRange(); range.selectNodeContents(element); var selection = window.getSelection(); selection.removeAllRanges(); selection.addRange(range); } else { alert('none'); } } function copyAll(element,del=0){ selectText(element); if (document.execCommand('copy')) { Toast("复制成功",500); if(del){ element.remove(); } } } 5. 数组去重（ES6支持） function unique (arr) { return Array.from(new Set(arr)) } 6. 递归获得特定Class或者Id的子节点 var childList=[]; function getDeepChildByOrder(limit){ let copyClass=["position","f-richEditorText","optionPos"],i,j; let copyId=[]; var child=limit.children; for(i=0;i if(child[i].className.includes(copyClass[j])){ childList.push(child[i]); //console.log(child[i].innerText); } } for(j=0;j childList.push(child[i]); //console.log(child[i]); } } if(child[i].children){ getDeepChildByOrder(child[i]); } } } 7. 向DOM元素中追加文本(包括\n换行)换行用元素实现。 function addTextWithBR(element,str){ var textNode,i; str=str.split(/[\n]/);//分割字符串 for(i=0;i let br=document.createElement('br'); element.appendChild(br); } } } 8. Toast实现(轻弹窗) function Toast(msg, duration) { duration = isNaN(duration) ? 3000 : duration; var m = document.createElement('div'); m.innerHTML = msg; m.style.cssText = "font-family:siyuan;max-width:60%;min-width: 150px;padding:0 14px;height: 40px;color: rgb(255, 255, 255);line-height: 40px;text-align: center;border-radius: 4px;position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 999999;background: rgba(0, 0, 0,.7);font-size: 16px;"; document.body.appendChild(m); setTimeout(function() { var d = 0.5; m.style.webkitTransition = '-webkit-transform ' + d + 's ease-in, opacity ' + d + 's ease-in'; m.style.opacity = '0'; setTimeout(function() { document.body.removeChild(m) }, d * 1000); }, duration); } 9. sleep函数以及正确使用方式 function sleep (time) { return new Promise((resolve) => setTimeout(resolve, time)); } async function Func(){ await sleep(1000); console.log('结合async使用就不至于阻塞'); } Func(); 10. forEach不能对空数组遍历以上便是本次代码的所有需求和难点。 |
【本文地址】
公司简介
联系我们