小时分钟选择器

最新推荐文章于 2024-06-04 15:45:21 发布

刘尔泽

最新推荐文章于 2024-06-04 15:45:21 发布

阅读量1.3k

点赞数 1

分类专栏：灰色空间

本文链接：https://blog.csdn.net/u011407724/article/details/48310549

版权

灰色空间专栏收录该内容

10 篇文章 0 订阅

订阅专栏

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");
            });
    };

刘尔泽

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
小时分钟选择器

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> <m
复制链接

扫一扫