Timer刷新后，javascript失效？

csin1101 2015-07-10 12:27:07

我是用百度的Echarts画了一个表

<script type="text/javascript">

    // 路径配置

    require.config({

        paths: {

            echarts: 'http://echarts.baidu.com/build/dist'

        }

    });

    // 使用

    require(

        [

            'echarts',

            'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载

        ],

        function (ec) {

            // 基于准备好的dom，初始化echarts图表

            var myChart = ec.init(document.getElementById('divProgress'));



            var option = {

                tooltip: {

                    show: true

                },

                legend: {

                    data: ['销量']

                },

                xAxis: [

                    {

                        type: 'category',

                        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]

                    }

                ],

                yAxis: [

                    {

                        type: 'value'

                    }

                ],

                series: [

                    {

                        "name": "销量",

                        "type": "bar",

                        "data": [5, 20, 40, 10, 10, 20]

                    }

                ]

            };



            // 为echarts对象加载数据 

            myChart.setOption(option);

        }

    );

</script>

把承载Echarts的div元素放在一个UpdatePanel里面，

<div id="divProgress"  class="panel-body" style="height:260px;">

                                Panel content

                            </div>

然后设置一个自动刷新的Timer

<asp:Timer ID="Timer1" runat="server" Interval="1000" OnTick="Timer1_Tick" ></asp:Timer>

该Timer对应的Timer1_Tick事件内调用，Echats相关的两个函数

protected void Timer1_Tick(object sender, EventArgs e)

    {

        ScriptManager.RegisterStartupScript(UpdatePanel3, UpdatePanel3.GetType(), "", "require.config();", true);

        ScriptManager.RegisterStartupScript(UpdatePanel3, UpdatePanel3.GetType(), "", "require();", true);

    }

现在的问题是Echarts只在一开始出现，当TImer刷新后Echarts就消失了。

...全文

491 20 打赏收藏转发到动态举报

写回复

用AI写文章

20 条回复

切换为时间正序

请发表友善的回复…

发表回复

big_shot 2015-08-04

打赏
举报

好好学习，天天向上

ajianchina 2015-07-20

打赏
举报

我没用过Echart，我写的那个方法完全是基于你写的那段Echart数据载入方法通过javascript语句的调用而已，所以熟悉javascript应用框架之前还是尽量要先数据javascript语言。

csin1101 2015-07-19

打赏
举报

引用 17 楼 ajianchina 的回复:

[quote=引用 16 楼 csin1101 的回复:] 中的getdata.ashx里面大概是个什么格式？

ashx是asp.net中的一般处理程序，在你这儿可以把他作为text来读。你新建一个ashx文件，mime类型设为ContentType = "text/plain"，反正你就只取一个数字而已，你从数据库中取到后Write出来就行，除了数据库取值的代码，其他只要写四五行代码就可以了，你可以去网上看看ashx的相关介绍，[/quote]

谢谢你，终于实现了

    window.setInterval(function () {
        var data = [test, 5, 10, 40, 20, 10];

       $.get("SQLTest.ashx",function(responseTxt,statusTxt,xhr)
       {
        test=responseTxt;
        //if (statusTxt == "success")alert(test);
        if (statusTxt == "error")
                alert("Error: " + xhr.status + ": " + xhr.statusText);
       });
        data = [test, 5, 10, 40, 20, 10];
        refreshData(data);       
   },3000);
 
function refreshData(data){
     if(!myChart){
          return;
     }
     
     //更新数据
      var option = myChart.getOption();
      option.series[0].data = data;   
      myChart.setOption(option);    
}

对了高手，我如果想系统的学会这一系列的方法，大概要去学习那些内容？ JavaScript、jQuery、还有？而且看你帮我写的refreshData(data) 那个函数就感觉你的Echart很熟练，以后不免再请教。

ajianchina 2015-07-17

打赏
举报

引用 16 楼 csin1101 的回复:

中的getdata.ashx里面大概是个什么格式？

csin1101 2015-07-17

打赏
举报

引用 15 楼 ajianchina 的回复:

[quote=引用 14 楼 csin1101 的回复:] 请问我有没什么办法可以让这种数据刷新不断的进行下去？

用JQuery 从后台取吧


window.setTimeout(function(){
     var data;
     $.get("getdata.ashx",function(test){
       //返回值是字符串类型，parseInt转成整数
 　　data = [parseInt(test), 5, 10, 40, 20, 10];
     } ); 
      refreshData(data);
 },3000);

[/quote] 高手，非常感谢，我去w3c看了一天jQuery，感觉有所收获，但是暂时只写了这么一段

$(document).ready(function () {
    $("button").click(function () {
        $("#p1").load("Content/progress.txt", function (responseTxt, statusTxt, xhr) {
            test = responseTxt;
            if (statusTxt == "success")
                alert(test);
            if (statusTxt == "error")
                alert("Error: " + xhr.status + ": " + xhr.statusText);
            
        });
    });
});

只会用load方法去一个txt里面读取数据（昨天尝试用get方法时，不知道什么原因没成功）。我想问一下，

$.get("getdata.ashx",function(test)

中的getdata.ashx里面大概是个什么格式？

ajianchina 2015-07-14

打赏
举报

引用 14 楼 csin1101 的回复:

请问我有没什么办法可以让这种数据刷新不断的进行下去？

用JQuery 从后台取吧


window.setTimeout(function(){
     var data;
     $.get("getdata.ashx",function(test){
       //返回值是字符串类型，parseInt转成整数
 　　data = [parseInt(test), 5, 10, 40, 20, 10];
     } ); 
      refreshData(data);
 },3000);

csin1101 2015-07-14

打赏
举报

引用 12 楼 ajianchina 的回复:

[quote=引用 10 楼 csin1101 的回复:] 我依瓢画葫芦，写了一下，没有起效啊

你看看我myChart定义的位置，你不会js那也不太好办啊，最终实现结果还是要靠自己写的。[/quote] 你好，我依据你给的代码测试成功了，我想要的效果就是从一开始的

"data": [5, 20, 40, 10, 10, 20]

数据刷新成

 window.setTimeout(function(){
     var data = [test, 5, 10, 40, 20, 10];
      refreshData(data);
 },3000);

这种效果。 test是我从后台读取的整形数据，请问我有没什么办法可以让这种数据刷新不断的进行下去？

ajianchina 2015-07-13

打赏
举报

引用 10 楼 csin1101 的回复:

我依瓢画葫芦，写了一下，没有起效啊

你看看我myChart定义的位置，你不会js那也不太好办啊，最终实现结果还是要靠自己写的。

csin1101 2015-07-13

打赏
举报

引用 9 楼 starfd 的回复:

你的timer就这么两端代码，你为啥不能用setInterval方法来调用你的两个js方法呢……

额，你想知道真想吗？其实，很简单，我并不会js，所以我尝试了setInterval，但是没有效果，我也不知道是不是我写错了

<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
    var int = self.setInterval("function()", 50);

    var prvalue =<%=ProcessData%>
    // 路径配置
    require.config({
        paths: {
            echarts: 'http://echarts.baidu.com/build/dist'
        }
    });
    // 使用
    require(
        [
            'echarts',
            'echarts/chart/gauge' // 使用柱状图就加载bar模块，按需加载
        ],
        function (ec) {
            // 基于准备好的dom，初始化echarts图表
            var myChart = ec.init(document.getElementById('divProgress'));

            var option = {
    tooltip : {
        formatter: "{a} <br/>{b} : {c}%"
    },
    animation: false,
    toolbox: {
        show : false,
        feature : {
            mark : {show: true},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    series : [
        {
            name:'业务指标',
            type:'gauge',
            
            splitNumber: 10,       // 分割段数，默认为5
            axisLine: {            // 坐标轴线
                lineStyle: {       // 属性lineStyle控制线条样式
                    color: [[0.2, '#ff4500'], [0.8, '#5BC0DE'], [1, '#228b22']],
                    width: 8
                }
            },
            axisTick: {            // 坐标轴小标记
                splitNumber: 10,   // 每份split细分多少段
                length :12,        // 属性length控制线长
                lineStyle: {       // 属性lineStyle控制线条样式
                    color: 'auto'
                }
            },
            axisLabel: {           // 坐标轴文本标签，详见axis.axisLabel
                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                    color: 'auto'
                }
            },
            splitLine: {           // 分隔线
                show: true,        // 默认显示，属性show控制显示与否
                length :30,         // 属性length控制线长
                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                    color: 'auto'
                }
            },
            pointer : {
                width : 5
            },
            title : {           //标题，现在的标题就是 ‘完成率’
                show : true,
                offsetCenter: [0, '-40%'],       // x, y，单位px
                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                    fontWeight: 'bolder',
                    color: '#FFFFFF',
                }
            },
            detail : {
                formatter:'{value}%',
                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                    color: 'auto',
                    fontWeight: 'bolder'
                }
            },
            //data: [{ value: document.getElementById("HiddenField1").value, name: '完成率' }]
            prvalue: prvalue + 1,
            data: [{ value: prvalue, name: '完成率' }]
            
        }
    ]
};

            // 为echarts对象加载数据 
            myChart.setOption(option);
        }
    );
/*    clearInterval(timeTicket);
timeTicket = setInterval(function (){
    option.series[0].data[0].value = (Math.random()*100).toFixed(2) - 0;
    myChart.setOption(option,true);
}, 2000)*/

/*//这里用setTimeout代替ajax请求进行演示
 window.setTimeout(function(){
      var data = [{ value: 25, name: '完成率' }];
      refreshData(data);
 },1000);
 
function refreshData(data){
     if(!myChart){
          return;
     }
     
     //更新数据
      var option = myChart.getOption();
      option.series[0].data = data;   
      myChart.setOption(option);   
    }
*/

</script>

csin1101 2015-07-13

打赏
举报

引用 4 楼 ajianchina 的回复:

你的Timer方法里就为了刷新一下图表，这也太大动干戈了，直接在上面的js里写一下就行了。


var myChart;

// 路径配置
require.config({
	paths: {
		echarts: 'http://echarts.baidu.com/build/dist'
	}
});
// 使用
require(
	[
		'echarts',
		'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
	],
	function (ec) {
		// 基于准备好的dom，初始化echarts图表
		myChart = ec.init(document.getElementById('divProgress'));
		var option = {
			tooltip: {
				show: true
			},
			legend: {
				data: ['销量']
			},
			xAxis: [
				{
					type: 'category',
					data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
				}
			],
			yAxis: [
				{
					type: 'value'
				}
			],
			series: [
				{
					"name": "销量",
					"type": "bar",
					"data": [5, 20, 40, 10, 10, 20]
				}
			]
		};

		// 为echarts对象加载数据 
		myChart.setOption(option);
	}
);

//这里用setTimeout代替ajax请求进行演示
 window.setTimeout(function(){
	  var data = [新的数据，自己搞定  ];
	  refreshData(data);
 },3000);

function refreshData(data){
	 if(!myChart){
		  return;
	 }
	
	 //更新数据
	  var option = myChart.getOption();
	  option.series[0].data = data;	
	  myChart.setOption(option);    
}

我依瓢画葫芦，写了一下，没有起效啊

<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">

    var prvalue =<%=ProcessData%>
    // 路径配置
    require.config({
        paths: {
            echarts: 'http://echarts.baidu.com/build/dist'
        }
    });
    // 使用
    require(
        [
            'echarts',
            'echarts/chart/gauge' // 使用柱状图就加载bar模块，按需加载
        ],
        function (ec) {
            // 基于准备好的dom，初始化echarts图表
            var myChart = ec.init(document.getElementById('divProgress'));

            var option = {
    tooltip : {
        formatter: "{a} <br/>{b} : {c}%"
    },
    animation: false,
    toolbox: {
        show : false,
        feature : {
            mark : {show: true},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    series : [
        {
            name:'业务指标',
            type:'gauge',
            
            splitNumber: 10,       // 分割段数，默认为5
            axisLine: {            // 坐标轴线
                lineStyle: {       // 属性lineStyle控制线条样式
                    color: [[0.2, '#ff4500'], [0.8, '#5BC0DE'], [1, '#228b22']],
                    width: 8
                }
            },
            axisTick: {            // 坐标轴小标记
                splitNumber: 10,   // 每份split细分多少段
                length :12,        // 属性length控制线长
                lineStyle: {       // 属性lineStyle控制线条样式
                    color: 'auto'
                }
            },
            axisLabel: {           // 坐标轴文本标签，详见axis.axisLabel
                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                    color: 'auto'
                }
            },
            splitLine: {           // 分隔线
                show: true,        // 默认显示，属性show控制显示与否
                length :30,         // 属性length控制线长
                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                    color: 'auto'
                }
            },
            pointer : {
                width : 5
            },
            title : {           //标题，现在的标题就是 ‘完成率’
                show : true,
                offsetCenter: [0, '-40%'],       // x, y，单位px
                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                    fontWeight: 'bolder',
                    color: '#FFFFFF',
                }
            },
            detail : {
                formatter:'{value}%',
                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                    color: 'auto',
                    fontWeight: 'bolder'
                }
            },
            //data: [{ value: document.getElementById("HiddenField1").value, name: '完成率' }]
            data: [{ value: prvalue, name: '完成率' }]
            
        }
    ]
};

            // 为echarts对象加载数据 
            myChart.setOption(option);
        }
    );
/*    clearInterval(timeTicket);
timeTicket = setInterval(function (){
    option.series[0].data[0].value = (Math.random()*100).toFixed(2) - 0;
    myChart.setOption(option,true);
}, 2000)*/

//这里用setTimeout代替ajax请求进行演示
 window.setTimeout(function(){
      var data = [{ value: 25, name: '完成率' }];
      refreshData(data);
 },1000);
 
function refreshData(data){
     if(!myChart){
          return;
     }
     
     //更新数据
      var option = myChart.getOption();
      option.series[0].data = data;   
      myChart.setOption(option);   
    }
</script>

csin1101 2015-07-13

打赏
举报

引用 12 楼 ajianchina 的回复:

[quote=引用 10 楼 csin1101 的回复:] 我依瓢画葫芦，写了一下，没有起效啊

你看看我myChart定义的位置，你不会js那也不太好办啊，最终实现结果还是要靠自己写的。[/quote] 麻烦了，谢谢啦，我再试试。

娃都会打酱油了 2015-07-13

打赏
举报

你的timer就这么两端代码，你为啥不能用setInterval方法来调用你的两个js方法呢……

csin1101 2015-07-13

打赏
举报

引用 2 楼 Z65443344 的回复:

timer触发的时候,页面回发了你需要把加载表格的代码重新执行一遍

我写Timer1_Tick 就是想实现这个效果，但不知道是我的Timer1_Tick 写错了，还是本身就不能这么用？

csin1101 2015-07-13

打赏
举报

引用 1 楼 starfd 的回复:

将你的script用function包含下，在timer包含的部分再调用一次看有没有效用

我写Timer1_Tick 就是希望实现这种调用效果，但是不知道是我这两句写错了，还是本身就不能这样做？

protected void Timer1_Tick(object sender, EventArgs e)
    {
        ScriptManager.RegisterStartupScript(UpdatePanel3, UpdatePanel3.GetType(), "", "require.config();", true);
        ScriptManager.RegisterStartupScript(UpdatePanel3, UpdatePanel3.GetType(), "", "require();", true);
    }

於黾 2015-07-10

打赏
举报

timer触发的时候,页面回发了你需要把加载表格的代码重新执行一遍

娃都会打酱油了 2015-07-10

打赏
举报

将你的script用function包含下，在timer包含的部分再调用一次看有没有效用

以专业开发人员为伍 2015-07-10

打赏
举报

你的所谓“承载Echarts的div元素放在一个UpdatePanel里面”，可能是考虑随着参数不同而到界面有很大改变，所以希望是个比较复杂的“动态模板”。你还是在用 asp.net 来做重度的 UI 设计。但是要知道，稍微深入一点去与前端 UI 框架与 asp.net 纠结在一起来实现UI部分，你想让用户的领导满意，特别是想灵活地竞争过其它公司的合格的纯 javascript 前端框架的产品，那么这个设计思路就是一个大坑。

以专业开发人员为伍 2015-07-10

打赏
举报

基本上，如果你选择富客户端的 UI 框架，那么可以考虑 asp.net 就基本上不用了。甚至说实际上用一个ashx之类的，为页面第一次加载时下载一个类似

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8" />
    <link href="css/MyApp.css" rel="stylesheet" />
</head>
<body>
        <div id="SeoData" class="invisible seoStyle">
            <ul class="group">
                <li class="group-item">
                               ......
                </li>
                <li class="group-item">
                               ......
                </li>
            </ul>
            <ul class="group">
             ...............
            </ul>
        </div>
    </div>

    <script src="Scripts/jquery-2.1.3.js"></script>
    <script src="Scripts/md5.js"></script>
    <script src="Scripts/moment.min.js"></script>
    <script src="js/ver20150710.js"></script>

    <script type="text/javascript">
            Main.Start();
    </script>

</body>
</html>

这样的代码就足够了。这种页面，只有一个简单的seo列表用来给搜索引擎看（如果根本就是动态页面，那么连这个也省了），然后就是一句调用 javascript 函数的语句就完了。整个UI界面将通过基本的一两个 url 参数或者客户端存储参数，动态地加载其它 js 代码，或者动态地使用 ashx 服务取得 html 模板（富客户端的 UI 组件，例如 knockout，都是在浏览器端去自动解析和处理模板的，用不着你的asp.net）。从这个编程框架可以看出，富客户端web应用程序，跟 asp.ne t完全不同。如果满脑子是 asp.net 框架时慢慢地去使用前端框架、慢慢地改变asp.net 程序设计的完整头脑，那么你的web开发效率将会很低，特别是 bug 将是非常多的。因此我们招聘时，要么招聘前端 javascript 工程师，要么招聘个别的 asp.net 实习生去维护老程序（不鼓励在其中使用前端框架）。不走中间路线。

ajianchina 2015-07-10

打赏
举报

你的Timer方法里就为了刷新一下图表，这也太大动干戈了，直接在上面的js里写一下就行了。


var myChart;

// 路径配置
require.config({
	paths: {
		echarts: 'http://echarts.baidu.com/build/dist'
	}
});
// 使用
require(
	[
		'echarts',
		'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
	],
	function (ec) {
		// 基于准备好的dom，初始化echarts图表
		myChart = ec.init(document.getElementById('divProgress'));
		var option = {
			tooltip: {
				show: true
			},
			legend: {
				data: ['销量']
			},
			xAxis: [
				{
					type: 'category',
					data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
				}
			],
			yAxis: [
				{
					type: 'value'
				}
			],
			series: [
				{
					"name": "销量",
					"type": "bar",
					"data": [5, 20, 40, 10, 10, 20]
				}
			]
		};

		// 为echarts对象加载数据 
		myChart.setOption(option);
	}
);

//这里用setTimeout代替ajax请求进行演示
 window.setTimeout(function(){
	  var data = [新的数据，自己搞定  ];
	  refreshData(data);
 },3000);

function refreshData(data){
	 if(!myChart){
		  return;
	 }
	
	 //更新数据
	  var option = myChart.getOption();
	  option.series[0].data = data;	
	  myChart.setOption(option);    
}

以专业开发人员为伍 2015-07-10

打赏
举报

asp.net 是“一遍遍刷新html”的机制，与最近几年的富客户端编程完全不适配。你要么放弃百度的这个工具，要么彻底改写你的 asp.net 端的设计。

JavaScript：定义行为和动作 (基于对象和事件驱动的客户端脚本语言；也是一种广泛应用于客户端Web开发的脚本语言) 基于对象：网页中的一切元素都是假象！不需要new，即可直接使用事件驱动：JavaScript的执行都是由事件引发解释执行：先读到的先执行，后读到的会替代先读的可以使用任何文本编辑工具编写 JavaScript 代码，然后由浏览器解释执行。 JavaScript常用于实现如下功能： |--控制文档的外观和内容； |--对浏览器的控制； |--与 HTML 表单的交互； |--与用户的交互； |--执行计算等。 1.单击事件：定义在按钮的开始标签中语法：onclick="js语句" 弹出警告：alert(‘字符串’) 强调：1.js区分大小写 2.字符串单双引号不区分 [removed]标签：页面中专门集中编写JavaScript的区域 js的方法定义：function方法名([参数列表]){ 方法体 [return 返回值] } 注意：js中的方法可以直接写在代码中，不需要“类”包裹使用方法：方法名()-->方法调用-->立即执行 2.js文件：网页外专门保存js脚本的文件--推荐强调：HTML、CSS、JS都要使用UTF-8编码保存(window系统) 使用js文件引入网页：[removed][removed] 强调：一旦定义src属性则其中的代码失效解释执行：语句也可以直接写在js文件中，边解释边执行 3.***调试*** |--①.只有在执行时，才会报错 |--②.错误信息，浏览器页面看不到--没效果 | 解决：控制台--（工具-->JavaScript控制台或F12） | 包含错误信息；指向错误位置的超链接 |--③.打桩：在指定变量位置输出变量或对象的内容 console.log(内容);-->出现在控制台-->日志 4.变量：js中的变量不需要提前指定类型，由赋值时动态决定所有的变量都用var声明 5.数据类型： |--String(字符串类型) |--Number(数字类型) |--Boolean(布尔类型)0、-0、null、""、false/undefined或NaN,则该对象设置为false。其余都可以当true 6.数据类型的隐式转换： |--数字 + 字符串：数字转换为字符串 |--数字 + 布尔值：true转换为1，false转换为0 |--字符串 + 布尔值：布尔值转换为字符串true或false |--布尔值 + 布尔值：布尔值转换为数值1或0 7.数据类型转换函数：(方法前不需要对象调用的：全局函数) |--toString()：转换成字符串。所有数据类型均可转换为 string 类型； |--parseInt()：强制转换成整数。如果不能转换，则返回 NaN（not a number）； |--parseFloat()：强制转换成浮点数。如果不能转换，则返回 NaN(Not a Number) |--typeof()：查询数值当前类型。 |--isNaN()：判断是否为数字。返回 true：不是数字/false：是数字 | |--isNan(""):对空字符串不验证，直接返回false | |--如果输入的是字符串类型的数字，返回false--不能判断数据类型，只判断内容 | |--如果输入的是boolean，返回false。因为boolean可以和number类型直接做计算 | |--和任何数字计算都得NaN;和任何数字作比较都得false |--注：[removed]();节点输出，即在当前位置输出括号里的内容 *凡是从页面上进入js的都是字符串类型 8.查找元素：抓住根节点，就等于抓住整棵树网页的根节点：document对象要找元素，必须利用document对象（当前网页文件）精确查找某个ID的元素：document.getElementById(id名)； 9.null和undefined： |--null：一个特殊的值，表示“无值”--空对象。数据类型为Object |--undefined：表示声明了变量但从未赋值或者对象属性不存在 10.双等号（==）和全等号（===）： |--“==”为确定两个运算数是否相等，“==”运算符会进行类型转换。转换后运算数相等就返回true，否则返回false |--“===”不执行类型转换，即，只有在无需类型转换运算数就相等的情况下，才返回true，否则返回false |--附：if(null)、if(defined)、if(NaN)都相当于if(false) -----猜数字游戏----- 失去焦点时，判断猜对猜错获得焦点：onfocus 失去焦点：onblur 当事件就发生在获得内容的当前元素上： this直接获得当前内容对象。可以代替当前对象完成一切操作，拥有当前对象的所有属性前端优化：js中最好用三目运算代替if else 11.String： |--查找：x.indexOf(‘关键字’[，开始位置下标]) | 每次只查找第一次出现的位置 |--替换：x.replace(‘关键字’[,‘替换内容’])--不会修改原x字符串 | 每次只替换第一次找到的 |--查找和替换所有：while循环 | |--String 对象的常用方法有： |--x.toLowerCase()、x.toUpperCase()：大小写转换方法； |--x.charAt(index)：返回指定位置的字符； |--x.charCodeAt(index)：返回指定位置字符的Unicode编码； |--x.indexOf(findstr,index)、x.lastIndexOf(findstr,index)：获取指定字符； |--x.substring(start, end)：获取子字符串； |--x.replace(findstr,tostr)：替换子字符串； |--x.split(bystr)：拆分子字符串。 |--String与正则表达式 |--str.match(regExp);--查找str中匹配正则表达式的关键字 | 返回：如果没找到，返回null。若找到，返回1个数组，数组的每个元素是每个找到的匹配关键 | |--str.replace(regExp,"替换值")--替换str中所有匹配的关键字 | 强调：replace方法不改变元字符串，只能返回新字符串。必须用变量接收新字符串 | |--js中正则表达式语法：/正则表达式/[属性后缀]--其中属性后缀，g：全局匹配 i：忽略大小写(仅英文有效) 如果不适用模式匹配方式，将执行原文匹配结果：如果正则表达式写错，也将执行原文匹配 12.Array笔试题：js中数组声明方式： A new Array(7) B new Array(7，‘a’，true) C [7，'a',true]--js中所有[]都表示数组 D []--实例化一个空数组对象实例化空数组：var arr=[]; 特点：元素个数不限定，元素类型不限制 13.Array 对象的常用方法： |--1.join()方法--用于把数组中的所有元素放入一个字符串　 | eparato表示要使用的分隔符。如果省略该参数，则使用逗号作为分隔符 |--2.toString()方法--可把数组转换为字符串，并返回结果 |--3.concat()方法--用于连接两个或多个数组，该方法不会改变现有的数组 |--4.slice()方法--截取元素。根据给定的范围可从已有的数组中返回选定的元素 14.Function：js中一切都是对象，连方法都是1个对象！！笔试题：js中方法定义集中方式： A：function compare(a,b){return a-b;}---*可以任意地方声明方法* B：var compare=function(a,b){return a-b;} ---| --其实方法名也是方法对象的变量名;等号右边其实就是1个匿名方法对象 |--*必须在传递之前声明方法对象* C：var compare=new Function('a','b','return a-b') ---| --其实js底层就是new Function;构造函数中的参数都是字符串结论：所有的方法都是function类型的。 15.JavaScript中的所有事物都是对象，分为三类： |--简单对象：String、Number、Boolean |--组合对象：Array、Math、Date |--复杂对象：Function、Regex、Object等 16.Array排序： |--升序：function compare(a,b){return a-b;} |--降序：function compare(a,b){return b-a;} 比较器用法：arr.sort(比较器方法名); 遍历：for(var i=0;iJavaScript 对象常用的全局函数有：parseInt/parseFloat、isNaN、eval、decodeURI/encodeURI等。 encodeURI和decodeURI： |--encodeURI：可把字符串作为 URI 进行编码 |--decodeURI：decodeURI()函数可对encodeURI()函数编码过的 URI 进行解码 eval() 函数可计算某个字符串，并执行其中的的JavaScript代码 23.BOM:操作浏览器窗口的对象模型。 --即浏览器对象模型，用来访问和操纵浏览器窗口，使 JavaScript 有能力与浏览器“对话” DOM：操作网页中元素对象的对象模型--即文档对象模型，用来操作文档 window对象的常用属性： |--document：窗口中显示的 HTML 文档对象 |--history：本次浏览过窗口的历史记录 | --前进：history.go(1);后退：history.go(-1);刷新：history.go(0); |--location：窗口文件地址对象（地址栏） |--event：事件对象 |--screen：屏幕对象 |--name：窗口名称 |--opener：打开当前窗口的 window 对象 |--navigator：有关浏览器的信息 |--cookieEnable：判断当前浏览器是否启用cookie |--userAgent:获得浏览器的名称和版本号 window 对象的常用方法有： |--alert();--警告框--只能点确认 |--confirm();确认框--可以选择确认或取消 |--prompt();对话框--用于显示可提示用户进行输入 |--window.open('url'[,'name'])：打开1个选项卡 |--window.close()：关闭当前选项卡 24.定时器：凡是网页中自动动态的效果都是用计时器实现的 |--周期性定时器：每隔一个时间段自动执行一次，循环执行 | |--setInterval() 启动-->用于启动一个周期性定时器 | 语法：timer=setInterval(方法名，间隔毫秒数) |--clearInterval() 停止-->用于停止一个周期性定时器语法：timer=clearInterval(timer) |--1次性定时器：先等待一段时间，再自动执行一次，自动结束 |--setTimeout() 启动-->用于启动一个一次性定时器 |--clearTimeout() 停止-->用于停止一个一次性定时器附： |--表单控件，读写内容：.value |--普通html元素，要想读写开始标签和结束标签之间的内容：[removed] 计时器：1.做什么事：方法； 2.一个变量：存计时器的线程号 3.何时启动计时器：事件 25.document：1.代表当前网页文档； 2.所有网页元素的根元素； 3.查找和操作元素，都要依靠document；节点：nodeName--标签名或属性名 DOM操作样式：对象.className属性等效于<标签class=""> DOM树：当前节点向上：txtObj[removed]（）向下：txtObj.getElementByTagName（） 26.表单中查找控件对象：document.getElementsByName('name属性') DOM增加新节点：两种方法创建新节点：document.creatElement('标签名') --此时新元素对象仅在内存中游离，页面看不见！添加新节点：找到父元素！ |--appendChild() 方法只能将新节点作为某节点的最后一个子节点 | --此时新元素追加到了父元素的末尾 |--parentNode.insertBefore()(新元素对象，A)--其中A为新元素要插入位置的后一位元素 DOM删除元素：node.removeChild(childNode)--node为父节点，childNode为要删除的节点 27.HTML DOM Select和Option对象： select对象：代表HTML表单中的一个下拉列表，每个元素中所有具体使用手册，更多信息，点这里 //自带的打印预览 WebBrowser.ExecWB(1,1) 打开 Web.ExecWB(2,1) 关闭现在所有的IE窗口，并打开一个新窗口 Web.ExecWB(4,1) 保存网页 Web.ExecWB(6,1) 打印 Web.ExecWB(7,1) 打印预览 Web.ExecWB(8,1) 打印页面设置 Web.ExecWB(10,1) 查看页面属性 Web.ExecWB(15,1) 好像是撤销，有待确认 Web.ExecWB(17,1) 全选 Web.ExecWB(22,1) 刷新 Web.ExecWB(45,1) 关闭窗体无提示

//去掉打印时的页眉页脚 <script language="JavaScript"> var HKEY_Root,HKEY_Path,HKEY_Key; HKEY_Root="HKEY_CURRENT_USER"; HKEY_Path="\Software\Microsoft\Internet Explorer\PageSetup\"; //设置网页打印的页眉页脚为空 function PageSetup_Null() { try { var Wsh=new ActiveXObject("WScript.Shell"); HKEY_Key="header"; Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,""); HKEY_Key="footer"; Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,""); } catch(e){} } //设置网页打印的页眉页脚为默认值 function PageSetup_Default() { try { var Wsh=new ActiveXObject("WScript.Shell"); HKEY_Key="header"; Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,"&w&b页码,&p/&P"); HKEY_Key="footer"; Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,"&u&b&d"); } catch(e){} } //浏览器验证 function checkBrowser() { this.ver=navigator.appVersion this.dom=document.getElementById?1:0 this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom)?1:0; this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0; this.ie4=(document.all && !this.dom)?1:0; this.ns5=(this.dom && parseInt(this.ver) >= 5) ?1:0; this.ns4=(document.layers && !this.dom)?1:0; this.mac=(this.ver.indexOf("Mac") > -1) ?1:0; this.ope=(navigator.userAgent.indexOf("Opera")>-1); this.ie=(this.ie6 || this.ie5 || this.ie4) this.ns=(this.ns4 || this.ns5) this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns5 || this.ns4 || this.mac || this.ope) this.nbw=(!this.bw) return this; } //计算内容宽和高 //无模式的提示框 function modelessAlert(Msg) { window.showModelessDialog("javascript:alert(""+escape(Msg)+"");window.close();","","status:no;resizable:no;help:no;dialogHeight:height:30px;dialogHeight:40px;"); } //屏蔽按键屏蔽鼠标右键、Ctrl+N、Shift+F10、Alt+F4、F11、F5刷新、退格键 <script language="Javascript"> //可编辑SELECT //设置光标位置 function getCaret(textbox) { var control = document.activeElement; textbox.focus(); var rang = document.selection.createRange(); rang.setEndPoint("StartToStart",textbox.createTextRange()) control.focus(); return rang.text.length; } function setCaret(textbox,pos) { try { var r =textbox.createTextRange(); r.moveStart("character",pos); r.collapse(true); r.select(); } catch(e) {} } function selectLength(textbox,start,len) { try { var r =textbox.createTextRange(); r.moveEnd("character",len-(textbox.value.length-start)); r.moveStart("character",start); r.select(); } catch(e) {//alert(e.description)} } function insertAtCaret(textbox,text) { textbox.focus(); document.selection.createRange().text = text; } //页内查找 function findInPage(str) { var txt, i, found,n = 0; if (str == "") { return false; } txt = document.body.createTextRange(); for (i = 0; i <= n && (found = txt.findText(str)) != false; i++) { txt.moveStart("character", 1); txt.moveEnd("textedit"); } if (found) { txt.moveStart("character", -1); txt.findText(str); txt.select(); txt.scrollIntoView(); n++; } else { if (n > 0) { n = 0; findInPage(str); } else { alert(str + "... 您要找的文字不存在。请试着输入页面中的关键字再次查找！"); } } return false; } //书 http://www.itpub.net/attachment.php?s=&postid=1894598 http://www.wrclub.net/down/listdown.aspx?id=1341//操作EXECL <script language="javascript"> function jStartExcel() { var xls = new ActiveXObject ( "Excel.Application" ); xls.visible = true; var newBook = xls.Workbooks.Add; newBook.Worksheets.Add; newBook.Worksheets(1).Activate; xls.ActiveWorkBook.ActiveSheet.PageSetup.Orientation = 2; xls.ActiveWorkBook.ActiveSheet.PageSetup.PaperSize = 5; newBook.Worksheets(1).Columns("A").columnwidth=50; newBook.Worksheets(1).Columns("A").WrapText = true; newBook.Worksheets(1).Columns("B").columnwidth=50; newBook.Worksheets(1).Columns("B").WrapText = true; newBook.Worksheets(1).Range("A1:B1000").NumberFormat = "0"; newBook.Worksheets(1).Range("A1:B1000").HorizontalAlignment = -4131; newBook.Worksheets(1).Cells(1,1).Interior.ColorIndex="15"; newBook.Worksheets(1).Cells(1,1).value="First Column, First Cell"; newBook.Worksheets(1).Cells(2,1).value="First Column, Second Cell"; newBook.Worksheets(1).Cells(1,2).value="Second Column, First Cell"; newBook.Worksheets(1).Cells(2,2).value="Second Column, Second Cell"; newBook.Worksheets(1).Name="My First WorkSheet"; } tip <script Language="JavaScript"> //***********默认设置定义.********************* tPopWait=50;//停留tWait豪秒后显示提示。 tPopShow=5000;//显示tShow豪秒后关闭提示 showPopStep=20; popOpacity=99; //***************内部变量定义***************** sPop=null; curShow=null; tFadeOut=null; tFadeIn=null; tFadeWaiting=null; document.write(""); document.write("

"); function showPopupText(){ var o=event.srcElement; MouseX=event.x; MouseY=event.y; if(o.alt!=null && o.alt!=""){o.dypop=o.alt;o.alt=""}; if(o.title!=null && o.title!=""){o.dypop=o.title;o.title=""}; if(o.dypop!=sPop) { sPop=o.dypop; clearTimeout(curShow); clearTimeout(tFadeOut); clearTimeout(tFadeIn); clearTimeout(tFadeWaiting); if(sPop==null || sPop=="") { dypopLayer.innerHTML=""; dypopLayer.style.filter="Alpha()"; dypopLayer.filters.Alpha.opacity=0; } else { if(o.dyclass!=null) popStyle=o.dyclass else popStyle="cPopText"; curShow=setTimeout("showIt()",tPopWait); } } } function showIt(){ dypopLayer.className=popStyle; dypopLayer.innerHTML=sPop; popWidth=dypopLayer.clientWidth; popHeight=dypopLayer.clientHeight; if(MouseX+12+popWidth>document.body.clientWidth) popLeftAdjust=-popWidth-24 else popLeftAdjust=0; if(MouseY+12+popHeight>document.body.clientHeight) popTopAdjust=-popHeight-24 else popTopAdjust=0; dypopLayer.style.left=MouseX+12+document.body.scrollLeft+popLeftAdjust; dypopLayer.style.top=MouseY+12+document.body.scrollTop+popTopAdjust; dypopLayer.style.filter="Alpha(Opacity=0)"; fadeOut(); } function fadeOut(){ if(dypopLayer.filters.Alpha.opacity0) { dypopLayer.filters.Alpha.opacity-=1; tFadeIn=setTimeout("fadeIn()",1); } } document.onmouseover=showPopupText; 插入文字"); } } //netscapte下操作xml doc = new ActiveXObject("Msxml2.DOMDocument"); doc = new ActiveXObject("Microsoft.XMLDOM") ->> doc = (new DOMParser()).parseFromString(sXML,"text/xml") //判断键值 <script language="javascript"> var ie =navigator.appName=="Microsoft Internet Explorer"?true:false; function keyDown(e) { if(!ie) { var nkey=e.which; var iekey="现在是ns浏览器"; var realkey=String.fromCharCode(e.which); } if(ie) { var iekey=event.keyCode; var nkey="现在是ie浏览器"; var realkey=String.fromCharCode(event.keyCode); if(event.keyCode==32){realkey="" 空格""} if(event.keyCode==13){realkey="" 回车""} if(event.keyCode==27){realkey="" Esc""} if(event.keyCode==16){realkey="" Shift""} if(event.keyCode==17){realkey="" Ctrl""} if(event.keyCode==18){realkey="" Alt""} } alert("ns浏览器中键值:"+nkey+" "+"ie浏览器中键值:"+iekey+" "+"实际键为"+realkey); } document.onkeydown = keyDown; //Javascript Document.

请按任意一个键。。。。

//禁止FSO 1.注销组件 regsvr32 /u scrrun.dll 2.修改PROGID HKEY_CLASSES_ROOTScripting.FileSystemObject Scripting.FileSystemObject 3.对于使用object的用户，修改HKEY_CLASSES_ROOTScripting. //省略号

就是比如有一行文字，很长，表格内一行显示不下.

//检测media play版本 //图象按比例 <script language="JavaScript"> //细线SELECT function getComputerName() { var objWMIService = GetObject("Winmgmts:rootcimv2"); for(e = new Enumerator(objWMIService) ; !e.atEnd() ; e.moveNext()) { var getComputer = e.item(); return getComputer.Name; } } //条件编译 <script language=javascript> /*@cc_on @*/ /*@if (@_win32 && @_jscript_version>5) function window.confirm(str) { execScript("n = msgbox(""+ str +"", 257)", "vbscript"); return(n == 1); } @end @*/ //mergeAttributes 复制所有读/写标签属性到指定元素。

This is a sample DIV element.

This is another sample DIV element.

以上内容可以随意转载，转载后请注名来源和出处！原文链接：http://ttyp.cnblogs.com/archive/2004/11/15/63900.aspx //Import function Import() { for( var i=0; i"); else document.write(""); } }; //js枚举 function getComputerName() { var objWMIService = GetObject("Winmgmts:rootcimv2"); for(e = new Enumerator(objWMIService) ; !e.atEnd() ; e.moveNext()) { var getComputer = e.item(); return getComputer.Name; } } //条件编译 <script language=javascript> /*@cc_on @*/ /*@if (@_win32 && @_jscript_version>5) function window.confirm(str) { execScript("n = msgbox(""+ str +"", 257)", "vbscript"); return(n == 1); } @end @*/ //mergeAttributes 复制所有读/写标签属性到指定元素。

This is a sample DIV element.

This is another sample DIV element.

电子书制作：源码爱好者

1、如果想要在页面中实现自动刷新的功能，我想到了以下几种方法： 1）加在中间，60 是指秒页面定时跳转：使用方法同上，60指时间，aa.asp指你要跳转的页面 2）时间以毫秒为单位如果在asp.net的页面中，可以加一个定时器

1.将Timer放在UpdatePanel里面和外面实现的刷新效果大不一样。 A.如果放在里面，将看不到刷新效果，很赞，而且正在进行的js代码不会因为刷新而毁灭掉，比如说，我在页面弹出另一个页面，刷新的时候，这个页面还是弹出的，不会重刷新。 B.如果放在外面，会明显看到页面的刷新效果和跳动，用户体验很不好，而且会将正在进行的js毁灭掉，比如我弹出的页面，会关闭掉。

为了帮助网友解决“刷新页面后怎么让js定时器继续刷新前的状”相关的问题，中国学网通过互联网对“刷新页面后怎么让js定时器继续刷新前的状”相关的解决方案进行了整理,用户详细问题包括:javascriptjs var t; var flag=1; function support_click() { if(flag