文章目录

运行结果
完整代码
可复用的部分
- 1. 删除指定Class或Id的DOM元素
- 2. 在页面上添加按钮并绑定事件、添加css、class
- 3. 等待页面加载完成，运行异步函数
- 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. 等待页面加载完成，运行异步函数

function Func(){var p1 = new Promise(usualFunc);//Func(resolve,reject),resolve返回到then，reject返回到catchp1.then(function (result) {//code here.});
}
async function mainFunc(){await Func();
}var oldonload = window.onload;
if(typeof window.onload !='function'){window.onload = mainFunc;
}else{window.onload = function(){oldonload();mainFunc();
}

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<child.length;i++){for(j=0;j<copyClass.length;j++){if(child[i].className.includes(copyClass[j])){childList.push(child[i]);//console.log(child[i].innerText);}}for(j=0;j<copyId.length;j++){if(child[i].id==copyId[i]){childList.push(child[i]);//console.log(child[i]);}}if(child[i].children){getDeepChildByOrder(child[i]);}}
}

7. 向DOM元素中追加文本(包括\n换行)

换行用<br>元素实现。

function addTextWithBR(element,str){var textNode,i;str=str.split(/[\n]/);//分割字符串for(i=0;i<str.length;i++){textNode=document.createTextNode(str[i]);element.appendChild(textNode);//注：appendChild不能通过重复调用添加两个相同节点//所以最好重新定义一个br节点添加//注2：为保证换行的正确性，最后一个分割字符串末尾不需要加换行if(i!=str.length-1){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不能对空数组遍历

以上便是本次代码的所有需求和难点。

【MOOC】JS脚本｜便于复制粘贴中国大学MOOC网站的测试题和选项相关推荐

linux 文件在哪个硬盘,中国大学MOOC: 在Linux文件系统中，文件名也存放在磁盘上，存放于磁盘的下述哪个区域答案：文件存储区...
相关问题中国大学MOOC:"唐蕃会盟碑又称为甥舅会盟碑,对吗?"; 中国大学MOOC:"If students plan to study in a second la ...
怎样获取中国大学MOOC字幕并制作笔记/可搜索的文档
声明本文中所涉及的图片以及其他材料内容,均为相关MOOC字幕获取过程当中的操作截图或代码示例,不代表个人的立场.观点.本文的核心内容是技术操作的相关说明. 求求管理员别卡我了,期末季好不容易写了一篇 ...
【神经网络与深度学习-TensorFlow实践】-中国大学MOOC课程（八）（TensorFlow基础））
[神经网络与深度学习-TensorFlow实践]-中国大学MOOC课程(八)(TensorFlow基础)) 8 TensorFlow基础 8.1 TensorFlow2.0特性 8.1.1 Tenso ...
python资源管理器计算机项目下的_高级语言程序设计（Python）_中国大学MOOC(慕课)_题库及答案...
高级语言程序设计(Python)_中国大学MOOC(慕课)_题库及答案来源:未知编辑:admin 时间:2020-06-30 更多相关问题以下选项中能正确调用fun函数的语句是charfun(c ...
批量爬取中国大学MOOC网站的媒体资源
质量声明:原创文章,内容质量问题请评论吐槽.如对您产生干扰,可私信删除. 主要参考:https://github.com/Dayunxi/getMOOCmedia 三点说明: 感谢中国大学MOOC ...
c语言只需编译不需连接,C语言程序设计-中国大学mooc
C语言程序设计-中国大学mooc http://carrottt.blog.bokee.net 2020-6-9 转载自网课答案 (www.daanplus.com) : 完整答案请关注公众号[ ...
中国大学MOOC“Python程序设计基础”第6次开课时间
推荐图书: <Python程序设计基础(第2版)>,ISBN:9787302490562,董付国,清华大学出版社,第20次印刷,清华大学出版社2019.2020.2021年度畅销图书,山东 ...
中国大学MOOC“Python程序设计基础”第4次开课
推荐图书: <Python程序设计基础(第2版)>,ISBN:9787302490562,董付国,清华大学出版社,第19次印刷,清华大学出版社2019.2020年度畅销图书,山东省高等教育 ...
【Unity入门教程】第八章人工智能【中国大学MOOC游戏引擎原理及应用】
以下均为来自中国大学mooc 游戏引擎原理及应用时的学习笔记,不含商用,仅供学习交流使用,如果侵权请联系作者删除. 文章目录 8.1 自动寻路 8.2 巡逻 8.3 视野 8.4 自动攻击 8.5 追 ...
中国大学Mooc浙大翁恺老师《零基础学Java语言》编程作业
感谢中国大学Mooc平台给我学习的机会,感谢翁恺老师深入浅出的讲解. 写此文为纪念我从无到有的学习和成长.便于以后回顾. 另外: 此答案仅供参考,用于启发没有思路的同学.切勿照搬,自欺欺人. 提交作业 ...

【MOOC】JS脚本｜便于复制粘贴中国大学MOOC网站的测试题和选项