小时分钟选择器

来源：互联网发布：淘宝购物评价怎么删除编辑：程序博客网时间：2024/05/06 01:24

index.html--<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">    <head>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />        <title>Date Select</title>        <script language="javascript" src="jquery-2.1.3.min.js"></script>        <script language="javascript" src="jquery.timeSelect.js"></script>        <script language="javascript">            //调用部分            $.timeSelect("#date");        </script>    </head>    <body>        <input type="text" id="date" value="00 : 00" style="width: 50px; text-align: center;" /><br />    </body></html>

js
–

//插件部分$.timeSelect = function (ele) {        $(function () {                //工具函数                var fix = function (num, length) {                        return ('' + num).length < length ? ((new Array(length + 1)).join('0') + num).slice(-length) : '' + num;                    }                //控件定义                var win = $('<div style="width: 100%; height: 100%; opacity: 0; position: absolute; z-index: 10; left: 0px; top: 0px; display: none;"></div>');                var can = $('<div style="width: 105px; padding: 20px; opacity: 0.8; background-color: #aaa; border-radius: 10px; position: absolute; z-index: 11; display:none;"></div>');                var str = '<select>';                for (var i=0;i<24;++i)                    str += '<option value="' + i + '">' + fix(i, 2) + '</option>';                str += '</select>';                var hour = $(str);                str = '<select id="liuyulong" disabled>';                for (var i=0;i<60;++i)                    str += '<option value="' + i + '">' + fix(i, 2) + '</option>';                str += '</select>';                var minute = $(str);                var e = $(ele);                //事件定义                win.on("click", function (event) {                        win.hide();                        can.hide();                    });                can.on("click", function (event) {                        event.stopPropagation();                    });                hour.on("change", function (event) {                        event.stopPropagation();                        e.val(fix(hour.val(), 2) + " : " + fix(minute.val(), 2));                    });                minute.on("change", function (event) {                        event.stopPropagation();                        e.val(fix(hour.val(), 2) + " : " + fix(minute.val(), 2));                    });                e.on("click", function () {                        can.css({                                left : e.offset().left + "px",                                top : (e.offset().top + 20) + "px"                            });                        win.show();                        can.show();                    });                //控件绑定                $(document.body).append(win)                                .append(can.append(hour)                                            .append($("<font>&nbsp;:&nbsp;</font>"))                                            .append(minute));                //$("#liuyulong").attr("disabled", "disabled");            });    };

0 0