案例要求

根据业务情况,要把核心的东西变成一个模块便于复用,慢慢沉淀后,能够更快更高效地编程。

业务核心算法:

/*
数字检测
@return
返回2,能被3和7整除
返回1,能够被3整除
返回0,不能被3整除
@author Dev
Written in 2019.9
*/
function checkNum(number){
if(number % 21 == 0) return 2;
else if(number % 3 == 0) return 1;
return 0
}

业务逻辑代码:

/*
@return
返回符合条件的拼接结果,每十个一行;
illegal:
"unexpected number";
begin > end:
"the begin is greater than the end"
*/
function filterNum(begin, end){
var rst = '';
var cnt = 0;
//合法性判断:
if(isNaN(begin) || isNaN(end)) return "unexpected number";
if(begin>end) "the begin is greater than the end";
for(var i = begin ; i <= end; i++){
if(checkNum(i) == 0) continue;
rst += ("<span class='");
// 被3除
if(checkNum(i) == 1) rst += ("three ");
// 被两者除
else rst += ("twt-one ");
rst += ("'>"+ i +"</span>");
cnt ++;
if(cnt % 10 == 0 ) rst += '<br/>';
}
return rst;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="divide.css">
</head>
<body>
<label>请输入开始数字</label>
<input type="text" name="" id="begin">
<label>请输入结束数字</label>
<input type="text" name="" id="end">
<button id="smt">提交</button>
<hr>
<div id="result">
</div>
</body>
<script type="text/javascript" src="base.js"></script>
<script type="text/javascript" src="divide.js"></script>
</html>

divide.html

/* normal style */
span{
display: inline-block;
width: 100px;
text-align: center;
} /* Able to be divisible by three. */
.three{
color: blue;
font-weight: bold;
} /* Able to be divisible by 3 and 7 */
.twt-one{
color: yellow;
background-color: red;
}

divide.css

function $(id){
return document.getElementById(id);
}
function print(log){
console.log(log);
}

base.js

/*
数字检测
@return
返回2,能被3和7整除
返回1,能够被3整除
返回0,不能被3整除
@author Dev
Written in 2019.9
*/
function checkNum(number){
if(number % 21 == 0) return 2;
else if(number % 3 == 0) return 1;
return 0
}
/*
@return
返回符合条件的拼接结果,每十个一行;
number wrapper:
span
illegal:
"unexpected number";
begin > end:
"the begin is greater than the end"
*/
function filterNum(begin, end){
var rst = '';
var cnt = 0;
//合法性判断:
if(isNaN(begin) || isNaN(end)) return "unexpected number";
// 转成数值
begin = Number(begin), end = Number(end);
if(begin > end) return "the begin is greater than the end";
for(var i = begin ; i <= end; i++){
var num = checkNum(i);
if(num == 0) continue;
rst += ("<span class='");
// 被3除
if(num == 1) rst += ("three ");
// 被两者除
else rst += ("twt-one ");
rst += ("'>" + i + "</span>");
cnt ++;
if(cnt % 10 == 0 ) rst += '<br/>';
}
return rst;
}
/*
用户提交数据时触发
获取网页源数据,并在网页显示处理结果
*/
function onSubmit(){
var begin = $('begin').value;
var end = $("end").value;
var rst = $('result');
rst.innerHTML = filterNum(begin,end);
} // 设置点击事件函数
$('smt').onclick = onSubmit;

divide.js

JavaScript(6)—— 返回特征数字的更多相关文章

  1. java基础60 JavaScript字符串转换成数字(网页知识)

    1.字符串转换成数字 <!doctype html> <html> <head> <meta charset="utf-8"> &l ...

  2. asp.net后台操作javascript:confirm返回值

    在asp.net中使用confirm可以分为两种: 1.没有使用ajax,confirm会引起也面刷新 2.使用了ajax,不会刷新 A.没有使用ajax,可以用StringBuilder来完成. ( ...

  3. JavaScript判断是否是数字

    JavaScript判断是否是数字的几种方法 isNaN() /** * 判断是否是数字 */ function isNumber(value){ if(isNaN(value)){ return f ...

  4. JavaScript 关于金额、数字验证的正则表达式

    JavaScript 关于金额.数字验证的正则表达式 function ismoney(money) { var reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^ ...

  5. JavaScript关于返回数据类型一个小小的笔记

    Javascript关于返回数据类型的一个小笔记 javascript数据类型有两种. 一种是基本数据类型:String.Number.Boolean.Symbol.Underfine.Null 一种 ...

  6. JavaScript求两个数字之间所有数字的和

    这是在fcc上的中级算法中的第一题,拉出来的原因并不是因为有什么好说的,而是我刚看时以为是求两个数字的和, 很显然错了.我感觉自己的文字理解能力被严重鄙视了- -.故拉出来折腾折腾. 要求: 给你一个 ...

  7. Odometer使用JavaScript和CSS制作数字滑动效果

    Odometer是一个使用JavaScript和CSS技术,制作出数字上下滑动的动画效果插件,有点类似与我们的天然气的读数的动画效果,这个插件是轻量级的,压缩版本只有3kg,使用CSS3动画技术,所以 ...

  8. 使用Javascript实现返回顶部功能。

    为了提高网站的浏览体验及友好度,相信大部分网站需要一个返回顶部的按钮,如果使用传统的a标记,再做一个div加上链接的话,非常麻烦,不仅每个页面都需要添加,而且不能实现非常智能的效果及简化维护时间. 下 ...

  9. 【JavaScript】日期和数字格式化

    var date, number; /** * 让日期和时间按照指定的格式显示的方法 * @param date * @param formatString format 格式字符串 * @retur ...

随机推荐

  1. javascript代码模块化解决方案

    我们用模块化的思想进行网页的编写是为了更好的管理我们的项目,模块与模块之间是独立存在的,每个模块可以独立的完成一个子功能. 一.服务器和桌面环境中的Javascript代码模块化:CommonJS M ...

  2. 2018-2019 ICPC, NEERC J. Streets and Avenues in Berhattan(DP)

    题目链接:https://codeforc.es/contest/1070/problem/J 题意:给出一个长度为 k 的字符串,选出 n 个和 m 个不同位置的字符构成两个字符串,使得两个字符串相 ...

  3. eclipse找不到JadClipse问题

    版本信息: Eclipse Java EE IDE for Web Developers. Version: 2018-09 (4.9.0) 根据以往配置,放在eclipse\plugins下不生效, ...

  4. OFDM时域削峰法降峰均比的原理及影响

    以下是对实验室师兄答疑的转述,经加工后的文字不可避免的存在一些噪声,仅供参考: 时域削峰为非线性变换,效果上相当于将时域中功率较大值的信号点,减去一个合适的“抵消”信号点的功率,使其降低到所设置的门限 ...

  5. 集合家族——LinkedList

    一.概述: LinkedList 与 ArrayList 一样实现 List 接口,只是 ArrayList 是 List 接口的大小可变数组的实现,LinkedList 是 List 接口链表的实现 ...

  6. c++继承子类构造函数问题

    c++中子类在继承基类的时候需要在构造函数中初始化变量.如果基类没有构造函数或者只有不带参数的构造函数,那么子类中的构造函数就不需要调用基类的构造函数了. 个人总结了两点子类中构造函数必须调用父类的构 ...

  7. import torch错误解决

    import torch出现 ”from torch._C import * ImportError: DLL load failed: 找不到指定的模块“错误这里torch=1.0.1,torchv ...

  8. redis延时监控

    一. slow log慢查询日志 Redis监控工具,命令和调优 slowlog是 Redis 用来记录查询执行时间的日志系统.slowlog-log-slower-than设置慢操作的阈值,单位是微 ...

  9. 关于Linux上面无法读取资源目录下文件的问题

    一开始我的代码是这样子的,读取本地子路径下的json文件 代码运行的时候,在window是可以正常的 @Override public String getBannerStr() { String s ...

  10. openfalcon架构及相关服务配置详解(转)

    一:openfalcon组件 1.falcon-agent 数据采集组件 agent内置了一个http接口,会自动采集预先定义的各种采集项,每隔60秒,push到transfer. 2.transfe ...