css代码: style.css
/* * Licensed to the Apache Software Foundation (ASF) under one or more * contributor license agreements. See the NOTICE file distributed with * this work for additional information regarding copyright ownership. * The ASF licenses this file to You under the Apache License, Version 2.0 * (the "License"); you may not use this file except in compliance with * the License. You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ body { background-color: white; color: black; font-family: 'Tahoma', 'Lucida Sans', 'Arial', 'Helvetica', 'Sans-serif', 'sans'; font-size: 9pt; line-height: 1.8em; margin-left: auto; margin-right: auto; width: 650px; } h1,h2,h3,h4,h5,h6,h7,h8 { color: #E9601A; font-weight: normal; } h1,h2 { letter-spacing: -1px; font-family: 'Trebuchet MS'; } #extitle { font-size: 12pt; font-weight: bold; color: #E9601A; padding: 10px 10px 10px 10px; } .mark { background-color: yellow; margin: 5px; } .feedbackPanelERROR { color: red; list-style: circle; font-weight: bold; } .feedbackPanelINFO { color: green; list-style: circle; font-weight: bold; } .nospam { display : none; } .block { padding: 10px; } .blockWithBorder { border-width: thin; border-style: dotted; border-color: #E9601A; } #hellomessage { font-size: 30pt; } #titleblock { color: white; font-weight: bold; border-width: thin; padding: 17px 2px 2px 6px; } #titleblock a { color: #000; } h2 { font-size: 1.25em; } h3 { font-size: 1em; } a { color: #E9601A; font-weight: bold; text-decoration: none; } a:hover { text-decoration: underline; } img { border: none; } pre { font-family: 'Lucida Sans', 'Helvetica', 'Sans serif', 'sans'; } th { background: #C3C3C3; color: white; font-weight: bold; } tr.b { background: #F5F5F5; } tr.a { background: #E6E6E5; } tr.none { background: transparent; } a.none { background: transparent; padding-right: 0px; } .inputForm label { display: block; margin-top: 5px; } #numberRadioChoice label { display: inline !important; } .inputForm label.non { display: inline !important; } .inputFormTable td { vertical-align: top; padding: 10px; } #nestedExampleTree { width: 300px; } #feedbackPanel { width: 600px; } #siteSelection { width: 200px; } div.tabRowContent { border-color: #DDDDDD; border-style: solid; border-width: 1px; margin: 4px; padding: 4px; } table.dataview { margin-bottom: 10px; border-bottom: 1px solid #0079d6; font-size: 1em; font-family: arial; } table.dataview caption { text-align: left; } table.dataview tr { padding-top: 2px; padding-bottom: 2px; } table.dataview tr.even { background-color: #ffebcd; } table.dataview tr.odd { background-color: #fff; } table.dataview tr td { padding-left: 8px; padding-right: 30px; } table.dataview tr th { color: black; padding-top: 3px; padding-bottom: 3px; padding-left: 8px; padding-right: 30px; background-color: #c1e4ff; border-bottom: 1px solid #0079d6; border-top: 1px solid #0079d6; text-align: left; white-space: nowrap; vertical-align: middle;} table.dataview tr th { background-position: right; background-repeat:no-repeat; } table.dataview tr th.wicket_orderDown { background-color: #87cbff; background-image: url(displaytag/img/arrow_down.png); } table.dataview tr th.wicket_orderUp { background-color: #87cbff; background-image: url(displaytag/img/arrow_up.png); } table.dataview tr th.wicket_orderNone { background-image: url(displaytag/img/arrow_off.png); } table.dataview tr th a { font-weight: normal; } table.dataview #message { padding-left: 3px; } table.dataview caption { padding-bottom: 2px; } /* TAB PANEL STYLES */ div.tabpanel div.tab-row{ float:left; width:100%; background:#DAE0D2 url("tabs/bg.gif") repeat-x bottom; line-height:normal; } div.tabpanel div.tab-row ul { margin:0; padding:10px 10px 0; list-style:none; } div.tabpanel div.tab-row li { float:left; background:url("tabs/left.gif") no-repeat left top; margin:0; padding:0 0 0 9px; } div.tabpanel div.tab-row a { display:block; background:url("tabs/right.gif") no-repeat right top; padding:5px 15px 4px 6px; text-decoration:none; font-weight:bold; white-space:nowrap; color:#eee; } div.tab-panel { clear: left; } div.tabpanel div.tab-row a:hover { color:#fff; } div.tabpanel div.tab-row li.selected { background-image:url("tabs/left_on.gif"); } div.tabpanel div.tab-row li.selected a { background-image:url("tabs/right_on.gif"); color:#333; padding-bottom:5px; } /* VARIATION 1 TAB PANEL STYLES */ div.tabpanel1 div.tab-row{ float:left; width:100%; background:#DAE0D2 url("tabs1/bg.gif") repeat-x bottom; line-height:normal; } div.tabpanel1 div.tab-row ul { margin:0; padding:10px 10px 0; list-style:none; } div.tabpanel1 div.tab-row li { float:left; background:url("tabs1/left.gif") no-repeat left top; margin:0; padding:0 0 0 9px; } div.tabpanel1 div.tab-row a { display:block; background:url("tabs1/right.gif") no-repeat right top; padding:5px 15px 4px 6px; text-decoration:none; font-weight:bold; color:#765; white-space:nowrap; } div.tabpanel1 div.tab-row a:hover { color:#333; } div.tabpanel1 div.tab-row li.selected { background-image:url("tabs1/left_on.gif"); } div.tabpanel1 div.tab-row li.selected a { background-image:url("tabs1/right_on.gif"); color:#333; padding-bottom:5px; } /* TABBED PANEL VARIATION 2 */ div.tabpanel2 div.tab-row { float:left; width:100%; background:#369 url("tabs2/bg.gif") repeat-x bottom; font-size:85%; line-height:normal; } div.tabpanel2 div.tab-row ul { margin:0; padding:10px 10px 0; list-style:none; } div.tabpanel2 div.tab-row li { float:left; background:url("tabs2/right.gif") no-repeat right top; margin:0; padding:0 5px 0 0; } div.tabpanel2 div.tab-row a { float:left; display:block; background:url("tabs2/left.gif") no-repeat left top; padding:5px 7px 4px 20px; text-decoration:none; font-weight:bold; color:#9cf; white-space:nowrap; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ div.tabpanel2 div.tab-row a {float:none;} /* End IE5-Mac hack */ div.tabpanel2 div.tab-row a:hover { color:#fff; } div.tabpanel2 div.tab-row li.selected { background-image:url("tabs2/right_on.gif"); } div.tabpanel2 div.tab-row li.selected a { background-image:url("tabs2/left_on.gif"); color:#333; padding-bottom:5px; } /* TABBED PANEL VARIATION 3 */ div.tabpanel3 div.tab-row { float:left; width:100%; background:#eee url("tabs3/bg.jpg") repeat-x top; line-height:normal; } div.tabpanel3 div.tab-row ul { margin:0; padding:10px 10px 0; list-style:none; } div.tabpanel3 div.tab-row li { float:left; background:url("tabs3/left.gif") no-repeat left top; margin:0; padding:0 0 0 28px; } div.tabpanel3 div.tab-row a { float:left; display:block; background:url("tabs3/right.gif") no-repeat right top; padding:9px 28px 4px 0px; text-decoration:none; font-weight:bold; color:#92A2AC; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ div.tabpanel3 div.tab-row a {float:none;} /* End IE5-Mac hack */ div.tabpanel3 div.tab-row a:hover { color:#A56060; } div.tabpanel3 div.tab-row li.selected { background-image:url("tabs3/left_on.gif"); } div.tabpanel3 div.tab-row li.selected a { background-image:url("tabs3/right_on.gif"); color:#A56060; } div.tabpanel4 div.tab-row ul { height: 20px; margin: 0; padding-left: 10px; background: url( tabs4/tab_bottom.gif ) repeat-x bottom; } div.tabpanel4 div.tab-row li { margin: 0; padding: 0; display: inline; list-style-type: none; } div.tabpanel4 div.tab-row a:link, div.tabpanel4 div.tab-row a:visited { float: left; background: #f3f3f3; font-size: 12px; line-height: 14px; font-weight: bold; padding: 2px 10px 2px 10px; margin-right: 4px; border: 1px solid #ccc; text-decoration: none; color: #666; } div.tabpanel4 div.tab-row li.selected a:link, div.tabpanel4 div.tab-row a:visited.active { border-bottom: 1px solid #fff; background: #fff; color: #000; } div.tabpanel4 div.tab-row a:hover { background: #fff; } /* PROGRESS BAR */ div.wupb-uploadStatus { margin: 5px; color: #aaa; } div.wupb-progressBar { margin: 5px; } div.wupb-progressBar .wupb-border { background: url( progress-remainder.gif ) repeat-x; background-color: #eee; border-left: 1px solid grey; border-right: 1px solid grey; width: 100%; } div.wupb-progressBar .wupb-background { background: url( progress-bar.gif ) repeat-x; background-color: #507090; height: 18px; width: 0%; } /* END PROGRESS BAR */ table.grid { margin-bottom: 10px; border-bottom: 1px solid #0079d6; font-size: 1em; font-family: arial; width: 100%; } table.grid tr { padding-top: 2px; padding-bottom: 2px; } table.grid tr.odd { background-color: #ffebcd; } table.grid tr.even { background-color: #fff; } table.grid tr td { padding-left: 8px; padding-right: 30px; } /* NAVIGATION */ table.grid tr.navigation { text-align: left; font-size: 0.8em;} table.grid tr.navigation td { padding-right: 0px;} /* HEADERS */ table.grid tr th { font-weight: normal; padding-top: 3px; padding-bottom: 3px; padding-left: 8px; padding-right: 24px; background-color: #c1e4ff; border-bottom: 1px solid #0079d6; border-top: 1px solid #0079d6; text-align: left; white-space: nowrap; vertical-align: middle;} table.grid tr th a { padding-right: 15px; background-position: right; background-repeat:no-repeat; } table.grid tr th.wicket_orderDown a { color:black; background-image: url(images/arrow_down.png); } table.grid tr th.wicket_orderUp a { color: black; background-image: url(images/arrow_up.png); } table.grid tr th.wicket_orderNone a { background-image: url(images/arrow_off.png); } table.grid tr th a { font-weight: normal; } /* FILTERS */ table.grid td.filter-td { font-size: 1em; background-color: #c1e4ff; border-bottom: 1px solid #0079d6; } table.grid td.filter-td input.go { width: 45%; } table.grid td.filter-td input.clear { width: 45%; } table.grid td.filter-td input { width: 100%; font-size: 0.6em; } table.grid td.filter-td select { width: 100%; font-size: 0.6em; } tr.section td { padding-top: 0.75em; }
html:代码: cronmaker.html<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="keywords" content="Cron by NilsZhang" /> <title>CronMaker</title> <link rel="stylesheet" type="text/css" href="style.css" /> <script> function test() { alert("123"); } function getExp() { var mycron = "-1"; var nowdisplay = document.getElementById("nowdisplay").value; if(nowdisplay == "Minutes") { var txtMinutes = document.getElementById("txtMinutes").value; var hourPart = document.getElementById("hourPart").value; var minutePart = document.getElementById("minutePart").value; var mycron = "0 "+minutePart+"/"+txtMinutes+" "+hourPart+"/1 * * ?"; } else if(nowdisplay == "Hourly") { var txtHourly = document.getElementById("txtHourly").value; var hourPart = document.getElementById("hourPart").value; var minutePart = document.getElementById("minutePart").value; var mycron = "0 "+minutePart+" "+hourPart+"/"+txtHourly+" * * ?"; } else if(nowdisplay == "Daily") { var txtDaily = document.getElementById("txtDaily").value; var hourPart = document.getElementById("hourPart").value; var minutePart = document.getElementById("minutePart").value; var mycron = "0 "+minutePart+" "+hourPart+" 1/"+txtDaily+" * ?"; } else if(nowdisplay == "Weekly") { var week = ""; var huang = document.all['txtWeekly']; for(i = 0;i < huang.length;i++){ if(huang[i].checked == true) { week = week+huang[i].value+","; } } if(week.length==0) { alert(" 必须选择日期!"); return; } week = week.substring(0,week.length-1); var hourPart = document.getElementById("hourPart").value; var minutePart = document.getElementById("minutePart").value; var mycron = "0 "+minutePart+" "+hourPart+" ? * "+week+" * "; } else if(nowdisplay == "Monthly") { var ChoiceMonth=document.getElementById("ChoiceMonth").value; var ChoiceDay=document.getElementById("ChoiceDay").value; var hourPart = document.getElementById("hourPart").value; var minutePart = document.getElementById("minutePart").value; var mycron = "0 "+minutePart+" "+hourPart+" "+ChoiceDay+" 1/"+ChoiceMonth+" ? * "; } if(mycron != "-1") { document.getElementById("mycron").value =mycron ; } } function ret() { var mycron= document.getElementById("mycron").value; var isSure = confirm('确认将表达式: \"'+mycron+"\" 返回给父窗口?"); if(isSure) { alert("success"); } } function checkFirstRun() { var testCheck = document.getElementById("firstRun").checked; if(testCheck) { document.getElementById("firstRunTable").disabled = false; } else { document.getElementById("firstRunTable").disabled = "disabled"; } } function display(nowdisplay) { // document.getElementById("Minutes").style.display = "none"; // document.getElementById("Hourly").style.display = "none"; // document.getElementById("Daily").style.display = "none"; // document.getElementById("Weekly").style.display = "none"; // document.getElementById("Monthly").style.display = "none"; // document.getElementById("Yearly").style.display = "none"; var cronThis = document.getElementById("nowdisplay").value; if(nowdisplay!=cronThis) { document.getElementById(cronThis).style.display = "none"; //将老Tab置灰 //document.getElementById(cronThis+"Tab").className = document.getElementById(nowdisplay+"Tab").className.substring(0,document.getElementById(nowdisplay+"Tab").className.length-10); //将新Tab亮起 //document.getElementById(nowdisplay+"Tab").className = document.getElementById(nowdisplay+"Tab").className +" selected "; document.getElementById(nowdisplay).style.display = "block"; document.getElementById("nowdisplay").value = nowdisplay; } } </script> </head> <body> <table width="100%"> <tr> <td> <fieldset style="padding: 5px"><legend>生成CRON表达式</legend> <input type="hidden" id="nowdisplay" value="Daily"> <table style="width: 100%" cellpadding="0" cellspacing="0"> <tr> <td height="125" valign="top"> <div class="tabpanel4" style="width: 450px" id="id3"> <div class="tab-row"> <ul> <li id ="MinutesTab" class="tab0"> <a href="#" onClick="display('Minutes')" id="id16" > <span>按分钟</span> </a> </li> <li id ="HourlyTab" class="tab1"> <a href="#" onClick="display('Hourly')" id="id17"> <span>按小时</span></a> </li> <li id ="DailyTab" class="tab2"><a href="#" onClick="display('Daily')" id="id18" ><span>按天</span></a> </li> <li id ="WeeklyTab" class="tab3"><a href="#" onClick="display('Weekly')" id="id19" ><span>按周</span></a> </li> <li id ="MonthlyTab" class="tab4"><a href="#" onClick="display('Monthly')" id="id1a" ><span>按月</span></a> </li> <!--<li id ="YearlyTab" class="tab5 last "><a href="#" onClick="display('Yearly')" id="id1b" ><span>Yearly</span></a> </li>--> </ul> </div> <div class="tab-panel" id="Daily"> <table> <tr> <td>每 <input type="text" style="width: 40px" value="1" name="txtDaily" id="txtDaily" /> 天</td> </tr> </table> </div> <div class="tab-panel" id="Yearly" style="display:none"> <table> <tr> <td><input type="radio" id="id6b" name="tabbedPanel:panel:radioGroup" value="radio93" checked="checked" class="wicket-id6a" /></td> <td>Every <select name="tabbedPanel:panel:radioGroup:firstChoiceMonth" id="id6c"> <option selected="selected" value="January">January</option> <option value="February">February</option> <option value="March">March</option> <option value="April">April</option> <option value="May">May</option> <option value="June">June</option> <option value="July">July</option> <option value="August">August</option> <option value="September">September</option> <option value="October">October</option> <option value="November">November</option> <option value="December">December</option> </select> <input type="text" class="dayEntry" value="1" name="tabbedPanel:panel:radioGroup:txtFirstChoiceDay" id="id6d" /></td> </tr> <tr> <td><input type="radio" id="id6e" name="tabbedPanel:panel:radioGroup" value="radio96" class="wicket-id6a" /></td> <td>The <select name="tabbedPanel:panel:radioGroup:secondChoiceRank" id="id6f"> <option selected="selected" value="First">First</option> <option value="Second">Second</option> <option value="Third">Third</option> <option value="Fourth">Fourth</option> </select><select name="tabbedPanel:panel:radioGroup:secondChoiceDay" id="id70"> <option selected="selected" value="Monday">Monday</option> <option value="Tuesday">Tuesday</option> <option value="Wednesday">Wednesday</option> <option value="Thursday">Thursday</option> <option value="Friday">Friday</option> <option value="Saturday">Saturday</option> <option value="Sunday">Sunday</option> </select> of<select name="tabbedPanel:panel:radioGroup:secondChoiceMonth" id="id71"> <option selected="selected" value="January">January</option> <option value="February">February</option> <option value="March">March</option> <option value="April">April</option> <option value="May">May</option> <option value="June">June</option> <option value="July">July</option> <option value="August">August</option> <option value="September">September</option> <option value="October">October</option> <option value="November">November</option> <option value="December">December</option> </select></td> </tr> </table> </div> <div class="tab-panel" id="Monthly" style="display:none"> <table> <tr> <td>每 <input type="text" style="width: 40px" value="1" name="ChoiceMonth" id="ChoiceMonth" /> 个月的第 <input type="text" style="width: 40px" value="1" name="ChoiceDay" id="ChoiceDay" /> 天</td> </tr> <!--<tr> <td><input type="radio" id="id5f" name="tabbedPanel:panel:radioGroup" value="radio84" class="wicket-id5b" /></td> <td>The <select name="tabbedPanel:panel:radioGroup:rank" id="id60"> <option selected="selected" value="0">First</option> <option value="1">Second</option> <option value="2">Third</option> <option value="3">Fourth</option> </select> <select name="tabbedPanel:panel:radioGroup:day" id="id61"> <option selected="selected" value="0">Monday</option> <option value="1">Tuesday</option> <option value="2">Wednesday</option> <option value="3">Thursday</option> <option value="4">Friday</option> <option value="5">Saturday</option> <option value="6">Sunday</option> </select>of every <input type="text" size="3" value="1" name="tabbedPanel:panel:radioGroup:monthCount" id="id62" /> month(s)</td> </tr>--> </table> </div> <div class="tab-panel" id="Hourly" style="display:none"> <table> <tr> <td>每 <input type="text" style="width: 40px" value="1" name="txtHourly" id="txtHourly" /> 小时</td> </tr> </table> </div> <div class="tab-panel" id="Weekly" style="display:none"> <table> <tr> <td> <table> <tr> <td><input type="checkbox" id="id42" name="txtWeekly" value="2" class="wicket-id41"> </input></td> <td>周一</td> </tr> </table> </td> <td> <table> <tr> <td><input type="checkbox" id="id43" name="txtWeekly" value="3" class="wicket-id41" /></td> <td>周二</td> </tr> </table> </td> <td> <table> <tr> <td><input type="checkbox" id="id44" name="txtWeekly" value="4" class="wicket-id41" /></td> <td>周三</td> </tr> </table> </td> <td> <table> <tr> <td><input type="checkbox" id="id45" name="txtWeekly" value="5" class="wicket-id41" /></td> <td>周四</td> </tr> </table> </td> </tr> <tr> <td> <table> <tr> <td><input type="checkbox" id="id46" name="txtWeekly" value="6" class="wicket-id41" /></td> <td>周五</td> </tr> </table> </td> <td> <table> <tr> <td><input type="checkbox" id="id47" name="txtWeekly" value="7" class="wicket-id41" /></td> <td>周六</td> </tr> </table> </td> <td> <table> <tr> <td><input type="checkbox" id="id48" name="txtWeekly" value="1" class="wicket-id41" /></td> <td>周日</td> </tr> </table> </td> <td></td> </tr> </table> </div> <div class="tab-panel" id="Minutes" style="display:none"> <table> <tr> <td>每 <input type="text" style="width: 40px" value="1" name="txtMinutes" id="txtMinutes" />分钟</td> </tr> </table> </div> <!-- <input type="checkbox" id="firstRun" name="firstRun" onClick="checkFirstRun()" />--> <table cellpadding="0" cellspacing="0" id="firstRunTable"> <tr> <td>第一次运行时间:</td> <td><span id="id54"> <table> <tr> <td><select id="hourPart"> <option value="0">00</option> <option value="1">01</option> <option value="2">02</option> <option value="3">03</option> <option value="4">04</option> <option value="5">05</option> <option value="6">06</option> <option value="7">07</option> <option value="8">08</option> <option value="9">09</option> <option value="10">10</option> <option value="11">11</option> <option selected="selected" value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> <option value="16">16</option> <option value="17">17</option> <option value="18">18</option> <option value="19">19</option> <option value="20">20</option> <option value="21">21</option> <option value="22">22</option> <option value="23">23</option> </select>点</td> <td><select id="minutePart"> <option selected="selected" value="0">00</option> <option value="1">01</option> <option value="2">02</option> <option value="3">03</option> <option value="4">04</option> <option value="5">05</option> <option value="6">06</option> <option value="7">07</option> <option value="8">08</option> <option value="9">09</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> <option value="16">16</option> <option value="17">17</option> <option value="18">18</option> <option value="19">19</option> <option value="20">20</option> <option value="21">21</option> <option value="22">22</option> <option value="23">23</option> <option value="24">24</option> <option value="25">25</option> <option value="26">26</option> <option value="27">27</option> <option value="28">28</option> <option value="29">29</option> <option value="30">30</option> <option value="31">31</option> <option value="32">32</option> <option value="33">33</option> <option value="34">34</option> <option value="35">35</option> <option value="36">36</option> <option value="37">37</option> <option value="38">38</option> <option value="39">39</option> <option value="40">40</option> <option value="41">41</option> <option value="42">42</option> <option value="43">43</option> <option value="44">44</option> <option value="45">45</option> <option value="46">46</option> <option value="47">47</option> <option value="48">48</option> <option value="49">49</option> <option value="50">50</option> <option value="51">51</option> <option value="52">52</option> <option value="53">53</option> <option value="54">54</option> <option value="55">55</option> <option value="56">56</option> <option value="57">57</option> <option value="58">58</option> <option value="59">59</option> </select>分</td> </tr> </table> </span></td> </tr> </table> </td> </tr> <tr> <td height="40"> CRON表达式: <input type="text" style="width: 200px" name="mycron" id="mycron" /> </td> </tr> <tr> <td height="40" style="padding-left: 100px"> <button class="button" name="btnGenerate" id="idf" onClick="getExp()"> 生成</button> <button class="button" name="btnGenerate" id="idf" onClick="ret()"> 确认返回</button> </td> </tr> </table> </fieldset> </td> </tr> <tr> <td></td> </tr> </table> </div> </body> </html>
样式:
corn表达式生成器
最新推荐文章于 2024-08-02 13:34:45 发布
本文探讨了如何使用JavaScript来创建和处理Corn表达式,详细介绍了相关的核心概念和实现步骤,帮助开发者更好地理解和运用这种定时任务表达式。
摘要由CSDN通过智能技术生成