个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在尝试在 div#leftside 内的 5 个不同位置创建 5 个图像。我确实创建了 5 个图像，但它们位于相同的位置，并且不是随机分布在我的 div 内。这是代码...有人可以帮忙吗？
<!DOCTYPE html>
<html lang="en">
<head http-equiv="content-type" content="text/html; charset=utf-8">
<title>Matching game</title>
<style type="text/css">
img {position: absolute;}
div {position: absolute;width: 500px;height: 500px;}
#rightSide { left: 500px;
border-left: 1px solid black }
</style>
<script type="text/javascript">
function generateFaces() {
var numberOfFaces = 5;
var theLeftSide = document.getElementById("leftSide");
var i = 0;
var topvar = (Math.floor(Math.random()*400));
var leftvar = (Math.floor(Math.random()*400));
if (i < 5){
numberOfFaces = document.createElement("img");
i++;
numberOfFaces.src = "http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png";
numberOfFaces.style.top = topvar + 'px';
numberOfFaces.style.left = leftvar + 'px';
theLeftSide.appendChild(numberOfFaces);
}
}
</script>
</head>
<body onload="generateFaces()">
<p>Click on the extra smiling face on the left.</p>
<div id="leftSide"></div>
<div id="rightSide"></div>
</body>
</html>
最佳答案
当您打算使用 while 循环时，您使用了 if 语句。此外，您需要将定位逻辑移至循环中。
https://jsfiddle.net/knwL2bn4/
重构:
<!DOCTYPE html>
<html lang="en">
<head http-equiv="content-type" content="text/html; charset=utf-8">
<title>Matching game</title>
<style type="text/css">
img {position: absolute;}
div {position: absolute;width: 500px;height: 500px;}
#rightSide { left: 500px;
border-left: 1px solid black }
</style>
<script type="text/javascript">
function generateFaces() {
var numberOfFaces = 5;
var theLeftSide = document.getElementById("leftSide");
var i = 0;
while (i < 5){
var topvar = (Math.floor(Math.random()*400));
var leftvar = (Math.floor(Math.random()*400));
numberOfFaces = document.createElement("img");
i++;
numberOfFaces.src = "http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png";
numberOfFaces.style.top = topvar + 'px';
numberOfFaces.style.left = leftvar + 'px';
theLeftSide.appendChild(numberOfFaces);
}
}
</script>
</head>
<body onload="generateFaces()">
<p>Click on the extra smiling face on the left.</p>
<div id="leftSide"></div>
<div id="rightSide"></div>
</body>
</html>
关于Javascript 在 div createElement 中创建 5 个 img，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35807390/
25
4
0
我覆盖了React.createElement，但是jsx的按钮好像没有调用React.createElement。 React.createElement 没有获取到 jsx 的值作为按钮。 最佳答
我支持一些旧版 JavaScript。 在 IE8 中这有效: var hi = forms[i].document.createElement('INPUT'); 在 IE 11 中，该代码会引发异
我需要在 html 代码中查找并替换一些 html 元素(我遵循了这个答案:Getting an element from PHP DOM and changing its value)，为此我检索了
我是 JavaScript 中 createElement 属性的新手。我需要从 MySQL 查询创建一个下拉菜单。我从 MySQL 查询创建了一个 PHP 数组，如下所示: 然后我写了JavaSc
function ytplayer_render_playlist(){ for(var i=0;i', { src: "http://img.youtube.com/vi/" + y
我有一些代码在 main.js 文件中复制 Javascript 重复示例: Example 1 for (i = userVote; i function createElement(elemen
.dot{ width: 8px; height: 8px; border-radius: 4px;
这个问题在这里已经有了答案: jQuery DOM changes not appearing in view source (5 个答案) 关闭 8 年前。 我编写此脚本是为了了解如何使用 cre
函数 A() { this.myProp = document.createElement("div"); function B(id) { this.myProp.id = id;
我有以下代码: function JS_Utils_BuildModal () { var objModal = document.createElement(
我的 React 应用程序出现了一些问题。我正在实现功能 authUser，现在我收到如下错误: TypeError: Cannot read property 'createElement' of
为什么会 console.log(document.createElement("p").appendChild(document.createTextNode("some text"))); 返回
我正在尝试创建一个元素并向其附加一个子节点，但我的返回只是一个没有该元素的字符串。 我首先创建元素 const li = document.createElement('li'); 其次，我使用以下命
为什么这段代码不起作用？当我使用注释部分而不是表格时，它起作用了......使用table为什么不能工作？ function addLine() {
是否有任何解决方案可以在纯 JavaScript 中构建使用 in div 的多个 div？ jQuery 版本 for (var i = 1; i new divs') } http://jsf
CSS div.online:last-child { color:green; } div.offline:last-child { color:green; } JavaScipt
我为我的网站下载了一个 livesearch JavaScript 插件，它可以工作，但我需要帮助来稍微修改它。 代码如下: $.ajax({url: $('base').attr('href
这是我要创建的 HTML: Tiana is ... keen to go to the ... market. 如您所见，有一个 包含散文句子的元素，中间带有选择框。 使用 $('#id').h
我正在尝试使用 document.createElement('circle') 来处理 svgs 但 Chrome 会创建一个结束标记来圈出 错误的结果。如何创建没有结尾的元素？ 最佳答案 你可能
我正在尝试用 javascript 创建这个 html block : name }}" type="checkbox" class="minimal"> text 我有: var che
我是一名优秀的程序员,十分优秀！