Question

我在JavaScript逻辑中执行了大量的HTML代码，我想知道是否有人可以指出我做错了什么？我想要实现的是基于概率运行视频。这是我的代码：

＆＃xA;＆＃xA;

 ＆lt; html＆gt;＆＃xA;＆lt; head＆gt;。＆lt; / head＆gt;＆＃xA;＆lt; body＆gt;＆ #xA;＆lt; script＆gt;＆＃xA; function myFunction（）{＆＃xA; var chance =（（Math.random（）* 100）+1）＆＃xA; if（偶然＆gt; = 0 ||机会＆lt; = 50）{＆＃xA;＆＃xA; ＆lt; video controls autoplay name =“media”＆gt;＆＃xA; ＆lt; source src =“http://webmup.com/195a3/vid.webm”type =“video / webm”＆gt;＆＃xA; ＆LT; /视频＆GT;＆＃XA;＆＃XA;}＆＃XA;别的{＆＃xA;＆＃xA; ＆lt; video controls autoplay name =“media”＆gt;＆＃xA; ＆lt; iframe width =“420”height =“315”＆＃xA; ＆lt; source src =“https://www.youtube.com/embed/IdtKbq3Omkw”type =“video / webm”＆gt;＆＃xA; ＆LT; / ifrmae＆GT;＆＃XA; ＆LT; /视频＆GT;＆＃XA;＆＃XA;}＆＃XA;}＆＃XA;＆LT; /脚本＆GT;＆＃XA;＆＃XA;＆LT; / BODY＆GT;＆＃XA;＆LT; / HTML＆GT; ＆＃XA;

＆＃XA;

Answer 1

正如评论所说..那不是你应该怎么做..你可以试试这个，也许它会让你知道如何使用javascript与html结合：

import UIKit
class MyLabel: UILabel {
    var delegate: MyProtocolForSwipeRecognition!
    var gestureRecognizer: UISwipeGestureRecognizer
    init() {
        gestureRecognizer = UISwipeGestureRecognizer(target: delegate, action: "swiped")
        super.init(frame: CGRect()) //<- I believe my problem is because it thinks
        //the frame is this empty CGRect, but I don't know what else to put here.
        translatesAutoresizingMaskIntoConstraints = false
        addGestureRecognizer(gestureRecognizer)
    }
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

Answer 2

<video>等html标记应放在JavaScript函数之外且位于html的<body>标记内。

首先，您要使用getElementById查询视频元素。在这两种情况下，我们都在创建一个source元素，因此我们可以在条件块之外声明它。

我们可以使用src功能设置type和setAttribute等属性。然后，我们可以将源元素作为子元素添加到具有appendChild函数的视频元素中。

<body>
  <video id="my-video" controls autoplay name="media">
  </video>
</body>

function myFunction() {
    var video = document.getElementById("my-video");
    var source = document.CreateElement("source");
    source.setAttribute("type", "video/webm");

    var chance = (( Math.random()*100)+1)
    if (chance >= 0 || chance <= 50) {
        source.setAttribute("src", "http://webmup.com/195a3/vid.webm");
        video.appendChild(source);

    } else {
        var iframe = document.createElement("iframe");
        iframe.setAttribute("width", "420");
        iframe.setAttribute("height", "315");
        video.appendChild("iframe");
        source.setAttribute("src", "https://www.youtube.com/embed/IdtKbq30mkw");
        iframe.appendChild(source");

    }
}

Answer 3

由于你没有用jQuery标记这个，我假设你不打算使用它。尽管如此，你仍然可以使用“模板”：

将每个模板放在脚本标记中，类型为“text / template”：

<script id="withIframe" type="text/template">
  <p>With Iframe</p>
  <video controls autoplay name="media">
    <iframe width="420" height="315" <source src="https://www.youtube.com/embed/IdtKbq3Omkw" type="video/webm">
      </iframe>
  </video>
</script>

<script id="withoutIframe" type="text/template">
  <p>Without Iframe</p>
  <video controls autoplay name="media">
    <source src="http://webmup.com/195a3/vid.webm" type="video/webm">
  </video>
</script>

<div id="holder">
</div>

然后在你的javascript中根据你的逻辑加载正确的：

var iframe = document.getElementById("withIframe").innerHTML;
var noiframe = document.getElementById("withoutIframe").innerHTML;

function myFunction() {
  var chance = ((Math.random() * 100) + 1);
  var output = '';
  if (chance <= 50) {

    output = noiframe;

  } else {

    output = iframe;

  }

  document.getElementById("holder").innerHTML = output;
}

myFunction();

请注意，您的HTML中存在一些拼写错误，您的条件将始终返回true：

 chance>= 0 || chance<=50

所有正数大于0 或小于50。

这是一个工作小提琴：https://jsfiddle.net/mcgraphix/5cr4j1r7/

对于可以传入数据以填充模板的更复杂的模板，您可能需要查看Mustache或Handlebars。

Answer 4

你做不到。

但你可以使用模板。

两个w / wo jQuery

function jq(){ return $('#useJquery').prop('checked') }
function replace(){ return $('#replace').prop('checked') }

$(function(){ $('#button').click(function(){run();}) })

function run(){  
  if (jq()) {
    if (replace()) {$("#container").html('');}
    $("#container").append($((Math.round(Math.random()) ? $("#template1") : $("#template2")).html()));
  } else {
    if (replace()){document.getElementById("container").innerHTML = ''}
    document.getElementById("container").innerHTML += document.getElementById( (Math.round(Math.random()) ? "template1" : "template2")).innerHTML;
    }
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="useJquery"> Use jQuery ?
<input type="checkbox" id="replace"> Replace ?
<input type="button" id="button" value="Randomize!"/>
<script type="text/template" id="template1"><div>I chose : VIDEO 1</div></script>
<script type="text/template" id="template2"><div>I chose : VIDEO 2</div></script>
<div id="container"></div>

<script>标记内的HTML代码

4 个答案: