发表于： 2020-08-07 23:59:18
1 933
今天完成的事情：
大致完成了页面布局
解决图片大小问题
css
* {
margin: 0;
padding: 0;
list-style: none;
}
html {
font-size: 62.5%;
}
body {
background-color: #f0f0f0;
}
.nav {
display: flex;
justify-content: space-between;
align-items: center;
height: 4rem;
font-size: 1.7rem;
color: white;
background-color: #29bde0;
margin-bottom: 1rem;
padding: 0 2%;
}
.nav img {
zoom: .5;
}
main {
width: 96%;
margin: 0 auto;
/*
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
*/
}
.firstbox {
display: flex;
justify-content: space-between;
background-color: white;
height: 30rem;
}
.box1 {
width: 20%;
text-align: center;
font-size: 1.7rem;
border-right: 1px solid black;
}
.box2 {
width: 80%;
position: relative;
}
.bs {
margin: 0 2rem;
display: flex;
justify-content: space-between;
}
.bo {
width: 100%;
color: blue;
text-align: center;
padding: 2rem 0;
border-top: 1px solid black;
position: absolute;
bottom: 0;
}
#killer,
#person {
width: 40px;
background-color: #e1e1e1;
border: 0;
font-size: 1.4rem;
}
.boxs {
background-color: white;
font-size: 1.4rem;
margin: 0.5rem 0;
}
.bigbox {
background-color: white;
width: 100%;
}
.box3 {
height: 4rem;
display: flex;
align-items: center;
/* justify-content: center; */
width: 100%;
font-size: 1.4rem;
}
#player {
width: 40px;
background-color: #e1e1e1;
border: 0;
font-size: 1.4rem;
}
/* 滑动条布局 */
.box4 {
display: flex;
justify-content: space-around;
align-items: center;
width: 80%;
margin: 2rem auto 2rem auto;
zoom: .5;
}
/*横条样式*/
input[type=range] {
-webkit-appearance: none;
/*清除系统默认样式*/
width: 90%;
height: 5px;
/*横条的高度*/
background-color: #fab344;
outline: none;
cursor: pointer;
}
/*拖动块的样式*/
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
/*清除系统默认样式*/
width: 6rem;
height: 3.5rem;
background: url("./images/设置页面_01.png") no-repeat;
border: none;
cursor: pointer;
}
.pic1 {
width: 3rem;
height: 3.5rem;
background: url("./images/设置页面_02.png") no-repeat 50%;
outline: none;
border: none;
}
.pic2 {
width: 3rem;
height: 3.5rem;
background: url("./images/设置页面_03.png") no-repeat 50%;
outline: none;
border: none;
}
/* 发牌按钮 */
.fn {
text-align: center;
margin-top: 20px;
}
.fn button {
width: 96%;
height: 50px;
font-size: 2rem;
color: white;
background-color: orange;
border: 0;
outline: none;
}
js:
//获取输入玩家input节点
var player = document.getElementById("player");
// 获取杀手input节点
var killer = document.getElementById("killer");
// 获取平民input节点
var person = document.getElementById("person");
// 利用oninput输入事件触发玩家input属性
player.oninput = function () {
var x = /\D/g;//定义正则，非数字规则
this.value = this.value.replace(x, "");// 符合正则规则替换为空值
gain(this.value);// 获取当前对象输入的值
}
var arr = [];
// 把获取的值赋给killer和person两个input
function gain(value) {
killer.value = Math.round(value - (value / 2 + value / 6 + value / 24.1));
person.value = Math.round(value / 2 + value / 6 + value / 24.1);
// 当玩家值小于4或大于18赋给killer和person值为空
if (value < 0 || value > 18) {
killer.value = "";
person.value = "";
} else {
// 当玩家值小于4或大于18把killer和person以组数形式输出
for (var i = 0; i < killer.value; i++) {
arr.push("杀手");//输出杀手的数量push到数组
}
for (var i = 0; i < person.value; i++) {
arr.push("平民");//输出平民的数量push到数组
}
}
}
gain(player.value);//自运行
var array = arr;//访问全局变量arr
// // 点击button按钮判断条件
function button() {
// 获取输入玩家input的value的值
var count = document.getElementById("player").value;
// 判断条件符合弹出提示窗口,否则进入下一个页面
if (count < 0 || count > 18) {
confirm("请输入正确的玩家数量。");
} else {
// 洗牌算法
if (array) {
for (var i = array.length - 1; i > 0; i--) {
// 打乱数组的玩家
var j = Math.floor(Math.random() * (i + 1));
var temp = array[i];
array[i] = array[j];
array[j] = temp;
}
console.log(array);
}
// location.href = "check.html";//进入下一个页面
}
return false;//冒泡事件
}
console.log(array);
// 键盘事件
document.onkeydown = function (event) {
var e = event || window.event || arguments.callee.caller.arguments[0];
if (e && e.keyCode == 13) {
button();
}
};
function myFunction() {
document.getElementById("player").onclick();
}
//
var inputNumber = document.getElementById("inputNumber");
var rangeNumber = document.getElementById("rangeNumber");
//玩家人数的输入框与滚动条同步
function getNumber() {
if (inputNumber.value >= 4 && inputerNumber.value <= 18) {
inputNumber.value = rangeNumber.value;
}
else {
alert("请输入玩家人数");
}
}
//滚动条改变玩家人数随着改变
function change() {
inputNumber.value = rangeNumber.value;
}
//减号按钮与滚动条同步
function btLeft() {
rangeNumber.value--;
if (inputNumber.value <= 4) {
alert("人数不足");
}
else {
inputNumber.value = rangeNumber.value;
}
}
//加号按钮与滚动条同步
function btRight() {
rangeNumber.value++;
if (inputNumber.value >= 18) {
alert("人数太多");
}
else {
inputNumber.value = rangeNumber.value;
}
}
遇到的问题
1.文字如何竖直排列
2.如何设置点击发牌时input框的值改变，目前实现了键盘事件的改变，点击事件不成功
// 链接发牌按钮
function myFunction() {
document.getElementById("player").onclick();
}
返回列表
评论