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

时间:2022-06-18 03:40:45

js简单显示和隐藏div

.<!DOCTYPE html>
.<html>
.<head>
.<meta charset="UTF-8">
.<title>Insert title here</title>
.<script type="text/javascript">
.    window.onload=function(){
.        document.getElementById("hi1").onclick = function(){
.            document.getElementById("d").style.display='block';
.        };
.        document.getElementById("hi2").onclick = function(){
.            document.getElementById("d").style.display='none';
.        };
.    }
.</script>
.<style type="text/css">
.    #d{
.        display: none;
.        color: red;
.    }
.</style>
.</head>
.<body>
.        显示<input id="hi1" type="radio" name="hi"/>隐藏<input id="hi2" type="radio" name="hi"/>
.        <div id="d">这是要显示和隐藏的数据</div>
.</body>
.</html>

js触发超链接

.<!DOCTYPE html>
.<html>
.<head>
.<meta charset="UTF-8">
.<title>Insert title here</title>
.</head>
.<body>
.<input type="button" id="button" value="控制超链接" onclick="fun()"/>
.<a href="myjs.html" id="aa">跳转到</a>
.</body>
.<script type="text/javascript">
.    function fun(){
.        var link = document.getElementById("aa").href;
.        window.location.href = link;
.    }
.</script>
.</html>  

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

.<!DOCTYPE html>
.<html>
.<head>
.<meta charset="UTF-8">
.<title>Insert title here</title>
.<style type="text/css">
.    #hi{
.        display: none;
.    }
.</style>
.<script type="text/javascript">
.    window.onload=function(){
.        ;
.        document.getElementById("bu").onclick=function(){
.            ==){
.                document.getElementById("bu").value="Click to hidden answer";
.                document.getElementById("hi").style.display = 'block';
.            }else{
.                document.getElementById("bu").value="Click to see the answer";
.                document.getElementById("hi").style.display = 'none';
.            }
.            i++;
.        };
.    };
.</script>
.</head>
.<body>
.<input type="button" id="bu" value="Click to see the answer"/>
.<div id="hi">
.    This is the answer.
.</div>
.</body>
.</html> 

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

. <html>
. <head>
. <script>
. );//第二个参数以毫秒为单位
.    function changeTime(){
.    var d = new Date();
.        document.getElementById()+"月"+d.getDate()+"日  "+d.getHours()+"时"+d.getMinutes()+"分"+d.getSeconds()+"秒";
.    }
.
. </script>
. </head>
. <body>
.<input type="/>
.</body>
.</html>

jQuery easyui弹出框

.<!DOCTYPE html>
.<html>
.<head>
.    <meta charset="utf-8">
.    <title>ComboBox Actions - jQuery EasyUI Demo</title>
.    <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
.    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
.    <link rel="stylesheet" type="text/css" href="../demo.css">
.    <script type="text/javascript" src="../../jquery.min.js"></script>
.    <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
.</head>
.<body>
.    <h2>ComboBox</h2>
.    <p>Click the buttons below to perform actions.</p>
.
.    <div style="margin:20px 0;">
.        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="setvalue()">SetValue</a>
.        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="alert($('#state').combobox('getValue'))">GetValue</a>
.        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#state').combobox('disable')">Disable</a>
.        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#state').combobox('enable')">Enable</a>
.    </div>
.    <script type="text/javascript">
.    var i ;
.        function setvalue(){
.        /*
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.            */
.            $.messager.prompt("输入框","请输入一个数字",function(data){
.                $.messager.alert("输入提示框","您输入的数字是:"+data,'info');
.            });
.        }
.    </script>
.
.</body>
.</html>  

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