自动播放代码,自动播放的实例代码
分类:新闻中心

复制代码 代码如下:

[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"; 
<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
<title>auto play</title> 
<script type="text/javascript" src="../jquery-1.8.0.min.js" /></script> 
<script type="text/javascript"> 
    //数组的第一项为时长,其他项可自定义 
    data = [["3","a"],["2","b"],["3","c"],["2","d"],["1",""]]; 
 
    $(document).ready(function(){ 
        //设置触发事件 
        autoPlay.run = function(obj,num){ 
            back(obj,num); 
        }; 
        autoPlay(); 
    }); 
     
    function back(obj,num){ 
        $("#div_show").html(obj[num][1]); 
    } 
     
    function autoPlay(){ 
        //初始化计数参数 
        if(autoPlay.num ==undefined) 
            autoPlay.num = 0; 
        //初始化时间点 
        if(autoPlay.timepoint ==undefined) 
            autoPlay.timepoint = new Date().getTime(); 
        if(autoPlay.num<data.length){ 
            //函数句柄,data 数组,autoPlay.num当前下标 
            autoPlay.run(data,autoPlay.num); 
            //按照元素时间长度播放数组 
            if(new Date().getTime()>autoPlay.timepoint){ 
                //判断是否为第一次执行 
                if(autoPlay.first==undefined) 
                    autoPlay.first = true; 
                else 
                    autoPlay.num++; 
                //设置下一次播放的时间点 
                autoPlay.timepoint += (data[autoPlay.num][0]*1000); 
            } 
            setTimeout("autoPlay()",500); 
        } 
    } 
     
    $.extend({autoPlay:function(){ 
        var defaults = {inteval:500}; 
    }}); 
 
</script> 
</head> 
<body> 
<div id="div_show"></div> 
</body> 
</html> 

Jquery操作Json格式的数据在我们平时的项目中也经常运用;最近看Jquery权威指南中就有一章节是对这方面的整理总结;最后通过一个Asp.net结合一般处理程序ashx的实例,基本上能满足项目中平时遇到的问题;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
";
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>auto play</title>
<script type="text/javascript" src="../jquery-1.8.0.min.js" /></script>
<script type="text/javascript">
    //数组的第一项为时长,其他项可自定义
    data = [["3","a"],["2","b"],["3","c"],["2","d"],["1",""]];

定义播放时间,可以定义事件

 

    $(document).ready(function(){
        //设置触发事件
        autoPlay.run = function(obj,num){
            back(obj,num);
        };
        autoPlay();
    });

] !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN html head meta http-equiv=content-type content=text/html;...

1:Json格式在JS中直接通过"对象.属性名称"就可以进行访问;

    function back(obj,num){
        $("#div_show").html(obj[num][1]);
    }

 

    function autoPlay(){
        //初始化计数参数
        if(autoPlay.num ==undefined)
            autoPlay.num = 0;
        //初始化时间点
        if(autoPlay.timepoint ==undefined)
            autoPlay.timepoint = new Date().getTime();
        if(autoPlay.num<data.length){
            //函数句柄,data 数组,autoPlay.num当前下标
            autoPlay.run(data,autoPlay.num);
            //按照元素时间长度播放数组
            if(new Date().getTime()>autoPlay.timepoint){
                //判断是否为第一次执行
                if(autoPlay.first==undefined)
                    autoPlay.first = true;
                else
                    autoPlay.num++;
                //设置下一次播放的时间点
                autoPlay.timepoint += (data[autoPlay.num][0]*1000);
            }
            setTimeout("autoPlay()",500);
        }
    }

<head>

    $.extend({autoPlay:function(){
        var defaults = {inteval:500};
    }});

    <title>jQuery 读取JSON 数据</title>

</script>
</head>
<body>
<div id="div_show"></div>
</body>
</html>

    <script src="JScript/jquery-1.8.2.min.js" type="text/javascript"></script>

定义播放时间,可以定义事件

    <script type="text/javascript">

您可能感兴趣的文章:

  • js控制网页背景音乐播放与停止的方法
  • JS HTML5 音乐天气播放器(Ajax获取天气信息)
  • js wmp操作代码小结(音乐连播功能)
  • 基于js与flash实现的网站flv视频播放插件代码
  • js实现幻灯片播放图片示例代码
  • JS网页播放声音实现代码兼容各种浏览器
  • js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器

        var objInfo = {

            'name': '踏浪帅',

            'sex': '男',

            'Age': '20'

        };

        $(function() {

            $("#Button1").click(function() { 

                var strHTML = ""; 

                strHTML += "姓名:" + objInfo.name + "<br>";

                strHTML += "性别:" + objInfo.sex + "<br>";

                strHTML += "年龄:" + objInfo.email + "<hr>";

                $("#Tip").html(strHTML); 

            }); ;

        });

    </script>

</head>

<body>

   <div class="iframe">

         <div class="title">

              <input id="Button1" type="button"

                     class="btn" value="获取数据" />

         </div>

         <div class="content">

              <div id="Tip"></div>

         </div>

    </div>

</body>

</html>

 

 

2:在前端JS字符串转化成JSON格式

 

2.1 通过eval()进行;

 

<head>

    <title>jQuery 操作JSON 数据</title>

    <script src="JScript/jquery-1.8.2.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        var strInfo = "{'name': '小明','sex': '男','email': '[email protected]','date':1349340837359}";

        $(function() {

            var strV0 = "原始数据";

            var strV1 = "变化数据"; 

                var strHTML = "";

                //将字符串转成JSON对象

                var objInfo = eval('(' + strInfo + ')');

                //根据按钮文字改变JSON对象中的值

                if ($(this).val() == strV1) {

                    objInfo.date = new Date().getTime();

                }

                strHTML += "姓名:" + objInfo.name + "<br>";

                strHTML += "性别:" + objInfo.sex + "<br>";

                strHTML += "邮箱:" + objInfo.email + "<br>";

                strHTML += "时间:" + objInfo.date + "<hr>";

                //切换按钮显示的文字

                if ($(this).val() == strV0) {

                    $(this).val(strV1);

                } else {

                    $(this).val(strV0);

                }

                //显示处理后的数据

                $("#Tip").html(strHTML); 

            });

        });

    </script>

</head>

<body>

   <div class="iframe">

         <div class="title">

              <input id="Button1" type="button"

                     class="btn" value="原始数据" />

         </div>

         <div class="content">

              <div id="Tip"></div>

         </div>

    </div>

</body>

</html>

注意:为什么要 eval这里要添加 “("("+data+")");//”呢?原因在于:eval本身的问题。 由于json是以”{}”的方式来开始以及结束的,在JS中,它会被当成一个语句块来处理,所以必须强制性的将它转换成一种表达式。加上圆括号的目的是迫使eval函数在处理JavaScript代码的时候强制将括号内的表达式(expression)转化为对象,而不是作为语句(statement)来执行。举一个例子,例如对象字面量{},如若不加外层的括号,那么eval会将大括号识别为JavaScript代码块的开始和结束标记,那么{}将会被认为是执行了一句空语句。所以下面两个执行结果是不同的:alert(eval("{}"); // return undefined        alert(eval("({})");// return object[Object]   对于这种写法,在JS中,可以到处看到。如: (function()) {}(); 做闭包操作时等。

 

 

 

2.2 通过jQuery.parseJSON()进行转化成JSON;接受一个JSON字符串,返回解析后的对象。传入一个畸形的JSON字符串会抛出一个异常。比如下面的都是畸形的JSON字符串:{test: 1} ( test 没有包围双引号);{'test': 1} (使用了单引号而不是双引号) 另外,如果你什么都不传入,或者一个空字符串、null或undefined,parseJSON都会返回 null 。

 

<head>

    <title>jQuery 操作JSON 数据</title>

    <script src="JScript/jquery-1.8.2.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        var strInfo = '{"name": "小明","sex": "男","email": "[email protected]","date":1349340837359}'; //注意单双引号

        $(function () {

            //定义按钮文字变量

            var strV0 = "原始数据";

            var strV1 = "变化数据";

            $("#Button1").click(function () {

                var strHTML = "";

                //将字符串转成JSON对象

                var objInfo = jQuery.parseJSON(strInfo);

                //根据按钮文字改变JSON对象中的值

                if ($(this).val() == strV1) {

                    objInfo.date = new Date().getTime();

                }

                strHTML += "姓名:" + objInfo.name + "<br>";

                strHTML += "性别:" + objInfo.sex + "<br>";

                strHTML += "邮箱:" + objInfo.email + "<br>";

                strHTML += "时间:" + objInfo.date + "<hr>";

                //切换按钮显示的文字

                if ($(this).val() == strV0) {

                    $(this).val(strV1);

                } else {

                    $(this).val(strV0);

                }

                //显示处理后的数据

                $("#Tip").html(strHTML);

            });

        });

    </script>

</head>

<body>

   <div class="iframe">

         <div class="title">

              <input id="Button1" type="button"

                     class="btn" value="原始数据" />

         </div>

         <div class="content">

              <div id="Tip"></div>

         </div>

    </div>

</body>

</html>

  

 

3:上面的Json格式都是比较简单类型(只是name:value类型),还有一种是带嵌套平时我们也会经常碰到;Json中是以"[]"来包含;我们可以通过each进行循环显示出来;

 

<head>

    <title>jQuery 遍历JSON 数据</title>

    <script src="JScript/jquery-1.8.2.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        var objData = {

            member: [{

                grade: "一年级",

                students: {

                    name: ["刘小芳", "李大明"]

                }

            }, {

                grade: "二年级",

                students: {

                    name: ["陈优", "王小海", "朱红"]

                }

            }, {

                grade: "三年级",

                students: {

                    name: ["张妍", "蔡霞"]

                }

               }]

           };

           function add_Grade() {

               var objmember = objData.member;

               var strHTML_0 = ""; 

               $.each(objmember, function(index) {

                   strHTML_0 += '<a href="javascript:" onclick="lnk_Click(' + index + ')">'

                   + objmember[index].grade

                   + '</a>  ';

               });

               $(".title").html("年级优秀学生:" + strHTML_0);

           };

           function lnk_Click(i) {

               var objstudent = objData.member[i].students.name;

               var strHTML_1 = ""; 

               $.each(objstudent, function(index) {

                   strHTML_1 += ' ' + objstudent[index] + ' ';

               });

               $("#Tip").html(strHTML_1);

           };

           $(function() {

               add_Grade();

               lnk_Click(0)

           });

    </script>

</head>

<body>

   <div class="iframe">

         <div class="title"></div>

         <div class="content">

              <div id="Tip"></div>

         </div>

    </div>

</body>

</html>

 

 

4:在ASP.NET中操作JSON一般是与ashx进行结合;后台返回JSON在前台进行显示;下面的实例通过AJAX获得后台对象实体的字符串然后显示;

 

a:前台页面通过ajax调用后台的ashx程序获得数据

 

<head runat="server">

    <title></title>

    <script src="Scripts/jquery-1.8.2.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            var strHtml = "";

            $("#BtnGetJson").click(function () {

                $.ajax({

                    url: "ToJson.ashx",

                    type: "GET",

                    dataType: "json",

                    success: function (data) {

                        $.each(data, function (index) {

                            strHtml += ' ' + data[index].Name + ' ' + data[index].PassWord + '<br/>';

                        });

                        $("#MyDiv").html(strHtml);

                    }

                });

            });

        });

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <input id="BtnGetJson" type="button" value="获得JSON值" />

    <div id="MyDiv">  

    </div>

    </form>

</body>

</html>

b:新建一个ToJson.ashx的一般处理程序类,让它将后台的实体对象进行转化返回到前台

 

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

 

namespace JqueryForJson

{

    /// <summary>

    /// ToJson 的摘要说明

    /// </summary>

    public class ToJson : IHttpHandler

    {

 

        public void ProcessRequest(HttpContext context)

        {

            context.Response.ContentType = "text/plain";

            List<User> list = new List<User>();

            list.Add(new User() { Name = "踏浪帅", PassWord = "123456" });

            list.Add(new User() { Name = "wujy", PassWord = "456789" });

            string JsonStr = JsonHelper.GetJson<List<User>>(list);//如果是单个实体GetJson<User>(model)

            context.Response.Write(JsonStr);

        }

 

        public bool IsReusable

        {

            get

            {

                return false;

            }

        }

    }

 

    public class User

    {

        public string Name { get; set; }

 

        public string PassWord { get; set; }

    }

}

c:这边有一个把实体转化成JSON字符串的类,当然也可以通过其它方式进行转化;

 

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Runtime.Serialization.Json;

using System.ServiceModel.Web;///记得引用这个命名空间

using System.IO;

using System.Text;

/// <summary>

/// Summary description for JsonHelper

/// </summary>

public class JsonHelper

{

    public JsonHelper()

    {

        //

        // TODO: Add constructor logic here

        //

    }

    /// <summary>

    /// 把对象序列化 JSON 字符串 

    /// </summary>

    /// <typeparam name="T">对象类型</typeparam>

    /// <param name="obj">对象实体</param>

    /// <returns>JSON字符串</returns>

    public static string GetJson<T>(T obj)

    {

        //记住 添加引用 System.ServiceModel.Web 

        /**

         * 如果不添加上面的引用,System.Runtime.Serialization.Json; Json是出不来的哦

         * */

美高梅游戏官网网站 ,        DataContractJsonSerializer json = new DataContractJsonSerializer(typeof(T));

        using (MemoryStream ms = new MemoryStream())

        {

            json.WriteObject(ms, obj);

            string szJson = Encoding.UTF8.GetString(ms.ToArray());

            return szJson;

        }

    }

    /// <summary>

    /// 把JSON字符串还原为对象

    /// </summary>

    /// <typeparam name="T">对象类型</typeparam>

    /// <param name="szJson">JSON字符串</param>

    /// <returns>对象实体</returns>

    public static T ParseFormJson<T>(string szJson)

    {

        T obj = Activator.CreateInstance<T>();

        using (MemoryStream ms = new MemoryStream(Encoding.UTF8.GetBytes(szJson)))

        {

            DataContractJsonSerializer dcj = new DataContractJsonSerializer(typeof(T));

            return (T)dcj.ReadObject(ms);

        }

    }

}

  

...

本文由美高梅网址发布于新闻中心,转载请注明出处:自动播放代码,自动播放的实例代码

上一篇:JS保留两位小数,js四舍五入小数位的函数 下一篇:没有了
猜你喜欢
热门排行
精彩图文