个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 16:06:20 27 4
gpt4 key购买 nike

您好，我正在使用类似的代码创建一个迷你主页:

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/

27 4 0
文章推荐： c# - 如何从我的 aspx 网页调用客户端计算机上的 win 应用程序？
文章推荐： html - div不在它应该在的地方
文章推荐： html - CSS:如何给一个 div 加边框，将它完全放在另一个 div 中？
文章推荐： html - 收缩容器以仅适合可见元素
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com