发表于: 2020-05-06 21:33:13

1 1828


今日任务

一,今天重点学习了数组乱排法;使用input range属性;正则表达式 ; 

  •   定义正则表达式
  •   正则表达式中的一些表示方法,可以匹
  •   配 '多种字符' 其中的任意一个字符。
  •   1)定义正则表达式有两种形式,一种是普通方式,一种是构造函数方式。
  •   2)普通方式:var reg=/表达式/附加参数
  •   表达式:一个字符串,代表了某种规则,其中可以使用某
  •   些特殊字符,来代表特殊的规则,后面会详细说明。
  •   附加参数:用来扩展表达式的含义,目前主要有三个参数:
  •   g:代表可以进行全局匹配。
  •   i:代表不区分大小写匹配。
  •   m:代表可以进行多行匹配。
  •  上面三个参数,可以任意组合,代表复合含义,当然也可以不加参数。

 比如在input复选框中只能输入整数,其中使用了正则表达式

<input onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}

                else{this.value=this.value.replace(/\D/g,'')}"

       onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}

                     else{this.value=this.value.replace(/\D/g,'')}">


使用input range属性

  <div class="sroll">
            <input type="button" class="sro-lf" onclick="lf()">
            <input type="range" name="sroll" id="range" min="4" max="18" oninput="nub()">
            <input type="button" class="sro-rgt" onclick="rgt()">
        </div>

做了一个css样式替换,清除系统默认样式.

input[type=range] {
    -webkit-appearancenone;/*清除系统默认样式*/
    width60vw;
    height1vw;/*横条的高度*/
    background#fab344;
    background-size100%;
    outlinenone;
    cursorpointer;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearancenone;
    height5vw;
    width8vw;
    backgroundurl(img/014.pngno-repeat
    background-size100%;
    box-shadow0 .125em .125em #3b4547/*添加底部阴影*/
}


然后实现几个要点:

1滑块拖动时数字随之跳动。

2改变框内数字时,滑块的位子会跳到相应位置。

3加减按钮点击时,滑块按秩序挪动并且数字随之滚动。(*玩家数也会变化*)

//绑定滑块拖动时输入框的数字
var ran=document.getElementById("range");
function nub() {
    e.value=ran.value;
    mach();
}
//输入框数字来控制滑块位置
function nub1() {
    if(e.value<4||e.value>18){
        false;
    }
    else{
        ran.value=e.value;
        mach();
    }
}
//加减按钮控制滑块
function lf() {  
    ran.value--;//递减点击事件
    nub();
}
function rgt() {  
    ran.value++;//递增点击事件
    nub();
}

唯一不足的是自定义进度条填充颜色还不太会做。。。。

对于数组的运用 :做了几个嵌套循环遍历来动态设置杀手和平民的数量,这种写法有些累赘,但目的还是实现了。

function mach() {
var a=document.getElementById("num3").value;
var arr=new Array();
    for(var i=0;i<a;i++){
        arr[i]=Math.floor(Math.random()*a);
        if(a<4||a>18){
            document.getElementById("num1").innerHTML=null;
            document.getElementById("num2").innerHTML=null;  
        }
        else {
            for(var k=i;k<a;k++){
                arr[k]=Math.floor(Math.random()*a);
                if(a<=5&&3*arr[k]<=a-arr[k]&&arr[k]!=0){
                    document.getElementById("num1").innerHTML=arr[k];
                    document.getElementById("num2").innerHTML=a-arr[k];     
                }
                else {
                    forvar j=k;j<a;j++){
                        arr[j]=Math.floor(Math.random()*a);
                            if(a<=12&&3*arr[j]>a-arr[j]&&2*arr[j]<=a-arr[j]&&arr[j]!=0){
                            document.getElementById("num1").innerHTML=arr[j];
                            document.getElementById("num2").innerHTML=a-arr[j]; 
                        }
                        else {
                            for(var h=j;h<a;h++){
                            arr[h]=Math.floor(Math.random()*a);
                                if(a<=18&&3*arr[h]>=a-arr[h]&&2*arr[h]<a-arr[h]&&arr[h]!=0){
                                    document.getElementById("num1").innerHTML=arr[h];
                                    document.getElementById("num2").innerHTML=a-arr[h]; 
                                }
                            }
                        }  
                    }
                }
            }
        }           
    }
}


二. 明天开始接触jquery库。


返回列表 返回列表
评论

    分享到