Javascript 移动设备上的垂直对齐和随机颜色
我正试图对这个网站进行一些调整，但遇到了一些麻烦 “设备”徽标应在页面中水平和垂直居中。这在桌面设备上似乎可以正常工作，但在移动设备上却不一致。有关更好的示例，请参见屏幕截图- 还有一个脚本，可以在每次单击徽标时随机化颜色。然而，我想有这样的页面加载在黑色和白色，然后只随机点击。目前，我已经创建了两个单独的页面（/index和/color），但是是否仍然可以编辑javascipt，这样我就没有两个单独的页面了 当你以较小的屏幕尺寸悬停在徽标上时，似乎也会出现一个黑匣子。我不太清楚这是为什么- 对于所有的问题，我很抱歉，谢谢 索引Javascript 移动设备上的垂直对齐和随机颜色,javascript,html,css,mobile,vertical-alignment,Javascript,Html,Css,Mobile,Vertical Alignment,我正试图对这个网站进行一些调整，但遇到了一些麻烦 “设备”徽标应在页面中水平和垂直居中。这在桌面设备上似乎可以正常工作，但在移动设备上却不一致。有关更好的示例，请参见屏幕截图- 还有一个脚本，可以在每次单击徽标时随机化颜色。然而，我想有这样的页面加载在黑色和白色，然后只随机点击。目前，我已经创建了两个单独的页面（/index和/color），但是是否仍然可以编辑javascipt，这样我就没有两个单独的页面了 当你以较小的屏幕尺寸悬停在徽标上时，似乎也会出现一个黑匣子。我不太清楚这是为什么-
<!DOCTYPE html>
<html>
<head>
<link href="/apple-touch-icon.png" rel="apple-touch-icon" sizes="180x180">
<link href="/favicon-32x32.png" rel="icon" sizes="32x32" type="image/png">
<link href="/favicon-16x16.png" rel="icon" sizes="16x16" type="image/png">
<link href="/manifest.json" rel="manifest">
<meta content="#ffffff" name="theme-color">
<meta charset="UTF-8">
<meta content="Accoutrements is a design studio established in 2016 by Jacob D'Rozario and Joseph Ng." name="description">
<meta content="Accoutrements, Design, Manchester, Photography, Publishing, Screen Printing" name="keywords">
<meta content="index,follow" name="robot">
<meta content="© 2017 Accoutrements. All rights reserved." name="copyright">
<meta content="Accoutrements" name="author">
<meta content="width=device-width, initial-scale=1" name="viewport">
<title>Accoutrements</title>
<link rel="stylesheet" type="text/css" href="accoutrements.css">
<link href="https://fonts.googleapis.com/css?family=Work+Sans:400" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
</script>
</head>
<body>
<div class="corner_link about">
<a href="/about">About</a>
</div>
<div class="corner_link shop">
<a href="http://accoutrements.bigcartel.com">Shop</a>
</div>
<div class="corner_link catalogue">
<a href="/catalogue">Catalogue</a>
</div>
<div class="corner_link instagram">
<a href="http://instagram.com/accoutrements.studio">Instagram</a>
</div>
<div class="accoutrements">
<a href="/colour"><svg class="logo" id="accoutrements" viewbox="0 0 800 200" xmlns="http://www.w3.org/2000/svg">
<title>Accoutrements</title>
<path d="M32,160H24l-2,40H0L12,0H44L56,200H34ZM28,48l-4,88h8Z"></path>
<path d="M494,0h30l4,100L532,0h30V200H540V88l-8,112h-8L516,88V200H494Z"></path>
<path d="M650,0l8,112V0h20V200H652L644,74V200H622V0Z"></path>
<polygon points="318 0 318 24 332 24 332 200 356 200 356 24 370 24 370 0 318 0"></polygon>
<polygon points="686 0 686 24 700 24 700 200 724 200 724 24 738 24 738 0 686 0"></polygon>
<polygon points="466 24 486 24 486 0 442 0 442 200 486 200 486 176 466 176 466 112 482 112 482 88 466 88 466 24"></polygon>
<polygon points="594 24 614 24 614 0 570 0 570 200 614 200 614 176 594 176 594 112 610 112 610 88 594 88 594 24"></polygon>
<path d="M118,90V28c0-8.13-1.94-14.87-6-20S101.87,0,92,0H88C78.13,0,72.05,2.87,68,8s-6,11.87-6,20V172c0,8.13,1.94,14.87,6,20s10.13,8,20,8h4c9.87,0,15.95-2.87,20-8s6-11.87,6-20V110H94v64a4,4,0,0,1-8,0V26a4,4,0,0,1,8,0V90Z"></path>
<path d="M182,90V28c0-8.13-1.94-14.87-6-20s-10.13-8-20-8h-4c-9.87,0-15.95,2.87-20,8s-6,11.87-6,20V172c0,8.13,1.94,14.87,6,20s10.13,8,20,8h4c9.87,0,15.95-2.87,20-8s6-11.87,6-20V110H158v64a4,4,0,0,1-8,0V26a4,4,0,0,1,8,0V90Z"></path>
<path d="M240,8c-4.05-5.13-10.13-8-20-8h-4c-9.87,0-15.95,2.87-20,8s-6,11.87-6,20V172c0,8.13,1.94,14.87,6,20s10.13,8,20,8h4c9.87,0,15.95-2.87,20-8s6-11.87,6-20V28C246,19.87,244.06,13.13,240,8ZM222,174a4,4,0,0,1-8,0V26a4,4,0,0,1,8,0Z"></path>
<path d="M286,0V174a4,4,0,0,1-8,0V0H254V172c0,8.13,1.94,14.87,6,20s10.13,8,20,8h4c9.87,0,15.95-2.87,20-8s6-11.87,6-20V0Z"></path>
<path d="M434,76V20c0-16-7.16-20-16-20H378V200h24V112h4a4,4,0,0,1,4,4v84h24V108c0-6-2-14-10-14C434,94,434,81.52,434,76Zm-24,8a4,4,0,0,1-4,4h-4V22h4a4,4,0,0,1,4,4Z"></path>
<path d="M794,8c-4.05-5.13-10.13-8-20-8h-4c-9.87,0-15.95,2.87-20,8s-6,11.87-6,20V74c0,6.19.24,9.49,2,14s5.77,9.94,10,14l10,10c1.94,1.95,10,8,10,14v48a4,4,0,0,1-8,0V118H744v54c0,8.13,1.94,14.87,6,20s10.13,8,20,8h4c9.87,0,15.95-2.87,20-8s6-11.87,6-20V126c0-6.9-.06-11.76-2-16s-5.07-7.4-10-12c0,0-6.43-6.07-12-12-4.25-4.53-8-8.61-8-12V26a4,4,0,0,1,8,0V82h24V28C800,19.87,798.06,13.13,794,8Z"></path></svg></a>
</div>
</body>
</html>
要修复黑框，请删除css中的以下代码
a:hover {
background-color: #111;
color: #fff;
text-decoration: none;
}
$(document).ready(function() {
setTimeout(function(){
// Your color logic
}, 5000);
});
$(document).ready(function() {
setTimeout(function(){
var safeColors = ['00', '33', '66', '99', 'cc', 'ff'];
var rand = function() {
return Math.floor(Math.random() * 6);
};
var randomColor = function() {
var r = safeColors[rand()];
var g = safeColors[rand()];
var b = safeColors[rand()];
return "#" + r + g + b;
};
var color_1 = randomColor();
var color_2 = randomColor();
$(document).ready(function() {
color_change();
$('#accoutrements').click(function() {
color_change();
});
});
function color_change() {
color_1 = randomColor();
color_2 = randomColor();
$('.corner_link a').css('color', color_1);
$('.accoutrements').css('fill', color_1);
$('body').css('background', color_2);
$('.corner_link a').hover(function(){ $(this).css('color',color_2).css('background-color',color_1); }, function(){ $(this).css('color',color_1).css('background-color','transparent'); });
}
}, 5000);
});
我通过添加：
$（document）解决了Javascript的点击功能{ $(document).ready(function() {
setTimeout(function(){
// Your color logic
}, 5000);
});
$(document).ready(function() {
setTimeout(function(){
var safeColors = ['00', '33', '66', '99', 'cc', 'ff'];
var rand = function() {
return Math.floor(Math.random() * 6);
};
var randomColor = function() {
var r = safeColors[rand()];
var g = safeColors[rand()];
var b = safeColors[rand()];
return "#" + r + g + b;
};
var color_1 = randomColor();
var color_2 = randomColor();
$(document).ready(function() {
color_change();
$('#accoutrements').click(function() {
color_change();
});
});
function color_change() {
color_1 = randomColor();
color_2 = randomColor();
$('.corner_link a').css('color', color_1);
$('.accoutrements').css('fill', color_1);
$('body').css('background', color_2);
$('.corner_link a').hover(function(){ $(this).css('color',color_2).css('background-color',color_1); }, function(){ $(this).css('color',color_1).css('background-color','transparent'); });
}
}, 5000);
});