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

时间：2014-09-01 04:16:47

标签： javascript php mysql html5

我正在开发一个为我的网站提供证词幻灯片的项目。我正在使用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);

js_comment []和js_name []是来自php的名称和评论的变量num_results是评论的数量

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

2 个答案:

答案 0 :(得分：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/

简短更新：

与问题没有直接关系，但是对于评论等方面的一些想法我也注册了你可能处于初级阶段，其中基本概念可能更重要;但无论如何要添加它。

请注意，当您拥有某些尺寸的代码时，您也可以使用

获取代码输入。提示和帮助好坏，如何重构等。

可变范围：

如果对JavaScript不熟悉，这可能会超出您的简编的设置范围以及您的位置，但请提及它，因为它是一个相当重要的主题。

查看代码时首先关注的是变量范围。简而言之：避免全局变量。这是可以从任何地方访问和修改的变量。在生产代码方面，这是非常不受欢迎的。简而言之：在全球范围内跟踪变量很快就成了一场噩梦。它很容易出现非常丑陋的错误等。维持这样的代码，对其他人而言至少是这样，或者在说了6个月，一年或者其他任何事情之后保持自己，也很快就会让它难以阅读等等。

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

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

写简短的功能：

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

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

至少要记住一些事情。

  • 保持功能简短。

  • 要小心不要有深度筑巢等，不好：

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

使用严格模式：

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

(function(){
  "use strict";

  function foo() {

  }
  function bar() {

  }
})();

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

使用代码分析工具：

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

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

了解它的工作原理。

设计模式：

这可能有点压倒性，因为有很多方法（和意见），但浏览信息并感受它可能是好的。

是的，OO编程很强大，但作为个人意见，我尽量不强迫JS像Java之类的东西 - 模拟类等.JS拥有它自己的可能性，功能等等。当项目获得时在某种程度上，问题归结为设计模式。有时会遇到一个现有的代码库，其中一个使用Class类似的方法，然后通常没有任何选择。

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

  • JavaScript Programming Patterns - 虽然我强烈不同意作者对 The Old-School Way 的描述;至少根据我的经验，名称空间，可重用性等同时也是一个问题。不适合所有人，但不是那种黑暗。
  • Learning JavaScript Design Patterns - 可能有点大，但仍然。
  • 等。在网上搜索“JavaScript设计模式”等。

答案 1 :(得分：1)

这是我得到的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
相关问题
最新问题