Question

您好我正在使用类似代码创建迷你主页：

但不是改变背景颜色的话，我希望它改变背景图像，而我似乎正在努力改变它 - 这是我的代码：

＆＃13;

<!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>

＆＃13;

Answer 1

这是因为您使用的是变量名称“background-image”。这在javaScript中是错误的。而不是' - '你必须使用下划线'_'或者你可以大写下一个char：

background_image

或

backgroundImage

来自MDN：

变量

您可以将变量用作应用程序中值的符号名称。名为标识符的变量名称符合某些规则。

JavaScript标识符必须以字母，下划线（_）或美元符号（$）开头;后续字符也可以是数字（0-9）。由于JavaScript区分大小写，因此字母包括字符“A”到“Z”（大写）和字符“a”到“z”（小写）。

您可以在标识符中使用大多数ISO 8859-1或Unicode字母，例如å和ü（有关详细信息，请参阅此博客文章）。您还可以将Unicode转义序列用作标识符中的字符。

合法名称的一些示例是Number_hits，temp99和_name。

此外，如果您需要剥离可以使用的空格：

ackground-image = background-image.toLowerCase().trim();

而不是正则表达式：

background-image = background-image.replace(/\s/gi,'');

使用带语音输入的特定单词来更改背景图像

1 个答案: