0

基本上,我正在尝试为爱好完成一些个人代码。

目标是能够从包含单行的文件中读取,该文件显示我当前正在收听的内容,因为它会更改歌曲而无需我自己进行任何交互。最好我希望能够滚动包含歌曲名称的文本字段,但我会非常兴奋地在那里获得可格式化的文本。

目前我遇到了障碍,因为在编程方面我不是那么精明(震惊我的电脑到目前为止还没有着火......)。

到目前为止我所拥有的(对不起,糟糕的黑客工作):

<html>
  <head>
  <style>
      body {
          background-color: rgba(0, 0, 0, 0.65);
          white-space: nowrap;
          overflow: hidden;
          margin: 0px 0px 0px 0px;
      }
      p.ex1 {
          font:22px, arial, sans-serif;
          color:rgb(255, 255, 255);
      }  
  </style>
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript">
    setInterval('read',3000);
    function read(){
        jQuery.get('SongPlayback.html',
        function(data){$('.contents').html(data);}
        )
        }
  </script>      


  </head>
 <body>
    <p class="ex1">
    Now Playing:<br>
    <div id="contents"></div>
    </p>
 </body>
</html>

我怀疑所有这一切的主要问题是它要在本地运行,我不确定这是否可能(?),已经阅读了很多关于 JS 出于安全原因如何不在本地运行的信息?可能是我只是在乱写代码。除了“SongPlayback.html”文件之外,我还将 jquery.js 存储在与 HTML 文件相同的目录中。

我以前曾经<Object>存放过文本,但我无法让它在歌曲(文件)更改时更新。

4

3 回答 3

1

所以,回答我自己的问题,因为可以在本地相对地完成这一切。

这将给我我想要的,如果格式正确,将返回在相应文件中找到的数据值。我唯一要做的就是摆脱看起来很糟糕的选框,转而采用更好的 CSS 格式。

<html>
  <head>
  <style>
      body {
          background-color: rgba(0, 0, 0, 0.65);
          margin: 0px 0px 0px 0px;   
      }
      p.ex1 {
          font:18px arial, sans-serif;
          color:rgb(255, 255, 255);
          margin: 0px 0px 0px 0px;
      }  
  </style>

  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

  <script>
            var previousData;
            function loadText() {
                $.ajax({
                    url: 'SongPlayback.json',
                    beforeSend: function(xhr) {
                        if (xhr.overrideMimeType) {
                            xhr.overrideMimeType("application/json");
                        }
                    },
                    dataType: 'json',
                    success: function(data) {
                        $.each(data, function(key, val) {
                            if (key == 'input') {
                                if (val != previousData) {
                                     previousData = val;
                                    $('#responsecontainer')
                                        .animate({opacity:0})
                                        .queue(function(){
                                             $(this).text(previousData).dequeue()
                                        })
                                        .animate({opacity:1});  
                                }
                            }
                        });
                    }
                });
            }

            setInterval(loadText, 500);

        </script>      


  </head>
 <body>
    <p class="ex1">Now Playing:<br>
    </p>
    <marquee direction="left" scrollamount="4">
    <p class="ex1" style="white-space:nowrap; height:25; width:200; margin:0px 0px 0px 0px;" id="responsecontainer"></p>
    </marquee>    
 </body>
</html>
于 2013-05-03T16:03:47.777 回答
1

为了使用 jQuery 处理 get 或 post 请求,您需要一个服务器来处理这种类型的请求。您必须安装wamp http://www.wampserver.com/en/#download-wrapperxammp http://www.apachefriends.org/en/xampp.html。然后使用这些应用程序中的任何一个运行您的代码。

于 2013-05-03T04:56:32.967 回答
0

为了进行获取或发布,即使在本地主机上,您也需要运行网络服务器来处理请求。您可以使用Xampp 之类的工具轻松进行设置。您需要将文件重新定位到 Xampp 安装文件夹内的 htdocs 文件夹内的文件夹中。例如,如果您将文件添加到 htdocs/playlist/,您可以在浏览器中通过访问http://localhost/playlist/. 设置完成后,您将能够执行获取和发布操作。Xampp 是一个很棒的工具——它非常容易在您的本地 PC 上设置 Apache、PHP 和 MySQL。它非常简单,对于开发 Web 脚本非常有用。

于 2013-05-03T04:37:25.427 回答