您好，我正在使用类似的代码创建一个迷你主页:
http://codepen.io/wesbos/pen/evsuw
但是我不想让文字改变背景颜色，而是希望它改变背景图像，我似乎有点挣扎——这是我的代码:
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title> Test</title>
</head>
<body>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1> </h1>
<span style=" background-image: url("https://static.pexels.com/photos/909/flowers-garden-colorful-colourful.jpg");">hi</span>
<style>
html,body {
height:100%;
}
body {
transition:all 0.4s;
font-family: acumin pro;
text-align: center;
}
h1 {
font-size: 50px;
transition:all 0.4s;
/*top:50%;*/
position: relative;
color:rgba(0,0,0,0.4);
}
span {
color:rgba(0,0,0,0.4);
/*text-shadow:1px 1px 0 rgba(0,0,0,0.5);*/
padding:10px;
display: inline-block;
font-weight: 600;
text-transform: lowercase;
margin-bottom: 5px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
var speech = function(){
var x = "lol";
var recognition = new webkitSpeechRecognition();
recognition.continuous = true;
recognition.interimResults = true;
recognition.onresult = function(event) {
var background-image = event.results[event.results.length - 1][0].transcript;
// make it lowercase
background-image = background-image.toLowerCase();
// strip the spaces out of it
background-image = background-image.replace(/\s/gi,'');
$('body').css('background', background-image);
$('h1').text(background-image);
}
recognition.start();
}
if (!('webkitSpeechRecognition' in window)) {
alert("Sorry you require a browser that supports speech recognition");
}
else {
speech();
}
</script>
</body>
</html>
</body>
</html>最佳答案
这是因为您使用的变量名称是“background-image”。这在 javaScript 中是错误的。而不是 '-' 你必须使用下划线 '_' 或者你可以像这样将下一个字符大写:
background_image
或
backgroundImage
来自 MDN:
Variables
You use variables as symbolic names for values in your application. The names of variables, called identifiers, conform to certain rules.
A JavaScript identifier must start with a letter, underscore (_), or dollar sign ($); subsequent characters can also be digits (0-9). Because JavaScript is case sensitive, letters include the characters "A" through "Z" (uppercase) and the characters "a" through "z" (lowercase).
You can use most of ISO 8859-1 or Unicode letters such as å and ü in identifiers (for more details see this blog post). You can also use the Unicode escape sequences as characters in identifiers.
Some examples of legal names are Number_hits, temp99, and _name.
另外，如果你需要剥离你可以使用的空格:
ackground-image = background-image.toLowerCase().trim();
代替正则表达式:
background-image = background-image.replace(/\s/gi,'');
关于javascript - 使用带有语音输入的特定词来更改背景图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39152342/