[散修弟子]CSS-7961|2020年02月21日的日报-技能树.IT修真院

发表于： 2020-02-21 23:39:09

1 1274

今天完成的事

1.继续学习一些Javascript的基础知识

2.开始js任务2

3.初步架构任务二跳转到的玩家配置页面

4.完善整个页面使其初步达到要求

学习了 type=“range”的html5属性

并完成滑块部分

5。学习一下type=“range”属性的具体使用以及如何美化

6.美化滑轨滑块效果并初步完成页面

7.学习正则表达式的知识并编写出符合出要求的正则表达式

var RE = /^[6-9]$|^1+[0-8]$/;   

8.使用正则表达式来检测输入框的输入是否正确

NUM.onkeyup = function sla(sla){
    if(RE.test(NUM.value)) {                        //将数值输入正则表达式
        stoptxt.innerText = "";                     //符合条件清除警告
        var sla = gamer1(NUM.value);
    } else{
        if(NUM.value<8){
            NUM.value = 6;  
        }else{
            NUM.value = 18; 
        }
        stoptxt.innerText = "请输入6至18的任一数字";  //显示警告
    }
    NUM.value = VA.value;
};

9.根据玩家数量得出杀手数量

function gamer1(a){                                 //自定义函数 根据玩家数量来得出杀手数量
    var nn = 1; 
    if(RE.test(a)){
        if(a<16){
            if(a<12){
                if(a<9){
                    nn = 1
                }else{
                    nn = 2
                }
            }else{
                nn = 3
            }
        }else{
            nn = 4;
        };
    }
    return nn;
}

var slayer = gamer1(NUM.value);

10.声明一个空数组并加入杀手与平民

var MATH = [];//声明空数组
for(var i=0;i<NUM.value;i++){//将杀手和平民加入数组 使用循环函数
    for(i=0;i<slayer;i++){
        MATH[i] = "杀手";
    }
    for(i=slayer;i<NUM.value;i++){
        MATH[i] = "平民";
    }
}

11.使用洗牌算法乱序排列

12.给下方按钮添加点击事件

BUTTON.onclick = function(){//“去发牌”点击事件
    
    if(RE.test(NUM.value)) {                        //将数值输入正则表达式                        
    } else{                                         //输入值不符合要求时
        NUM.value = "";                             //清除输入框数值
        alert("请输入4至18的任一数字");               //显示警告
    }
}

13.使玩家数量数值变动时自动修改显示出的玩家方块

    if(playergamers.childNodes.length!=1){          //假如玩家显示部分已包含有子元素
        playergamers.innerHTML = "";                //则删除所有子元素    
    };
    for(let i=0;i<VA.value;i++){                //符合正则表达式则依据数量产生元素节点插入
        let d = document.createElement("div");  //声明并创建元素节点
        d.className = "players-div";            //元素节点的类为
        d.innerText = MATH[i];                  //元素节点包含的文本内容为杀手或平民
        playergamers.appendChild(d);            //将产生的元素插入指定位置的后面
    }

14.初步完成任务2 并开始任务3

15.完成任务三的页眉

    <header class="header">
        <div class="header-d"></div>
        <div class="header-x"></div>
    </header>

.header{
    display: block;
    position: fixed;
    height: 50px;
    background-color: rgb(41, 189, 224);
    width: 100%;
    .header-d{
        position: relative;
        top: 12px;
        left: 15px;
        width: 20px;
        height: 20px;
        border-left: 3px solid white;
        border-top: 3px solid white;
        transform: rotate(-45deg);
    }
    .header-x{
        display: block;
        position: relative;
        width: 30px;
        height: 2px;
        background-color: white;
        float: right;
        transform: rotate(-45deg);
    }
    .header-x::after {
        content: "";
        display: block;
        width: 30px;
        height: 2px;
        background-color: white;
        transform: rotate(90deg);
    }
}