黑马程序员-javascript学习之代码示例

最新推荐文章于 2023-08-01 21:45:43 发布

heima_libo

最新推荐文章于 2023-08-01 21:45:43 发布

阅读量595

点赞数

分类专栏：黑马日记文章标签： function button input windows phone float html

本文链接：https://blog.csdn.net/heima_libo/article/details/7054863

版权

黑马日记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

---------------------- Windows Phone 7手机开发、.Net培训、期待与您交流！ ----------------------

（1）走马灯效果

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>123456789</title>

    <script type="text/javascript">

        function scrollRight() {

            var title = document.title;

            var lastCh = title.charAt(title.length - 1);

            var leftStr = title.substring(0, title.length - 1);

            document.title = lastCh + leftStr;

        }

        function scrollLeft() {

            var title = document.title;

            var lastCh = title.charAt(0);

            var leftStr = title.substring(1, title.length);

            document.title = leftStr + lastCh;

        }

        var IntervalId;

        function left() {

            if (IntervalId) {

                clearInterval(IntervalId);

                IntervalId = setInterval('scrollLeft()', 500);

            }

            else {

                IntervalId = setInterval('scrollLeft()', 500);

            }

        }

        function right() {

            if (IntervalId) {

                clearInterval(IntervalId);

                IntervalId = setInterval('scrollRight()', 500);

            }

            else {

                clearInterval(IntervalId);

                IntervalId = setInterval('scrollRight()', 500);

            }

        }

        function stop() {

            clearInterval(IntervalId);

        }

    </script>

</head>

<body>

<input type="button" value="left" id="leftInverval" οnclick="left()" />

<input type="button" value="right" id="rightInverval" οnclick="right()" />

<input type="button" value="stop" id="stopInverval" οnclick="stop()" />

</body>

</html>

（2）全选、全部选、反选

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        function selAll() {
            var playlist = document.getElementById("playlist");
            var inputs = playlist.getElementsByTagName("input");
            for (var i = 0; i < inputs.length; i++) {
                var input = inputs[i];
                if (input.type == "checkbox") {
                    input.checked = "checked";
                }
            }
        }
        function deSelAll() {
            var playlist = document.getElementById("playlist");
            var inputs = playlist.getElementsByTagName("input");
            for (var i = 0; i < inputs.length; i++) {
                var input = inputs[i];
                if (input.type == "checkbox") {
                    input.checked = "";
                }
            }
        }
        function reverseSel() {
            var playlist = document.getElementById("playlist");
            var inputs = playlist.getElementsByTagName("input");
            for (var i = 0; i < inputs.length; i++) {
                var input = inputs[i];
                if (input.type == "checkbox") {
                    input.checked = !input.checked;
                }
            }
        }
    </script>
</head>
<body>
<div id="playlist">
    <input type="checkbox" id="p1" /><label for="p1">p1</label>
    <input type="checkbox" id="p2" /><label for="p2">p2</label>
    <input type="checkbox" id="p2" /><label for="p3">p2</label>
</div>
<input type="button" value="全选" οnclick="selAll()" />
<input type="button" value="全不选" οnclick="deSelAll()" />
<input type="button" value="反选" οnclick="reverseSel()" />
</body>
</html>

（3）权限选择项

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        function moveSelected(selSrc, selDest) {
            for (var i = selSrc.childNodes.length-1; i >= 0; i--) {
                var option = selSrc.childNodes[i];
                if (option.selected == true) {
                    selSrc.removeChild(option);
                    option.selected = false;
                    selDest.appendChild(option);
                }    
            }
        }
        function moveAll(selSrc, selDest) {
            for (var i = selSrc.childNodes.length - 1; i >= 0; i--) {
                var option = selSrc.childNodes[i];
                selSrc.removeChild(option);
                selDest.appendChild(option);
            }
        }        
    </script>
 </head>
 <body>
 <select style="float:left;width:15%;height:100px" id="select1" multiple="multiple">
 <option>添加</option>
 <option>修改</option>
 <option>删除</option>
 <option>打印</option>
 <option>查询</option>
 </select>

 <div style="float:left;width:15%">
    <input style="width:100%" type="button" value=">" οnclick="moveSelected(document.getElementById('select1'),document.getElementById('select2'))" />
    <input style="width:100%" type="button" value=">>" οnclick="moveAll(document.getElementById('select1'),document.getElementById('select2'))" />
    <input style="width:100%" type="button" value="<" οnclick="moveSelected(document.getElementById('select2'),document.getElementById('select1'))" />
    <input style="width:100%" type="button" value="<<" οnclick="moveAll(document.getElementById('select2'),document.getElementById('select1'))" />
 </div>

 <select style="float:left;width:15%;height:100px" id="select2" multiple="multiple"></select>
</body>
</html>

（4）时分秒

<html>
<head>
<script type="text/javascript">

    function initEvent(){
        var today = new Date();
        var h = today.getHours();
        var m = today.getMinutes();
        var s = today.getSeconds();
        document.getElementById("txt").innerHTML = h+":"+m+":"+s;
        //setTimeout("initEvent()", 1000);
    }
		document.onkeyup =  function myCtrl(e){
		if(e.keyValue == 17)document.write("ddd");
		
		//处理ctrl键的判断条件
		}
		setInterval("initEvent()", 1000);
		
	
</script>
</head>
<body οnlοad="initEvent()">
    <div id="txt"></div>
</body>
</html>

----------------------Windows Phone 7手机开发、.Net培训、期待与您交流！ ----------------------

详细请查看：http://net.itheima.com/

heima_libo

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
黑马程序员-javascript学习之代码示例

---------------------- Windows Phone 7手机开发、.Net培训、期待与您交流！ ----------------------（1）走马灯效果 123456789 function scrollRight() { var title = document.title;
复制链接

扫一扫