我的下面的代码执行以下操作:每按一次A或L,图像和屏幕上的字就会改变。 有没有办法只显示单词或图像(最好是随机顺序)。 html中是否有可以同时包含单词和图像的字段?
我的目标是将两个函数合并为一个 - 在按键上 - 显示图像或单词。
<p id="word_abc" class="words" style="font-size:20px"></p>
<p style="text-align: center"><img id="img_abc" src=""
alt="" height="300px" width="300px" style="position:absolute; top:200px; left:500px"/></p>
<script type="text/javascript">
var words = [ "WORD1", "WORD2", "WORD3" ];
var pictures = new Array()
pictures[1]="...PICTURE1.jpg"
pictures[2]="...PICTURE2.jpg"
pictures[3]="...PICTURE3.jpg"
$(function(){
$(document).keypress(function(e){
if ($(e.target).is('input, textarea')) {
return;
};
if (e.which === 97 || e.which === 108) {
new_word = words[Math.floor(Math.random() * words.length)];;
$("#word_abc").text(words);
};
});
});
$(function(){
$(document).keypress(function(e){
if ($(e.target).is('input, textarea')) {
return;
};
if (e.which === 97 || e.which === 108) {
new_picture = picture[Math.floor(Math.random() * picture.length)];
$("#img_abc").prop('src', new_picture);
};
});
});
</script>
答案 0 :(得分:1)
我会在顶级添加随机性。将选择<p>
或<img>
,如下所示:
<script type="text/javascript">
var words = [ "WORD1", "WORD2", "WORD3" ];
var pictures = new Array()
pictures[1]="...PICTURE1.jpg"
pictures[2]="...PICTURE2.jpg"
pictures[3]="...PICTURE3.jpg"
$(function(){
$(document).keypress(function(e){
if ($(e.target).is('input, textarea')) {
return;
};
if (e.which === 97 || e.which === 108) {
if( Math.floor((Math.random()*10)+1) % 2 ) {
var new_word = words[Math.floor(Math.random() * words.length)];;
$("#word_abc").text(words);
} else {
var new_picture = picture[Math.floor(Math.random() * picture.length)];
$("#img_abc").prop('src', new_picture);
}
};
});
});
</script>
答案 1 :(得分:1)
我已经调整了你的javascript以合并这两个函数,将图像和文本放到同一个目标(div)中并修复了一些小错误。
<强> See live jsFiddle demo with working images here 强>
HTML
<div id="abc" class="words">Focus in the results frame, then press A or L.</div>
的Javascript
var words = [ "Monkey", "Donkey", "Woof" ];
var pictures = new Array()
pictures[0]="http://lorempixel.com/400/200/sports/1/"
pictures[1]="http://lorempixel.com/400/200/sports/2/"
pictures[2]="http://lorempixel.com/400/200/sports/3/"
$(function(){
$(document).keypress(function(e){
if ($(e.target).is('input, textarea')) {
return;
};
if (e.which === 97 || e.which === 108) {
if(Math.random() < 0.5) {
// Show a word
new_word = words[Math.floor(Math.random() * words.length)];;
$("#abc").text(new_word);
} else {
// Show an image
var new_img = pictures[Math.floor(Math.random() * pictures.length)];;
$("#abc").empty();
var imgtag = $('<img id="abcimg">');
imgtag.attr('src',new_img);
imgtag.appendTo('#abc');
}
};
});
});