Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
A simple nw.js based desktop app
<!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>
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);
{
"main": "index.html",
"name": "算法分析作业1:统计数字",
"description": "统计书的全部页码中用到多少次数字0, 1, 2...9",
"version": "1.0",
"window": {
"toolbar": false,
"resizable": false,
"width": 800,
"height": 500
}
}
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