Created
October 15, 2015 07:41
-
-
Save selfboot/ce8a570a8e7453c76fd7 to your computer and use it in GitHub Desktop.
A simple nw.js based desktop app
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="zh-cn"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>算法分析作业1：统计页码中单个数字出现的次数</title> | |
| <link rel="stylesheet" type="text/css" href="style.css" /> | |
| <script src="main.js"></script> | |
| </head> | |
| <body> | |
| <div class="wrap"> | |
| <div class="enter_page"> | |
| <input type="text" id="page_number" placeholder="请输入页码数(1到10^9)" /> | |
| <button type="button" id="confirm">确定</button> | |
| </div> | |
| <p id="tips"></p> | |
| <table id="cal_result"> | |
| <tr><th>数字</th><th>出现次数</th></tr> | |
| <tr><td>0</td><td>Null</td></tr> | |
| <tr><td>1</td><td>Null</td></tr> | |
| <tr><td>2</td><td>Null</td></tr> | |
| <tr><td>3</td><td>Null</td></tr> | |
| <tr><td>4</td><td>Null</td></tr> | |
| <tr><td>5</td><td>Null</td></tr> | |
| <tr><td>6</td><td>Null</td></tr> | |
| <tr><td>7</td><td>Null</td></tr> | |
| <tr><td>8</td><td>Null</td></tr> | |
| <tr><td>9</td><td>Null</td></tr> | |
| </table> | |
| </div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var is_show_tips = false; | |
| // 绑定点击确定按钮的函数调用 | |
| function onclickHook() { | |
| if (!document.getElementById) return false; | |
| if (!document.getElementById("confirm")) return false; | |
| var confirm = document.getElementById("confirm"); | |
| confirm.onclick = function() { | |
| getPageCountAndUpdate(); | |
| } | |
| } | |
| // 获取合法的页码值，计算每个数字出现的次数，并且更新表格 | |
| function getPageCountAndUpdate() { | |
| pages = getPageNumbers(); | |
| if (pages > 0) { | |
| var count_result = count(pages); | |
| update(count_result); | |
| } else { | |
| return; | |
| } | |
| } | |
| // 更新表格中的数据 | |
| function update(count_result) { | |
| var table = document.getElementById("cal_result"); | |
| var td = table.getElementsByTagName("td"); | |
| for (var odd = 1; odd < td.length; odd += 2) { | |
| td[odd].firstChild.nodeValue = count_result[parseInt(odd / 2)]; | |
| } | |
| } | |
| // 获取用户输入的页码数, 计算出每个数字出现的次数 | |
| function getPageNumbers() { | |
| if (!document.getElementById) return false; | |
| var page_str = document.getElementById("page_number").value; | |
| var page_number; | |
| if (isInteger(page_str)) { | |
| if (is_show_tips) { | |
| showOrHideTips(); | |
| } | |
| page_number = parseInt(page_str, 10); | |
| } else { | |
| if (!is_show_tips) { | |
| showOrHideTips(); | |
| } | |
| enterAgain(); | |
| return -1; | |
| } | |
| return page_number; | |
| } | |
| // 计算每个数字出现的次数 | |
| function count(pages) { | |
| var count_list = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]; | |
| //页码小于10，那么直接得到每个数字出现的次数 | |
| if (pages < 10) { | |
| for (var i = 1; i < pages + 1; i++) { | |
| count_list[i] = 1 | |
| } | |
| return count_list; | |
| } | |
| // 如果数字大于10, 则递归计算出现次数； | |
| // 第一部分：第1行前面的的9个数字出现的次数 | |
| for (var i = 1; i < 10; i++) { | |
| count_list[i] += 1; | |
| } | |
| //第二部分：最后一行数字的出现次数 | |
| var units = parseInt(pages % 10); | |
| for (var i = 0; i < units + 1; i++) { | |
| count_list[i] += 1; | |
| } | |
| //第三部分：满行中0到9纵向出现的次数 | |
| var others = parseInt(pages / 10 - 1); | |
| for (var i = 0; i < 10; i++) { | |
| count_list[i] += others; | |
| } | |
| //第四部分：满行中数字横向出现的次数 | |
| var count_others = count(others); | |
| for (var i = 0; i < 10; i++) { | |
| count_list[i] += count_others[i] * 10; | |
| } | |
| //第五部分：最后一行数字横向出现的次数 | |
| var digit_keep = []; | |
| while (pages > 0) { | |
| digit_keep.push(parseInt(pages % 10)); | |
| pages = parseInt(pages / 10); | |
| } | |
| var times_units = digit_keep[0] + 1; | |
| var len = digit_keep.length; | |
| for (var i = 1; i < len; i++) { | |
| count_list[digit_keep[i]] += times_units; | |
| } | |
| return count_list; | |
| } | |
| //判定输入的是否为整数 | |
| function isInteger(str) { | |
| var r = /^[0-9]*[1-9][0-9]*$/; | |
| return r.test(str); | |
| } | |
| // 重置输入框中的提示 | |
| function enterAgain() { | |
| var input_holder = document.getElementById("page_number").placeholder; | |
| input_holder = "请输入页码数(1到10^9)"; | |
| var table = document.getElementById("cal_result"); | |
| var td = table.getElementsByTagName("td"); | |
| for (var odd = 1; odd < td.length; odd += 2) { | |
| td[odd].firstChild.nodeValue = "Null"; | |
| } | |
| } | |
| // 显示或者隐藏错误提示消息 | |
| function showOrHideTips() { | |
| var tips = document.getElementById("tips"); | |
| // 当前有提示的话，取消该提示 | |
| if (is_show_tips) { | |
| tips.innerHTML = ""; | |
| is_show_tips = false; | |
| } else { | |
| tips.innerHTML = "页码输入错误，请重新输入！"; | |
| is_show_tips = true; | |
| } | |
| } | |
| // 将页面加载完毕后执行的函数绑定到onload事件 | |
| function addLoadEvent(func) { | |
| var oldonload = window.onload; | |
| if (typeof window.onload != 'function') { | |
| window.onload = func; | |
| } else { | |
| window.onload = function() { | |
| oldonload(); | |
| func(); | |
| } | |
| } | |
| } | |
| addLoadEvent(onclickHook); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "main": "index.html", | |
| "name": "算法分析作业1：统计数字", | |
| "description": "统计书的全部页码中用到多少次数字0, 1, 2...9", | |
| "version": "1.0", | |
| "window": { | |
| "toolbar": false, | |
| "resizable": false, | |
| "width": 800, | |
| "height": 500 | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| line-height: 1; | |
| color: #000; | |
| background: #fff; | |
| font-size: 20px; | |
| } | |
| .wrap { | |
| width: 70%; | |
| margin: 0 auto; | |
| } | |
| input, button{ | |
| padding: 5px 10px 5px 10px; | |
| margin: 20px 0 20px 0; | |
| font-size: 16px; | |
| } | |
| input { | |
| text-align: right; | |
| float: left; | |
| width: 80%; | |
| } | |
| button { | |
| background-color: #5cb85c; | |
| border: 2px solid #4cae4c; | |
| color: #FFF; | |
| text-align: center; | |
| border-radius: 4px; | |
| float: right; | |
| } | |
| .enter_page{ | |
| vertical-align: right; | |
| } | |
| table { | |
| font-family: Monaco, Arial, sans-serif; | |
| width: 100%; | |
| border-collapse: collapse; | |
| } | |
| table th, table td { | |
| border: 1px solid #98bf21; | |
| padding: 5px 7px 5px 7px; | |
| text-align: center; | |
| } | |
| table th { | |
| padding-top: 10px; | |
| padding-bottom: 10px; | |
| background-color: grey; | |
| color: #ffffff; | |
| } | |
| p#tips { | |
| color: red; | |
| text-align: right; | |
| clear: both; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment