纯javascript文本滑块，用于更改php文本的显示

我正在为一个项目工作，该项目为我的网站提供了一个演示幻灯片。我使用php和mysql作为数据库。我想使用纯javascript显示数据库中的名称和注释。我已经从数据库中提取了名称和注释，并将其存储到javascript数组中。我使用setInterval和rand（）更改变量，使文本显示，但它不会旋转到下一个图像。这是我现在的脚本

function showComment(number) {
  document.write('<p>');
    document.write(unescapeHtml(js_comment[number]));
  document.write('</p>');
  document.write('<p>');
    document.write(unescapeHtml(js_name[number]));
  document.write('</p>');
}

setInterval(showComment(Math.floor(Math.random()*num_results), 2431);

函数showComment（编号）{
写（“”）；
document.write（unescapethtml（js_comment[number]）；
文件。写（“
”）；
写（“”）；
编写（unescapeHtml（js_名称[编号]）；
文件。写（“
”）；
}
setInterval（showComment（Math.floor（Math.random（）*num_results），2431）；

js_comment[]和js_name[]是具有名称的变量，而comment from php num_results是注释数

---

jsiddle到目前为止jsiddle.net/4nq2c0xb/

您可能希望使用容器和

textContent

/

innerText

，例如：

<p id="comment"></p>
<h3 id="name"></h3>

在区间函数中：

comment.textContent = js_comment[number];
name.textContent = js_name[number];

---

简短更新： 与问题没有直接关系，但与评论等相关的一些想法。我还发现，您可能处于初级阶段，基本概念可能更重要；但无论如何，请添加它

请注意，当您有一些大小的代码时，也可以使用

获取代码的输入。关于好与坏、如何重构等的提示和帮助

可变范围： 如果是JavaScript新手，这可能有点超出了概要的设置方式和位置范围，但请提及它，因为这是一个相当重要的主题

查看代码时首先要考虑的是变量范围。简而言之：避免使用全局变量。这是指可以从任何地方访问和修改的变量。在生产代码中，这一点是非常不受欢迎的。简言之：跟踪全局范围内的变量很快就会成为一场噩梦。这很容易导致错误比如说6个月、一年或者其他什么时候，维护这样的代码会很快让人难以阅读，等等

在这方面，还需要始终定义变量。不是说您没有这样做，而是仍然这样做。就我个人而言，我通常在函数顶部定义变量（很多人不同意这一点，但我的首选。）通过这种方式，我知道使用了哪些变量，它可以快速控制已定义的变量，这是一个很好的地方，可以用注释等进行概述

需要注意的是，了解变量存在的位置非常重要。例如，更改全局变量会影响使用该变量的所有函数中的全局变量

编写简短的函数： 我遵循经验法则：“让一个函数做一件事，并且把它做好。”如果一个函数做得太多，它往往很难维护，它很容易出现bug，可重用性很快就会消失，等等

当然，有时我会偏离这一点，特别是如果它是简短的示例代码或一些快速而肮脏的临时解决方案，测试一些概念或类似的东西；但是，我不止一次因为不得不在事后花大量时间重构代码而感到遗憾

至少要记住这一点

• 保持函数简短
• 要非常小心，不要有很深的嵌套等不良情况：

  if () {
      if () {
          for () {
          ...
  

使用严格模式：

将代码包装在严格的范围内：

(function(){
  "use strict";

  function foo() {

  }
  function bar() {

  }
})();

链接答案中描述了一些优势

使用代码分析工具：

这对于一些新手来说可能有点太多了，因为似乎所有的代码都是糟糕的；）。这需要一些经验来适应，如果一个人不熟悉这门语言，我想，通常很难理解为什么有些事情被认为是不好的。但是这是培养良好习惯的好方法。就我个人而言，我已经将它整合到我选择的编辑器Vim中，因此，每次我保存时（我经常这样做），我都会从工具中得到关于我可能忽略的事情的反馈等。有人有可能对它进行调整。它给出了一些我不同意的提示——但这是检查代码的好方法

首先，如果要测试它，可以将代码复制粘贴到联机工具中：

了解它是如何工作的

设计模式： 这可能有点让人不知所措，因为有太多的方法（和观点），但是浏览一下信息并对其有一个感觉可能会很好

是的，OO编程很强大，但作为个人观点，我尽量不强迫JS像Java之类的东西——模拟类等。JS有它自己的可能性、特性等。当项目有一定规模时，问题就归结为设计模式。有时，我们会遇到一个现有的代码库，在那里我们使用类似于类的方法，然后我们通常没有任何选择

你可能会发现这很有用。如果你不逐字逐句阅读，你可能会发现它澄清了它的一些概念：

• –尽管我强烈反对作者对旧学校方式的描述；至少在我的经验中，名称空间、可重用性等在当时也是一个问题。不是对每个人都适用，但不是像描述的那样黑暗
• –可能有点大，但仍然如此
• 等等。在web上搜索“JavaScript设计模式”等
以下是我得到的： HTML-
JavaScript-

//create and fill the array
var commt = [ ];
var name = [ ];
var i = 0;

commt[0] = 'comment 1';
commt[1] = 'comment 2';
commt[2] = 'comment 3';
commt[3] = 'comment 4';
name[0] = 'name 1';
name[1] = 'name 2';
name[2] = 'name 3';
name[3] = 'name 4';

//shows how many comments there are
var maxComments = 4;

//get empty elements
var comment = document.getElementById('comment');

//this section will create the inital comment shown
//creates a random number 
var number = Math.floor(Math.random() * 4);

//adds the HTML to div with window.onload
window.onload = comment.innerHTML = "<p>" + commt[number] + "</p>" +
    "<h3 class='commentSliderH3'>" + name[number] + "</h3>";

//This rotates the comments
setInterval(function () { //same content as above
    var number = Math.floor(Math.random() * maxComments);

    comment.innerHTML = "<p>" + commt[number] + "</p>" +
            "<h3 class='commentSliderH3'>" + name[number] + "</h3>";
}, 1931); // Runs the function every 9031ms

//创建并填充数组
var commt=[]；
变量名称=[]；
var i=0；
commt[0]=“注释1”；
commt[1]=“注释2”；
commt[2]=“意见3”；
commt[3]=“意见4”；
名称[0]=“名称1”；
名称[1]=“名称2”；
名称[2]=“名称3”；
名称[3]=“名称4”；
//显示有多少评论
var maxComments
<div id="container">
<h1>Testimonials</h1>
<div id="comment"></div>
</div>

#container {
    border: 2px solid blue;
    padding: 3px 10px;
    margin-bottom: 20px;
}
h1 {
    color: red;
}
p {
    text-align: center;
    margin-left: 20px;
}
h3 {
    color: blue;
    text-align: right;
    margin-right: 40px;
}

//create and fill the array
var commt = [ ];
var name = [ ];
var i = 0;

commt[0] = 'comment 1';
commt[1] = 'comment 2';
commt[2] = 'comment 3';
commt[3] = 'comment 4';
name[0] = 'name 1';
name[1] = 'name 2';
name[2] = 'name 3';
name[3] = 'name 4';

//shows how many comments there are
var maxComments = 4;

//get empty elements
var comment = document.getElementById('comment');

//this section will create the inital comment shown
//creates a random number 
var number = Math.floor(Math.random() * 4);

//adds the HTML to div with window.onload
window.onload = comment.innerHTML = "<p>" + commt[number] + "</p>" +
    "<h3 class='commentSliderH3'>" + name[number] + "</h3>";

//This rotates the comments
setInterval(function () { //same content as above
    var number = Math.floor(Math.random() * maxComments);

    comment.innerHTML = "<p>" + commt[number] + "</p>" +
            "<h3 class='commentSliderH3'>" + name[number] + "</h3>";
}, 1931); // Runs the function every 9031ms