如何用Javascript/jQuery替换变量（并用新变量刷新网站）？_Javascript

如何用Javascript/jQuery替换变量（并用新变量刷新网站）？

javascript

如何用Javascript/jQuery替换变量（并用新变量刷新网站）？,javascript,Javascript,我有一个播放视频的网站（来自youtube）我打网球发球的场景。我希望每次用户单击页面时都能加载一个新的发球视频。我已经使用某人的精彩作品播放了视频，其中youtube视频ID是一个javascript变量。因此，现在我需要装配一个函数，在单击屏幕时，该变量会被更新（随机）和原始函数（播放视频）再次运行，更改在浏览器中播放的视频我的计划如下：创建一个包含所有youtube ID的数组（完成）创建一个函数，随机选择一个youtube ID（完成）创建一个函数，当用户单击屏幕时，将原始变量（

我有一个播放视频的网站（来自youtube）我打网球发球的场景。我希望每次用户单击页面时都能加载一个新的发球视频。我已经使用某人的精彩作品播放了视频，其中youtube视频ID是一个javascript变量。因此，现在我需要装配一个函数，在单击屏幕时，该变量会被更新（随机）和原始函数（播放视频）再次运行，更改在浏览器中播放的视频

我的计划如下：

创建一个包含所有youtube ID的数组（完成）

创建一个函数，随机选择一个youtube ID（完成）

创建一个函数，当用户单击屏幕时，将原始变量（保存原始youtube ID）更改为新的youtube ID，然后再次运行原始函数，更改屏幕上的视频

我在这里完全不知所措，因为我刚刚开始使用JS，但我认为一定有办法做到这一点。提前感谢您的帮助。我的代码如下：

JS:

HTML:

var randIdx=Math.random（）*youtubeIDs.length；
//将其四舍五入，以便可以将其用作数组索引
randIdx=parseInt（randIdx，10）；
//构建要打开的链接

randIdx正在返回0

应该是

randidx=Math.floor（Math.random（）*youtubeIDs.length+1）；
var vid=youtubeIDs[randIdx]；

我想我大部分的方法都解决了。现在我只需要点击一下就可以触发函数。这应该不会太难。谢谢大家的帮助，下面是我的代码：

“替换变量”…你的意思是，更改变量的内容？

variable=“new content”

（当然不是字面意义上的“new content”）比这要复杂一些，但本质上是的。我的代码：

var youtubeIDs=[“ise3CHsOwtU”，“4s18eq0wqdo”，“1W_KlkqnbF4”]；openStuff=函数（）{//获取一个介于0和链接数之间的随机数var randIdx=Math.random（）*youtubeIDs.length；//将其舍入，以便将其用作数组索引randIdx=parseInt（randIdx，10）；//构造要打开的链接var vid=youtubeIDs[randIdx]；}

运行时将生成一个良好的随机youtubeID，但它似乎没有更新“vid”变量。我也不知道如何使用新的变量更新vid。这是一个范围问题，并且知道更改变量不会重新运行为您使用该变量的代码……a）全局

vid

设置在代码的顶部。b）

var-vid

内部

openStuff

与全局

vid

不同-更改

vid

不会重新运行使用

vid

的代码（即

$.getJSON

）对你来说，你必须自己去做。这很有意义-谢谢。我将深入研究如何将随机生成的youtube ID放入全局“vid”变量中，然后让它运行.getJSON操作。创建一个函数…在init上调用它，在

openStuff

中你可能是对的（我不完全确定

Math

对象是如何工作的），但它似乎为我生成了一个随机的youtubeID。我正在努力解决上面的问题（用新的youtubeID更新全局“vid”变量）。感谢您的关注！

var vid = "FY-wHOEmwpI",
streams,
video_focused = true,
video_tag = $("#video"),
video_obj = video_tag.get(0);
$.getJSON("https://query.yahooapis.com/v1/public/yql", {
q: "select * from csv where url='https://www.youtube.com/get_video_info?
video_id=" + vid + "'",
format: "json"
}, function(data) {
if (data.query.results && !data.query.results.row.length) {
    streams = parse_youtube_meta(data.query.results.row.col0);
    video_tag.attr({
        src: streams['1080p'] || streams['720p'] || streams['360p']
    });

    document.addEventListener("visibilitychange", function() {
        video_focused = !video_focused ? video_obj.play() : 
video_obj.pause();
    });
} else {
        $('pre').text('Something went wrong with these serve vids.');
}
});

function parse_youtube_meta(rawdata) {
var data = parse_str(rawdata),
    streams = (data.url_encoded_fmt_stream_map + ',' + 
data.adaptive_fmts).split(','),
    result = {};
$.each(streams, function(n, s) {
    var stream = parse_str(s),
        itag = stream.itag * 1,
        quality = false,
        itag_map = {
            18: '360p',
            22: '720p',
            37: '1080p',
            38: '3072p',
            82: '360p3d',
            83: '480p3d',
            84: '720p3d',
            85: '1080p3d',
            133: '240pna',
            134: '360pna',
            135: '480pna',
            136: '720pna',
            137: '1080pna',
            264: '1440pna',
            298: '720p60',
            299: '1080p60na',
            160: '144pna',
            139: "48kbps",
            140: "128kbps",
            141: "256kbps"
        };
    //if (stream.type.indexOf('o/mp4') > 0) console.log(stream);
    if (itag_map[itag]) result[itag_map[itag]] = stream.url;
});
return result;
};

function parse_str(str) {
return str.split('&').reduce(function(params, param) {
    var paramSplit = param.split('=').map(function(value) {
        return decodeURIComponent(value.replace('+', ' '));
    });
    params[paramSplit[0]] = paramSplit[1];
    return params;
 }, {});
}





// okay let's try this shit

var youtubeIDs = [
"ise3CHsOwtU",
"4s18eq0wqdo",
"1W_KlkqnbF4"];

openStuff = function () {
// get a random number between 0 and the number of links
var randIdx = Math.random() * youtubeIDs.length;
// round it, so it can be used as array index
randIdx = parseInt(randIdx, 10);
// construct the link to be opened
var vid = youtubeIDs[randIdx];
};

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="servevids.css">

<title>Serve Vids</title>
</head>
<body>



<video loop muted autoplay playsinline id="video"></video>
<pre></pre>


<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<script src="servevids.js" type="text/javascript"></script>
</body>
</html>

html, body {
  height: 100%;
  min-height: 100%;
  background: #444;
  overflow: hidden;
}
video {
  object-fit: cover;
  width:100%;
  height:100%;
}
pre {
  padding: 1em;
  color: red;
 }

var youtubeIDs = [
"ise3CHsOwtU",
"4s18eq0wqdo",
"1W_KlkqnbF4"];

openStuff = function () {
// get a random number between 0 and the number of links
var randIdx = Math.random() * youtubeIDs.length;
// round it, so it can be used as array index
randIdx = parseInt(randIdx, 10);
// construct the link to be opened
vid = (youtubeIDs[randIdx]);
{
$.getJSON("https://query.yahooapis.com/v1/public/yql", {
q: "select * from csv where url='https://www.youtube.com/get_video_info?
video_id=" + vid + "'",
format: "json"
}, function(data) {
if (data.query.results && !data.query.results.row.length) {
    streams = parse_youtube_meta(data.query.results.row.col0);
    video_tag.attr({
        src: streams['1080p'] || streams['720p'] || streams['360p']
    });

    document.addEventListener("visibilitychange", function() {
        video_focused = !video_focused ? video_obj.play() : 
video_obj.pause();
    });
} else {
        $('pre').text('Something went wrong with these serve vids.');
}
});

 }
};