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