js简单显示和隐藏div，触发超链接，动态更改button值，setInterval（）简单使用，jquery easyui弹出框简单使用 .

浏览数：40 / 时间：2015年06月09日

js简单显示和隐藏div

01.<!DOCTYPE html>  
02.<html>  
03.<head>  
04.<meta charset="UTF-8">  
05.<title>Insert title here</title>  
06.<script type="text/javascript">  
07.    window.onload=function(){  
08.        document.getElementById("hi1").onclick = function(){  
09.            document.getElementById("d").style.display=‘block‘;  
10.        };  
11.        document.getElementById("hi2").onclick = function(){  
12.            document.getElementById("d").style.display=‘none‘;  
13.        };  
14.    }  
15.</script>  
16.<style type="text/css">  
17.    #d{  
18.        display: none;  
19.        color: red;  
20.    }  
21.</style>  
22.</head>  
23.<body>  
24.        显示<input id="hi1" type="radio" name="hi"/>隐藏<input id="hi2" type="radio" name="hi"/>  
25.        <div id="d">这是要显示和隐藏的数据</div>  
26.</body>  
27.</html>

js触发超链接

01.<!DOCTYPE html>  
02.<html>  
03.<head>  
04.<meta charset="UTF-8">  
05.<title>Insert title here</title>  
06.</head>  
07.<body>  
08.<input type="button" id="button" value="控制超链接" onclick="fun()"/>  
09.<a href="myjs.html" id="aa">跳转到</a>  
10.</body>  
11.<script type="text/javascript">  
12.    function fun(){  
13.        var link = document.getElementById("aa").href;  
14.        window.location.href = link;  
15.    }  
16.</script>  
17.</html>

隐藏显示div，动态更改button值

01.<!DOCTYPE html>  
02.<html>  
03.<head>  
04.<meta charset="UTF-8">  
05.<title>Insert title here</title>  
06.<style type="text/css">  
07.    #hi{  
08.        display: none;  
09.    }  
10.</style>  
11.<script type="text/javascript">  
12.    window.onload=function(){  
13.        var i=0;  
14.        document.getElementById("bu").onclick=function(){  
15.            if(i%2==0){  
16.                document.getElementById("bu").value="Click to hidden answer";  
17.                document.getElementById("hi").style.display = ‘block‘;  
18.            }else{  
19.                document.getElementById("bu").value="Click to see the answer";  
20.                document.getElementById("hi").style.display = ‘none‘;  
21.            }  
22.            i++;  
23.        };  
24.    };  
25.</script>  
26.</head>  
27.<body>  
28.<input type="button" id="bu" value="Click to see the answer"/>  
29.<div id="hi">  
30.    This is the answer.  
31.</div>  
32.</body>  
33.</html>

setInterval()使用，（如果没有效果，可以在第一个参数后面加上;试试，如setInterval("changeTime();",50)）

01. <html>   
02. <head>  
03. <script>  
04. var ret = window.setInterval("changeTime()",50);//第二个参数以毫秒为单位  
05.    function changeTime(){  
06.    var d = new Date();  
07.        document.getElementById("changeTime").value=d.getFullYear()+"年"+(d.getMonth()+1)+"月"+d.getDate()+"日  "+d.getHours()+"时"+d.getMinutes()+"分"+d.getSeconds()+"秒";  
08.    }  
09.      
10. </script>  
11. </head>  
12. <body>   
13.<input type="text" id="changeTime" size="30"/>  
14.</body>   
15.</html>

jQuery easyui弹出框

01.<!DOCTYPE html>  
02.<html>  
03.<head>  
04.    <meta charset="utf-8">  
05.    <title>ComboBox Actions - jQuery EasyUI Demo</title>  
06.    <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">  
07.    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">  
08.    <link rel="stylesheet" type="text/css" href="../demo.css">  
09.    <script type="text/javascript" src="../../jquery.min.js"></script>  
10.    <script type="text/javascript" src="../../jquery.easyui.min.js"></script>  
11.</head>  
12.<body>  
13.    <h2>ComboBox</h2>  
14.    <p>Click the buttons below to perform actions.</p>  
15.      
16.    <div style="margin:20px 0;">  
17.        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="setvalue()">SetValue</a>  
18.        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="alert($(‘#state‘).combobox(‘getValue‘))">GetValue</a>  
19.        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$(‘#state‘).combobox(‘disable‘)">Disable</a>  
20.        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$(‘#state‘).combobox(‘enable‘)">Enable</a>  
21.    </div>  
22.    <script type="text/javascript">  
23.    var i ;  
24.        function setvalue(){  
25.        /*  
26.            $.messager.prompt(‘SetValue‘,‘Please input the value(CO,NV,UT,etc):‘,function(v){  
27.                if (v){  
28.                     $.messager.show(  
29.                       {  
30.                        title: "电脑监测",                        
31.                        msg: "CPU温度过高，请浇凉水",  
32.                        showType: ‘fade‘,  
33.                        timeout: 5000  
34.                      }  
35.                    );  
36.                }  
37.            });  
38.              
39.            $.messager.alert(  
40.            ‘这是一个警告框‘,‘cpu温度过高‘,‘warning‘,function(){  
41.            }  
42.            );  
43.              
44.            $.messager.confirm("删除确认","确定要删除吗？",function(data){  
45.                i=data;  
46.                alert(i);  
47.            });  
48.            */  
49.            $.messager.prompt("输入框","请输入一个数字",function(data){  
50.                $.messager.alert("输入提示框","您输入的数字是："+data,‘info‘);  
51.            });  
52.        }  
53.    </script>  
54.      
55.</body>  
56.</html>

如果出现乱码，首先查看页面中是否设置了编码，如果页面中设置了编码uft-8，则可以用记事本打开文件，另存为，查看文件的编码是否和页面编码相同，即是否为utf-8，如果不是，则可以选择utf--8进行保存。乱码即可解决，如果还未解决，则可先以utf-8格式建立一个html文件，然后将出现乱码并且页面编码为utf-8的html内容拷贝进来，则乱码可被解决。

 

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： class style log com 使用 src si java html class style log com 使用 src si java html

相关文章

随机文章

您可能还喜欢

您可能还喜欢