Javascript 如果是移动的，发送到不同的随机站点阵列_Javascript_Html

Javascript 如果是移动的，发送到不同的随机站点阵列

javascript html

Javascript 如果是移动的，发送到不同的随机站点阵列,javascript,html,Javascript,Html,我目前在我的网站上有一个页面，当你进入时，它会将你转发到我网站上的一个随机页面。现在，如果用户在手机上查看，我正试图缩小该列表。我很难弄明白这一点。现在，我在脚本部分中创建了两个不同的onLoad函数，以及删除基于屏幕大小加载它的html的媒体查询 .电话{ 显示：无； } @仅介质屏幕和（最大宽度：800px）{ .电脑{ 显示：无； } .电话{ 显示：内联； } } @仅介质屏幕和（最大宽度：400px）{ .电脑{ 显示：无； } .电话{ 显示：内联； } } 一些事情 divs没

我目前在我的网站上有一个页面，当你进入时，它会将你转发到我网站上的一个随机页面。现在，如果用户在手机上查看，我正试图缩小该列表。我很难弄明白这一点。现在，我在脚本部分中创建了两个不同的onLoad函数，以及删除基于屏幕大小加载它的html的媒体查询


.电话{
显示：无；
}
@仅介质屏幕和（最大宽度：800px）{
.电脑{
显示：无；
}
.电话{
显示：内联；
}
}
@仅介质屏幕和（最大宽度：400px）{
.电脑{
显示：无；
}
.电话{
显示：内联；
}
}

一些事情

div

s没有

onload

事件——这项荣誉是为

主体

保留的。因此，我将您的

onload

调用移动到body标记<代码>。退房

显示：无

不会阻止加载元素，它只是阻止元素出现在页面上

您甚至不需要为此使用

div

s。如果你看看我是如何重写你正在尝试做的事情的，你会发现页面上没有任何div。我只需调用函数

onload

并替换

openLink（）函数中的位置


使用window.location.href
更改页面的URL
在JavaScript函数结束时，不需要返回false
。当它们结束时，它们只是返回到程序流。（但如果您确实从期望返回值但没有返回值的对象调用了它们，则会得到未定义的
）
我没有更新openLink（）
以根据大小从不同的数组中进行选择，但您应该使用类似let windowWidth=window.innerHeight
并根据值使用if
语句。另外，请看一下如何在JavaScript中使用和填充数组
<head>
    <script type="text/javascript">

        //get size of window using window.innerWidth and make the link array according to the value
        // Create an array of the links to choose from:
        function openLink() {
            var links = new Array();
            links[0] = "spinguy.html";
            links[1] = "hardware.html";
            links[2] = "flappymatt.html";
            links[3] = "spinzone.html";
            links[4] = "shlink.html";
            links[5] = "goop.html";
            links[6] = "spinzone.html";
            links[7] = "index1.html";
            links[8] = "ghoul.html";
            links[9] = "grandma.html";
            // Chooses a random link:
            var i = Math.floor(Math.random() * links.length);
            // Directs the browser to the chosen target:
            window.location.href = links[i];
        }

    </script>

</head>

<body onload="openLink()"></body>

</html>



//使用window.innerWidth获取窗口的大小，并根据该值生成链接数组
//创建要从中选择的链接数组：
函数openLink（）{
var links=新数组（）；
链接[0]=“spinguy.html”；
链接[1]=“hardware.html”；
链接[2]=“flappymatt.html”；
链接[3]=“spinzone.html”；
links[4]=“shlink.html”；
链接[5]=“goop.html”；
链接[6]=“spinzone.html”；
链接[7]=“index1.html”；
链接[8]=“ghoul.html”；
链接[9]=“grandman.html”；
//选择一个随机链接：
var i=Math.floor（Math.random（）*links.length）；
//将浏览器指向所选目标：
window.location.href=链接[i]；
}

首先，您的onload
属性将不起作用，因为它只是HTML元素子集上的有效属性，即：

，
，
，
，
，
，

这是因为这些元素具有某种与之相关联的异步加载。查看本页以供参考
根据您的描述，我假设您希望这些onload
事件发生在
上，因为它具有独特的行为“在网页完全加载所有内容后执行脚本”
这没关系，因为您不需要将openLink（）
和openPhoneLink（）
的函数分开，为了简单起见，可以将它们折叠成一个函数
您可以避免@media CSS查询的混乱，因为Javascript能够确定视口的宽度和高度

窗口.屏幕.宽度
-设备宽度
窗口.屏幕.高度
-设备高度

如果您想真正了解维度和设备规则，您可以找到类似的引用，这些引用提供了Javascript中不同维度变量的详细说明
现在，回到手头的问题
您可以使用Chrome Developer工具等工具测试设备切换，在移动设备之间切换并刷新浏览器。在这种情况下，我的800像素检查不够好，不足以知道iPad不是电脑，但你可以在这里输入你想要的任何规则
我冒昧地为您的链接提供了一个更可重用的数据结构。我希望这能帮助你：
<html>
<head>
<script type="text/javascript">

const Device = {
  COMPUTER: "computer",
  PHONE: "phone"
}

const links = [
  { href: "spinguy.html", computer: true, phone: true, },
  { href: "hardware.html", computer: true, phone: true, },
  { href: "flappymatt.html", computer: true, phone: true, },
  { href: "spinzone.html", computer: true, phone: false, },
  { href: "shlink.html", computer: true, phone: true, },
  { href: "goop.html", computer: true, phone: false, },
  { href: "index1.html", computer: true, phone: false, },
  { href: "ghoul.html", computer: true, phone: true, },
  { href: "grandma.html", computer: true, phone: true, },
]

const randomIndex = (length) => {
  return Math.floor(Math.random() * length)
}

const device = () => {
  // modify as needed to distinguish devices you care about
  return window.screen.width >= 800 ? Device.COMPUTER : Device.PHONE
}

const openRandomLink = () => {
  const deviceKey = device()
  // console.log("deviceKey", deviceKey)
  const validLinks = links.filter(link => link[deviceKey])
  const randomLinkIndex = randomIndex(validLinks.length)
  const randomLink = validLinks[randomLinkIndex].href
  // console.log("randomLink", randomLink)
  window.location.href = randomLink
}

</script>

</head>
<body onload="openRandomLink()">
</body>
</html>


常数设备={
电脑：“电脑”，
电话：“电话”
}
常量链接=[
{href:“spingguy.html”，计算机：true，电话：true，}，
{href:“hardware.html”，计算机：true，电话：true，}，
{href:“flappymatt.html”，计算机：true，电话：true，}，
{href:“spinzone.html”，计算机：true，电话：false，}，
{href:“shlink.html”，计算机：true，电话：true，}，
{href:“goop.html”，计算机：true，电话：false，}，
{href:“index1.html”，计算机：true，电话：false，}，
{href:“ghoul.html”，计算机：true，电话：true，}，
{href:“grandma.html”，计算机：true，电话：true，}，
]
常量随机索引=（长度）=>{
返回Math.floor（Math.random（）*长度）
}
常量设备=（）=>{
//根据需要进行修改，以区分您关心的设备
返回窗口.screen.width>=800？设备。计算机：设备。电话
}
常量openRandomLink=（）=>{
const deviceKey=设备（）
//日志（“deviceKey”，deviceKey）
const validLinks=links.filter（link=>link[deviceKey]）
常量随机链接索引=随机索引（validLinks.length）
const randomLink=validLinks[randomLinkIndex]。href
//日志（“随机链接”，随机链接）
window.location.href=randomLink
}
我在帖子中没有提到它，但是@Katie.Sun就如何填充数组提出了一些好的观点。在这种情况下