案例要求

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

业务核心算法:

/*

    数字检测

    @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. Jmeter - 命令行参数

    同步更新至个人博客:https://njlife.top/2019/07/12/Jmeter-%E5%91%BD%E4%BB%A4%E8%A1%8C%E5%8F%82%E6%95%B0/ Jmeter ...

  2. golang多维数组的切片

    通过for循环来取多维数组的切片 package main import ( "fmt" ) func main() { a := [...]string{"USA&qu ...

  3. Sleep-Join方法理解

    package cn.mayday.test; public class JoinTest { public static void main(String[] args) { try { int c ...

  4. 上传时excel类型accept的MIMI类型

    1.excel文件类型 accept='application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/v ...

  5. Linux文件系统之mv(重命名/移动文件)

    mv(move)命令 输入man mv,了解到mv命令是用于移动或重命名文件 语法 mv [options] source dest mv [options] source... directory ...

  6. hdu3715 Go Deeper[二分+2-SAT]/poj2723 Get Luffy Out[二分+2-SAT]

    这题转化一下题意就是给一堆形如$a_i + a_j \ne c\quad (a_i\in [0,1],c\in [0,2])$的限制,问从开头开始最多到哪条限制全是有解的. 那么,首先有可二分性,所以 ...

  7. Redis:RedisHelper(5)

    /// <summary> /// Redis 助手 /// </summary> public class RedisHelper { /// <summary> ...

  8. 题解 [51nod1607] 卷积和

    题面 解析 神仙LZF随机找出的毒瘤题. 一开始读题过于草率导致\(naive\)了. step 1 看上去特别像数位DP(实际上也有一点). 先预处理出有\(i\)位的数(最高位不为\(0\))的数 ...

  9. msyql round函数隐藏问题

    1.背景 在用mysql round进行四舍五入计算的时候如果参与计算的字段为float,则最终计算出的四舍五入效果会有很大出入.例子我就不列举了 2.原因 mysql官方文档中关于ROUND函数的部 ...

  10. 【csp模拟赛4】旅行计划 (travelling.cpp)--欧拉回路

    [题目描述] 小 Z 打算趁着暑假,开启他的旅行计划.但与其他同学不同的是,小 Z 旅 行时并不关心到达了哪个网红景点打了哪些卡.小 Z 更关注沿路的风光,而且 小 Z 觉得,尽管多次到达同一个地方, ...