今日任务
一，今天重点学习了数组乱排法；使用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-appearance: none;/*清除系统默认样式*/
width: 60vw;
height: 1vw;/*横条的高度*/
background: #fab344;
background-size: 100%;
outline: none;
cursor: pointer;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 5vw;
width: 8vw;
background: url(img/014.png) no-repeat;
background-size: 100%;
box-shadow: 0 .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 {
for( var 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库。
返回列表
评论