Closed. This question needs to be more focused。它当前不接受答案。
想改善这个问题吗？更新问题，使其仅通过editing this post专注于一个问题。
5个月前关闭。
我正在尝试创建一个垄断委员会。现在，我有四个行/列的地点和一个中心作为行中的单个元素。我要做的是在中心的每一侧设置两行和两个列，并制作一个真正的木板。
我想看起来像真正的垄断委员会。您可以检查![javascript - 如何使用其不同部分制作垄断板？-LMLPHP]( "javascript - 如何使用其不同部分制作垄断板？-LMLPHP")
注意：不要担心图像和真实的电路板不在我的范围内。我只想在中心对齐这些行。
想改善这个问题吗？更新问题，使其仅通过editing this post专注于一个问题。
5个月前关闭。
我正在尝试创建一个垄断委员会。现在，我有四个行/列的地点和一个中心作为行中的单个元素。我要做的是在中心的每一侧设置两行和两个列，并制作一个真正的木板。
const qs = str => document.querySelector(str);
const qsa = str => document.querySelectorAll(str);
const ce = (str, props) => {
let elm = document.createElement(str);
if (props) {
for (let k in props) {
elm[k] = props[k]
}
}
return elm;
}
const main = qs('#main')
const board = [{
toBuy: false,
isRegular: false,
},
...convertToObjects([
'Mardan brown 60 2,10,30,90,160,250',
'cm',
'Quetta brown 60 4,30,60,180,320,450',
'incomeTax 100',
'Airport con1 200 25',
'Mansehra blue 100 6,30,90,270,400,550',
'ch',
'Swat blue blue 100 6,30,90,270,400,550',
'Abbottabad blue 120 8,40,100,300,450,600'
]),
{
name: 'Just visiting'
},
...convertToObjects([
'Peshawar pink 140 10,50,150,450,625,750',
'Water-Works con2 150',
'Mardan pink 140 10,50,150,450,625,750',
'Swabi pink 160 12,60,180,500,700,900',
'Railway con1 200 25',
'Haripur orange 180 14,70,200,550,750,950',
'cm',
'Rawalpindi orange 180 14,70,200,550,750,950',
'Islamabad orange 200 14,70,200,550,750,950',
]),
{
name: 'Free parking'
},
...convertToObjects([
'Faisalabad red 220 18,90,250,700,875,1050',
'ch',
'Sialkot red 220 18,90,250,700,875,1050',
'Lahore red 220 18,90,250,700,875,1050',
'Butstop con1 200 25',
'Multan yellow 260 22,110,330,800,975,1150',
'Bhawalpur yellow 260 22,110,330,800,975,1150',
'Electric-Company con2 150',
'Sibi yellow 260 22,110,330,800,975,1150',
]),
{
name: 'Jail'
},
...convertToObjects([
'Hunza green 300 26,130,390,900,1100,1275',
'Chitral green 300 26,130,390,900,1100,1275',
'cm',
'Kashmir green 300 26,130,390,900,1100,1275',
'Port con1 200',
'ch',
'Hyderabad purple 350 35,175,500,1100,1300,1500',
'incomeTax 100',
'Karachi purple 400 50,200,600,1400,1700,2000'
]),
]
function convertToObjects(arr, sets) {
return arr.map(x => {
let obj = {
toBuy: false,
isRegular: false
}
if (x === 'cm') {
return {
...obj,
name: 'Community Chest',
}
} else if (x === 'ch') {
return {
...obj,
name: 'Chance'
}
} else if (x.startsWith('incomeTax')) {
return {
...obj,
name: 'Income Tax',
secondText: `${x.split(' ')[1]}`
}
} else {
let [name, setName, price, rents] = x.split(' ')
if (rents) {
rents = rents.split(',')
return {
toBuy: true,
isRegular: true,
name,
setName,
price,
rents,
motergage: Math.floor(price / 2),
owner: -1,
isMotergaged: false,
}
} else return {
toBuy: true,
isRegular: true,
name,
setName,
price,
motergage: Math.floor(price / 2),
owner: -1,
isMotergaged: false,
}
}
})
}
const sets = ['brown', 'blue', 'pink', 'orange', 'red', 'yellow', 'green', 'purple']
board.forEach((x, i) => {
const block = ce('div', {
className: 'block'
})
if (i % 10 === 0) {
block.classList.add('corner')
}
if (sets.includes(x.setName)) {
let setColor = ce('div', {
className: 'set-color'
});
setColor.style.backgroundColor = x.setName;
block.appendChild(setColor);
}
if (x.toBuy || x.secondText) {
const blockPrice = ce('div', {
className: 'block-price',
innerHTML: '$' + (x.price || x.secondText)
});
block.appendChild(blockPrice);
}
const blockText = ce('div', {
className: 'block-text',
innerHTML: x.name
});
block.appendChild(blockText);
x.element = block;
})
for (let i = 0; i < 4; i++) {
const row = ce('div', {
className: 'row',
id: 'row' + i
});
for (let j = 9; j >= 0; j--) {
console.log()
row.appendChild(board[(i * 10) + j].element);
}
main.appendChild(row)
}.block {
height: 150px;
width: 110px;
font-size: 17px;
text-align: center;
background: #cce3c7;
font-family: cursive;
position: relative;
border: 2px solid black;
display: inline-block;
}
.corner {
width: 150px;
}
.block-text {
position: absolute;
top: 40%;
left: 50%;
transform: translateX(-50%) translateY(-50%)
}
.block-price {
position: absolute;
top: 80%;
left: 50%;
transform: translateX(-50%) translateY(-50%)
}
.set-color {
width: 100%;
height: 20px;
border-bottom: 2px solid;
}<table id="main">
<img src="https://i.imgur.com/9oGnIa4.jpg" />
</table>我想看起来像真正的垄断委员会。您可以检查
注意：不要担心图像和真实的电路板不在我的范围内。我只想在中心对齐这些行。
最佳答案
位置：绝对，每行的顶部和左侧
您可以像标题一样使用，定位绝对，并按左上角和右下角指示行。
您也可以在画布上尝试。
我将其放在代码中，以便您看到。
const qs = str => document.querySelector(str);
const qsa = str => document.querySelectorAll(str);
const ce = (str, props) => {
let elm = document.createElement(str);
if (props) {
for (let k in props) {
elm[k] = props[k]
}
}
return elm;
}
const main = qs('#main')
const board = [{
toBuy: false,
isRegular: false,
},
...convertToObjects([
'Mardan brown 60 2,10,30,90,160,250',
'cm',
'Quetta brown 60 4,30,60,180,320,450',
'incomeTax 100',
'Airport con1 200 25',
'Mansehra blue 100 6,30,90,270,400,550',
'ch',
'Swat blue blue 100 6,30,90,270,400,550',
'Abbottabad blue 120 8,40,100,300,450,600'
]),
{
name: 'Just visiting'
},
...convertToObjects([
'Peshawar pink 140 10,50,150,450,625,750',
'Water-Works con2 150',
'Mardan pink 140 10,50,150,450,625,750',
'Swabi pink 160 12,60,180,500,700,900',
'Railway con1 200 25',
'Haripur orange 180 14,70,200,550,750,950',
'cm',
'Rawalpindi orange 180 14,70,200,550,750,950',
'Islamabad orange 200 14,70,200,550,750,950',
]),
{
name: 'Free parking'
},
...convertToObjects([
'Faisalabad red 220 18,90,250,700,875,1050',
'ch',
'Sialkot red 220 18,90,250,700,875,1050',
'Lahore red 220 18,90,250,700,875,1050',
'Butstop con1 200 25',
'Multan yellow 260 22,110,330,800,975,1150',
'Bhawalpur yellow 260 22,110,330,800,975,1150',
'Electric-Company con2 150',
'Sibi yellow 260 22,110,330,800,975,1150',
]),
{
name: 'Jail'
},
...convertToObjects([
'Hunza green 300 26,130,390,900,1100,1275',
'Chitral green 300 26,130,390,900,1100,1275',
'cm',
'Kashmir green 300 26,130,390,900,1100,1275',
'Port con1 200',
'ch',
'Hyderabad purple 350 35,175,500,1100,1300,1500',
'incomeTax 100',
'Karachi purple 400 50,200,600,1400,1700,2000'
]),
]
function convertToObjects(arr, sets) {
return arr.map(x => {
let obj = {
toBuy: false,
isRegular: false
}
if (x === 'cm') {
return {
...obj,
name: 'Community Chest',
}
} else if (x === 'ch') {
return {
...obj,
name: 'Chance'
}
} else if (x.startsWith('incomeTax')) {
return {
...obj,
name: 'Income Tax',
secondText: `${x.split(' ')[1]}`
}
} else {
let [name, setName, price, rents] = x.split(' ')
if (rents) {
rents = rents.split(',')
return {
toBuy: true,
isRegular: true,
name,
setName,
price,
rents,
motergage: Math.floor(price / 2),
owner: -1,
isMotergaged: false,
}
} else return {
toBuy: true,
isRegular: true,
name,
setName,
price,
motergage: Math.floor(price / 2),
owner: -1,
isMotergaged: false,
}
}
})
}
const sets = ['brown', 'blue', 'pink', 'orange', 'red', 'yellow', 'green', 'purple']
board.forEach((x, i) => {
const block = ce('div', {
className: 'block'
})
if (i % 10 === 0) {
block.classList.add('corner')
}
if (sets.includes(x.setName)) {
let setColor = ce('div', {
className: 'set-color'
});
setColor.style.backgroundColor = x.setName;
block.appendChild(setColor);
}
if (x.toBuy || x.secondText) {
const blockPrice = ce('div', {
className: 'block-price',
innerHTML: '$' + (x.price || x.secondText)
});
block.appendChild(blockPrice);
}
const blockText = ce('div', {
className: 'block-text',
innerHTML: x.name
});
block.appendChild(blockText);
x.element = block;
})
for (let i = 0; i < 4; i++) {
const row = ce('div', {
className: 'row',
id: 'row' + i
});
for (let j = 9; j >= 0; j--) {
console.log()
row.appendChild(board[(i * 10) + j].element);
}
main.appendChild(row)
}.block {
height: 150px;
width: 110px;
font-size: 17px;
text-align: center;
background: #cce3c7;
font-family: cursive;
position: relative;
border: 2px solid black;
display: inline-block;
}
.corner {
width: 150px;
}
.block-text {
position: absolute;
top: 40%;
left: 50%;
transform: translateX(-50%) translateY(-50%)
}
.block-price {
position: absolute;
top: 80%;
left: 50%;
transform: translateX(-50%) translateY(-50%)
}
.set-color {
width: 100%;
height: 20px;
border-bottom: 2px solid;
}
.board {
padding: 200px;
}
.center-game{
height: 1028px;
}
#row0{
width: 1184px;
position: absolute;
top: 50px;
transform: rotate(180deg);
left: 56px;
}
#row1{
width: 1184px;
position: absolute;
top: 1235px;
transform: rotate(0deg);
left: 208px;
}
#row2{
width: 1184px;
position: absolute;
top: 720px;
transform: rotate(90deg);
left: -460px;
}
#row3{
width: 1184px;
position: absolute;
top: 566px;
transform: rotate(270deg);
left: 724px;
}<table id="main">
<div class="board">
<img class="center-game" src="https://i.imgur.com/9oGnIa4.jpg" />
</div>
</table>关于javascript - 如何使用其不同部分制作垄断板？ ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57447836/
10-09 02:37