|
| 1 | +<!DOCTYPE html> |
| 2 | +<html lang="en"> |
| 3 | + |
| 4 | +<head> |
| 5 | + <meta charset="UTF-8"> |
| 6 | + <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"> |
| 7 | + <title>选择器</title> |
| 8 | +</head> |
| 9 | +<style> |
| 10 | + body { |
| 11 | + margin: 0; |
| 12 | + font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; |
| 13 | + background: #eee; |
| 14 | + } |
| 15 | +</style> |
| 16 | + |
| 17 | +<body style="font-size: 16px"> |
| 18 | + <div style="margin-top:10px;"> |
| 19 | + <span style="padding-right:10px;">年份</span> |
| 20 | + <input style="border:solid 1px red;" class="qu-year" type="text"> |
| 21 | + </div> |
| 22 | + <div style="margin-top:10px;"> |
| 23 | + <span style="padding-right:10px;">身高</span> |
| 24 | + <input style="border:solid 1px red;" class="qu-height" type="text"> |
| 25 | + </div> |
| 26 | + <div style="margin-top:10px;"> |
| 27 | + <span style="padding-right:10px;">体重</span> |
| 28 | + <input style="border:solid 1px red;" class="qu-weight" type="text"> |
| 29 | + </div> |
| 30 | + <div style="margin-top:10px;"> |
| 31 | + <span style="padding-right:10px;">睡眠</span> |
| 32 | + <input style="border:solid 1px red;" class="qu-time" type="text"> |
| 33 | + </div> |
| 34 | + <div style="margin-top:10px;"> |
| 35 | + <span style="padding-right:10px;">年月日</span> |
| 36 | + <input style="border:solid 1px red;margin-top:10px" class="sp-time" type="text"> |
| 37 | + </div> |
| 38 | + <div style="margin-top:10px;"> |
| 39 | + <span style="padding-right:10px;">年月日+时间</span> |
| 40 | + <input style="border:solid 1px red;margin-top:10px" class="sp-date" type="text"> |
| 41 | + </div> |
| 42 | + <script src="js/jq.js"></script> |
| 43 | + <script src="js/jquery.selector-px.js"></script> |
| 44 | + <script> |
| 45 | + $(function () { |
| 46 | + // ---------【数据部分开始】--------- |
| 47 | + // 出生年份计算，当前年份-(当前年份-100) |
| 48 | + var nowYear = new Date().getFullYear(); |
| 49 | + var gYear = []; |
| 50 | + for (var i = 0; i < 100; i++) { |
| 51 | + gYear.push(Number(nowYear) - i); |
| 52 | + }; |
| 53 | + // 身高范围，50-220 |
| 54 | + var quHeight = [50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99, 100, 101, 102, 103, 104, 105, 106, 107, 108, 109, 110, 111, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 122, 123, 124, 125, 126, 127, 128, 129, 130, 131, 132, 133, 134, 135, 136, 137, 138, 139, 140, 141, 142, 143, 144, 145, 146, 147, 148, 149, 150, 151, 152, 153, 154, 155, 156, 157, 158, 159, 160, 161, 162, 163, 164, 165, 166, 167, 168, 169, 170, 171, 172, 173, 174, 175, 176, 177, 178, 179, 180, 181, 182, 183, 184, 185, 186, 187, 188, 189, 190, 191, 192, 193, 194, 195, 196, 197, 198, 199, 200, 201, 202, 203, 204, 205, 206, 207, 208, 209, 210, 211, 212, 213, 214, 215, 216, 217, 218, 219, 220]; |
| 55 | + // 体重范围，20-220(整数)，0-9(小数) |
| 56 | + // 整数 |
| 57 | + var quWeightInt = [20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99, 100, 101, 102, 103, 104, 105, 106, 107, 108, 109, 110, 111, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 122, 123, 124, 125, 126, 127, 128, 129, 130, 131, 132, 133, 134, 135, 136, 137, 138, 139, 140, 141, 142, 143, 144, 145, 146, 147, 148, 149, 150, 151, 152, 153, 154, 155, 156, 157, 158, 159, 160, 161, 162, 163, 164, 165, 166, 167, 168, 169, 170, 171, 172, 173, 174, 175, 176, 177, 178, 179, 180, 181, 182, 183, 184, 185, 186, 187, 188, 189, 190, 191, 192, 193, 194, 195, 196, 197, 198, 199, 200, 201, 202, 203, 204, 205, 206, 207, 208, 209, 210, 211, 212, 213, 214, 215, 216, 217, 218, 219, 220]; |
| 58 | + // 小数 |
| 59 | + var quWeightFl = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; |
| 60 | + // 时长数据 |
| 61 | + // 小时 |
| 62 | + var spoHour = ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23"]; |
| 63 | + // 分钟 |
| 64 | + var spoMinute = ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48", "49", "50", "51", "52", "53", "54", "55", "56", "57", "58", "59"]; |
| 65 | + // ---------【数据部分结束】--------- |
| 66 | + // 年份 |
| 67 | + $.scrEvent({ |
| 68 | + data: gYear, |
| 69 | + evEle: '.qu-year', |
| 70 | + title: '出生年份', |
| 71 | + defValue: 1980, |
| 72 | + afterAction: function (data) { |
| 73 | + |
| 74 | + $(".qu-year").val(data); |
| 75 | + } |
| 76 | + }); |
| 77 | + |
| 78 | + // 身高 |
| 79 | + $.scrEvent({ |
| 80 | + data: quHeight, |
| 81 | + evEle: '.qu-height', |
| 82 | + title: '身高/cm', |
| 83 | + defValue: 170, |
| 84 | + afterAction: function (data) { |
| 85 | + |
| 86 | + $('.qu-height').val(data); |
| 87 | + } |
| 88 | + }); |
| 89 | + |
| 90 | + //体重 |
| 91 | + $.scrEvent2({ |
| 92 | + data: quWeightInt, |
| 93 | + data2: quWeightFl, |
| 94 | + evEle: '.qu-weight', |
| 95 | + title: '体重/kg', |
| 96 | + defValue: 60, |
| 97 | + defValue2: 0, |
| 98 | + linkType: '.', |
| 99 | + afterAction: function (data1, data2) { |
| 100 | + |
| 101 | + $('.qu-weight').val(data1 + '.' + data2); |
| 102 | + } |
| 103 | + }) |
| 104 | + |
| 105 | + |
| 106 | + //睡眠 |
| 107 | + $.scrEvent2({ |
| 108 | + data: spoHour, |
| 109 | + data2: spoMinute, |
| 110 | + evEle: '.qu-time', |
| 111 | + title: '睡眠时长', |
| 112 | + defValue: 6, |
| 113 | + defValue2: 0, |
| 114 | + eleName: '小时', |
| 115 | + eleName2: '分钟', |
| 116 | + afterAction: function (data1, data2) { |
| 117 | + $('.qu-time').val(data1 + '小时' + data2 + '分钟'); |
| 118 | + } |
| 119 | + }) |
| 120 | + |
| 121 | + // 年月日 时分 |
| 122 | + $.dateSelector({ |
| 123 | + evEle: '.sp-date', |
| 124 | + year: 1990, |
| 125 | + month: 12, |
| 126 | + day: 08, |
| 127 | + startYear: '1990', |
| 128 | + endYear: '2017', |
| 129 | + timeBoo: true, |
| 130 | + afterAction: function (d1, d2, d3, d4, d5) { |
| 131 | + $('.sp-date').val(d1 + '-' + d2 + '-' + d3 + ' ' + d4 + ':' + d5); |
| 132 | + } |
| 133 | + }); |
| 134 | + |
| 135 | + // 年月日 |
| 136 | + $.dateSelector({ |
| 137 | + evEle: '.sp-time', |
| 138 | + startYear: '2017', |
| 139 | + endYear: '2022', |
| 140 | + timeBoo: false, |
| 141 | + afterAction: function (d1, d2, d3) { |
| 142 | + $('.sp-time').val(d1 + '-' + d2 + '-' + d3); |
| 143 | + } |
| 144 | + }); |
| 145 | +}); |
| 146 | + </script> |
| 147 | +</body> |
| 148 | + |
| 149 | +</html> |
0 commit comments