我正在尝试完成一个小练习,当点击中间的大按钮并且小点改变颜色时刷新页面。 我已经停止了页面滚动,所以页面充满了点,但我注意到溢出属性在不同的浏览器上的行为不同。然后我想到了另一个问题,在手机或平板电脑上,点会再次显示不同! 因此,我不确定这是否可行,但是所需的结果是循环创建点,直到屏幕已满并且按钮显示在屏幕中间。 有人可以告诉我这个想法是否可行,因为我还没有找到任何类似的问题。或者,如果有更好的方法来获得我想要的结果。如果你有时间,请你简要解释一下为什么我想了解它的工作原理并从中学习。 所以... 这是JavaScript
var htmlDot = "";
var red;
var green;
var blue;
var rgbColor;
function colourSelect() {
return Math.floor(Math.random() * 256 );
}
for(var i = 1; i<=100; i+=1) {
red = colourSelect();
green = colourSelect();
blue = colourSelect();
rgbColor = "rgb(" + red + "," + green + "," + blue + ")";
htmlDot += "<div style=\"background-color:"+ rgbColor + " \"></div>";
}
document.write(htmlDot);
这是HTML
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<button id="refresh">Click Me!</button>
<script src="script.js"></script>
</body>
</html>
这是CSS
body {
position: relative;
overflow: hidden;
}
#refresh {
font: 40px bold;
font-family: sans-serif;
width: 200px;
height: 200px;
display: inline-block;
border-radius: 50%;
margin: 5px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
background-color: rgb();
}
div {
width: 50px;
height: 50px;
display: inline-block;
border-radius: 50%;
margin: 5px;
}
提前谢谢
答案 0 :(得分:1)
考虑到浏览器窗口的尺寸,您必须在浏览器窗口中找出适合的点数,而不是使用100作为点数。
var w = window.innerWidth; // browser width
var h = window.innerHeight; // browser height
var size = 60; // 50px + 5px + 5px (width or height) + (left or top margin) + (right or bottom margin)
var hdots = Math.floor(w/size); // how many dots fit horizontally
var vdots = Math.floor(h/size); // how many dots fit vertically
var numDots = hdots * vdots;
答案 1 :(得分:1)
我认为你正在寻找类似的东西:
https://jsbin.com/racahapevi/edit?html,css,js,output
关键点:
<html>
,<body>
宽度和高度定义为视口的100%这里有一些代码:
var numDots = hdots * vdots;
while(numDots--){
red = colourSelect();
green = colourSelect();
blue = colourSelect();
rgbColor = "rgb(" + red + "," + green + "," + blue + ")";
htmlDot += "<div class='dot' style=\"background-color:"+ rgbColor + " \"></div>";
}