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

文章目录

• 运行结果
• 完整代码
• 可复用的部分
• • 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返回到catch
    p1.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不能对空数组遍历

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