Javascript 尝试使用HTML表单向jQuery插件添加文本_Javascript_Jquery_Html

Javascript 尝试使用HTML表单向jQuery插件添加文本

javascript jquery html

Javascript 尝试使用HTML表单向jQuery插件添加文本,javascript,jquery,html,Javascript,Jquery,Html,我正在使用一个名为Textualizer的jQuery插件，我想通过HTML向它添加数据形式代码如下： <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="textualizer.min.js"></script> </head> <st

我正在使用一个名为Textualizer的jQuery插件，我想通过HTML向它添加数据形式

代码如下：

<html>
 <head>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="textualizer.min.js"></script>
</head>

<style type="text/css">

#txtlzr{color:#585856; font-size:50px; width:1200px; height:100px;
margin-left:10%;
margin-top:80px;
font-family:"futura";
position: fixed;
}
</style>

<body>

<div id="txtlzr"></div>
<form action="#" method="post"/>

            <input class="kwote" type="text" maxlength="40" id="kwote" placeholder="Enter a something here."/>
            <input class="name"  type="text" maxlength="17" id="name" placeholder="Enter your name."/>
            <input class="post" type="submit" value="Post"/>

 </form>


 </body>




<script>



 var stuff1 = ['"random comment-person1', '"random comment"- person2'];  // list of blurbs

 var txt = $('#txtlzr');  // The container in which to render the list

 var options = {
 duration: 5,          // Time (ms) each blurb will remain on screen
rearrangeDuration: 5, // Time (ms) a character takes to reach its position
effect: 'random',        // Animation effect the characters use to appear
centered: true           // Centers the text relative to its container
 }

   txt.textualizer(stuff1); // textualize it!
   txt.textualizer('start'); // start


  </script>


 </html>


#txtlzr{颜色#585856；字体大小：50px；宽度：1200px；高度：100px；
左边距：10%；
边缘顶部：80px；
字体系列：“futura”；
位置：固定；
}
var stuff1=['“random comment-person1'，'“random comment”-person2']；//布告列表
var txt=$（'#txtlzr'）；//在其中呈现列表的容器
变量选项={
持续时间：5，//时间（毫秒）每个模糊将保持在屏幕上
重新排列持续时间：5，//字符到达其位置所需的时间（毫秒）
效果：'随机'，//角色用于显示的动画效果
居中：true//使文本相对于其容器居中
}
text.textualizer（stuff1）；//将其文本化！
txt.textualizer（'start'）；//start

这是完整的代码，只要将jquery和textualizer文件与html链接或放在目录中，它就可以工作

文本化器：

jquery:

下面的HTML代码允许使用来自

以下代码还允许在

cookie

中持久存储注释（前提是用户允许）

如果使用

jquery cookie

，可从此处获得：

玩得开心：）


#txtlzr{
颜色：#585856；字体大小：50px；宽度：1200px；高度：100px；
左边距：10%；右边距：20px；字体系列：“futura”；
位置：固定；
}
评论：
姓名：
福
//将新注释、名称对添加到数组馈送文本化器。
函数add_comment（）{
//检索值并将其添加到数组中。
var new_comment=$（'#kwote'）.val（）；
var new_name=$（'#name'）.val（）；
var new_value=new_comment+'：'+new_name；
注释用于显示。推送（新值）；
//使用注释中的当前数据更新cookie，以便显示。
$.cookie（“注释用于显示”，注释用于显示。加入（；”）；
//重置字段。
$（'#kwote'）.val（''）；
$（'#name'）.val（''）；
}
$（文档）.ready（函数（）{
var txt=$（'#txtlzr'）；//在其中呈现列表的容器
变量选项={
持续时间：5，//时间（毫秒）每个模糊将保持在屏幕上
重排持续时间：5，//角色到达其位置所需的时间
效果：'随机'，//角色用于显示的动画效果
居中：true//使文本相对于其容器居中
}
var_cookie=$.cookie（“用于显示的注释”）；
如果（_cookie！=null）{
//从cookie加载数据。
var COMMENTS_FOR_DISPLAY=_cookie.split（“；”）；
}
否则{
//如果不存在cookie，请返回默认值。。。
var COMMENTS_FOR_DISPLAY=新数组（'Have fun real:Chris'）；
}
文本化器（注释用于显示）；//文本化它！
txt.textualizer（'start'）；//start
});

wow chris，你真是太棒了……它很管用！！！！每当我刷新页面时，所有的评论都会丢失。不管怎样，我都可以让它们永远保留下来吗？我是否可以用html文件将其存储在服务器上？不是JavaScript方式；你必须使用AJAX或HTTP表单提交等方式将数据发送到服务器。

<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script src="https://raw.github.com/carhartl/jquery-cookie/master/jquery.cookie.js"></script>
    <script type="text/javascript"
      src="http://kiro.me/textualizer/javascript/textualizer.js"></script>
    <style type="text/css">
    #txtlzr {
      color:#585856; font-size:50px; width:1200px; height:100px;
      margin-left:10%; margin-top:20px; font-family:"futura";
      position: fixed;
    }
    </style>
  </head>
  <body>
    <form action="#" method="post"/>
      <fieldset>
       <label for="kwote">Comment:</label>
       <input class="kwote" type="text" maxlength="40" id="kwote"
         placeholder="Enter a something here."/>
       <lable for="name">Name:</label>
       <input class="name" type="text" maxlength="17" id="name"
         placeholder="Enter your name."/>
       <input class="post" type="button" value="Add comment"
         onclick="add_comment();" />
     </fieldset>
   </form>

    <div id="bodMain"><div id="txtlzr">foo</div></div>

    <script language="javascript">
    // Adds a new comment, name pair to the Array feeding textualizer.
    function add_comment() {
      // Retrieve values and add them to Array.
      var new_comment = $('#kwote').val();
      var new_name = $('#name').val();
      var new_value = new_comment + ': ' + new_name;
      COMMENTS_FOR_DISPLAY.push(new_value);

      // Update cookie with current data in COMMENTS_FOR_DISPLAY.
      $.cookie("COMMENTS_FOR_DISPLAY", COMMENTS_FOR_DISPLAY.join(";"));

      // Reset <input> fields.
      $('#kwote').val('');
      $('#name').val('');
    }

    $(document).ready(function() {
      var txt = $('#txtlzr');  // The container in which to render the list

      var options = {
        duration: 5,          // Time (ms) each blurb will remain on screen
        rearrangeDuration: 5, // Time a character takes to reach its position
        effect: 'random',     // Animation effect the characters use to appear
        centered: true        // Centers the text relative to its container
      }

      var _cookie = $.cookie("COMMENTS_FOR_DISPLAY");
      if (_cookie != null) {
        // Load data from cookie.
        var COMMENTS_FOR_DISPLAY = _cookie.split(";");
      }
      else {
        // If no cookie exists, fallback to default value...
        var COMMENTS_FOR_DISPLAY = new Array('Have fun again: Chris');
      }

      txt.textualizer(COMMENTS_FOR_DISPLAY); // textualize it!
      txt.textualizer('start'); // start
    });
    </script>
  </body>
</html>