纯 javascript 文本滑块，可更改 php 中的文本显示

Posted 2023-02-22

【中文标题】纯 javascript 文本滑块，可更改 php 中的文本显示

【英文标题】：pure javascript text slider that changes display of text from php

【发布时间】：2014-10-25 06:22:40

【问题描述】：

我正在开展一个项目，该项目为我的网站提供证词幻灯片。我正在使用 php 和 mysql 作为数据库。我想使用纯 javascript 来显示数据库中的名称和评论。我已经从数据库中提取了名称和 cmets 并将其存储到 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);

js_comment[] 和 js_name[] 是 php 中的名称和注释的变量 num_results 是 cmets 的数量

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

【问题讨论】：

你能设置一个fiddle for this吗？

我正在研究它，我正在尝试找到 document.write 的替代方法

【参考方案1】：

您可能希望使用容器和textContent / innerText，例如：

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

然后先获取元素：

var comment = document.getElementById('comment');
var name = document.getElementById('name');

而在区间函数中：

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

https://developer.mozilla.org/en-US/docs/Web/API/Node.textContent#Browser_compatibility

http://clubajax.org/plain-text-vs-innertext-vs-textcontent/

---

简短更新：

与问题没有直接关系，但是关于 cmets 等的一些想法。我还注意到您可能处于初学者阶段，基本概念可能更重要；但无论如何添加它。

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

Code Review SE

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

变量范围：

如果是 JavaScript 新手，这可能有点超出了您的纲要的设置方式和您所在的位置，但请提及它，因为它是一个相当重要的主题。

查看代码时首先要关注的是变量范围。简而言之：避免全局变量。那是可以从任何地方访问和修改的变量。当涉及到生产代码时，这是非常不受欢迎的。简而言之：在全局范围内跟踪变量很快就变成了一场噩梦。它很容易出现非常丑陋的错误等。维护这样的代码，尤其是在 6 个月、一年或任何时间后维护这样的代码，尤其是为他人或你自己，也会很快使其难以阅读等等。

How to avoid global variables in JavaScript?

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

What is the scope of variables in JavaScript?

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

编写简短的函数：

我遵循经验法则：“让一个函数做一件事，然后把它做好。” 如果一个函数做的太多，它往往难以维护，很容易出现错误，可重用性很快就消失了等等。

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

至少要记住这一点。

保持函数简短。

小心不要有深嵌套等，不好：

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

使用严格模式：

What does “use strict” do in JavaScript, and what is the reasoning behind it?

将您的代码封装在一个严格的范围内：

(function()
  "use strict";

  function foo() 

  
  function bar() 

  
)();

链接答案中描述了一些优点。

使用代码分析工具：

Should I use JSLint or JSHint JavaScript validation?

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

首先，如果您想对其进行测试，您可以将代码复制粘贴到在线工具中：

JSLint JSHint

感受一下它的工作原理。

设计模式：

这可能有点让人不知所措，因为有很多方法（和意见），但浏览信息并感受一下可能会很好。

是的，OO 编程很强大，但作为个人观点，我尽量不要强迫 JS 像 Java 之类的——模拟类等。JS 有它自己的可能性、特性等，当项目有一定规模时，问题就来了归结为设计模式。有时会遇到一个现有的代码库，其中一个使用Class 之类的方法，然后通常别无选择。

您可能会发现这很有用。如果您不逐字阅读，您可能会发现它阐明了它的一些概念：

JavaScript Programming Patterns – 虽然我非常不同意作者对 The Old-School Way 的描述；至少根据我的经验，命名空间、可重用性等在当时也是一个问题。不是每个人都适合，但不像描述的那样那么黑暗。 Learning JavaScript Design Patterns – 可能有点大，但仍然如此。 等。在网上搜索 “JavaScript 设计模式” 等。

【讨论】：

谢谢，在使用了你的建议后，我想到了这个：www.jsfiddle.net/xuxcwcsd/5/ 我发现将它们包含在一个组中而不是单独进行。

@RyanJantzen：太好了。如果您想在此基础上构建，这是另一个示例。如果您需要在同一页面上有两个代码等，应该很容易重写。（仅作为示例）jsfiddle.net/kimiliini/fsvLwbxe

@RyanJantzen：PS。在您的 URL 前添加 http:// 以在 cmets 中自动将它们链接到此处。

@RyanJantzen：作为可重用性和同一页面上多个可能性的示例：jsfiddle.net/kimiliini/1gnzaz9c

这仍然是 Ryan，再次感谢您的帮助和建议。我目前正在上计算机科学大学，我刚刚开始接触面向对象的编程。我自己学到了一些，但我很高兴能获得更多关于它的知识。

【参考方案2】：

这是我得到的http://jsfiddle.net/xuxcwcsd/5/： HTML -

<div id="container">
<h1>Testimonials</h1>
<div id="comment"></div>
</div>

CSS -

#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;

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

【讨论】：

附言。您在 ms 中有错字。 （1931 vs 9031）但猜猜你已经在“实时”代码中看到了。

这仍然是 Ryan，我只是更改了显示名称。我在实际页面中将其设置为 9031，但为了练习，我将其设置为 1931。