这是个客户的需求，具体大概是可以在一个 24*8 的点阵图上自由绘制图形，然后数据的存储是按列依次记录，用0和1分别表示是否选中，最终串成一个字符串。

　　整体需求难度并不复杂，所以在写demo的时候就尽可能增强了一些扩展性，比如点阵区域可以自由设置；点阵图案绘制可以按住鼠标拖拽，增加的数据清空功能。

　　直接看demo吧。

一个用 js 实现点阵图的编辑器演示的更多相关文章

  1. D3.js 力导向图的显示优化

    D3.js 作为一个前端,说到可视化除了听过 D3.js 的大名,常见的可视化库还有 ECharts.Chart.js,这两个库功能也很强大,但是有一个共同特点是封装层次高,留给开发者可设计和控制的部 ...

  2. 利用d3.js绘制雷达图

    利用d3,js将数据可视化,能够做到数据与代码的分离.方便以后改动数据. 这次利用d3.js绘制了一个五维的雷达图.即将多个对象的五种属性在一张图上对照. 数据写入data.csv.数据类型写入typ ...

  3. 原生js轮播图

    //用原生js实现了一个简单的轮播图效果 <!DOCTYPE html><html> <head> <meta charset="UTF-8&quo ...

  4. 如何使用JS实现banner图滚动

    通过JS实现banner图的滚动主要是定时器的应用 先新建好banner图的几张图片,最后一张与第一张用同一个,保证滚动的不间断 改好样式,需注意所有图片要在同行显示,否则不能向左滚动 声明一个函数, ...

  5. 从零开始搭建一个vue.js的脚手架

    在谷歌工作的时候,我们要做很多界面的原型,要求快速上手,灵活运用,当时用的一些现有框架,比如angular,太笨重了——尤雨溪(Vue.js 作者) vue.js是现在一个很火的前端框架,官网描述其简 ...

  6. JavaScript的案例（数据校验，js轮播图，页面定时弹窗）

    1.数据校验            步骤            1.确定事件(onsubmit)并绑定一个函数            2.书写这个函数,获取数据,并绑定id            3. ...

  7. 纯js轮播图练习-2，js+css旋转木马层叠轮播

    基于css3的新属性,加上js的操作,让现在js轮播图花样越来越多. 而现在出现的旋转木马层叠轮播的轮播图样式,却是得到了很多人都喜爱和投入使用. 尤其是在各大软件中,频繁的出现在大家的眼里,在web ...

  8. 纯js轮播图练习-1

    偶尔练习,看视频自己学着做个简单的纯JS轮播. 简单的纯js轮播图练习-1. 样子就是上面图片那样,先不管好不好看,主要是学会运用和理解轮播的原理 掌握核心的理论知识和技术的操作,其他的都可以在这个基 ...

  9. 手把手原生js轮播图

    在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用 ...

随机推荐

  1. PHP二位数组按照数组的某个字段值排序

    不多废话 直接代码 /** * @name 排序 按照数组的某个字段值排序 * @param $array 排序数组 $field 排序字段 $direction 排序顺序 * @author wan ...

  2. 【JAVAWEB学习笔记】04_JavaScript

    晨读单词: onmouseover:鼠标移入 onmouseout:鼠标移出 attribute:属性 node:节点 document:文档 element:元素 textNode:文本节点 app ...

  3. cp复制文件到多个目录下及强制覆盖

    工作中有遇到要把一个文件拷贝到N个文件夹下,但是cp又没有这样的命令,怎么办,这时需要编写一个脚本,首先做实验如下: [root@host1 ~]# mkdir test [root@host1 ~] ...

  4. javascript 面向对象基础 （1）

    常见的创建对象的方式有3种: ① 声明变量的方式 var obj1 = { key1: "val1", key1: "val2", show: function ...

  5. 我来说说XML文件中的xmlns、xmlns:xsi和xsi:schemaLocation的具体含义

      文章摘自:https://yq.aliyun.com/articles/40353               http://www.cnblogs.com/zhao1949/p/5652167. ...

  6. JSP中include指令和include动作区别

    首先 <%@ include file=” ”%>:为指令元素 <jsp:include page=” ” flush=”true”/>:为 动作元素 先说指令元素: incl ...

  7. Azure Event Hub 技术研究系列3-Event Hub接收事件

    上篇博文中,我们通过编程的方式介绍了如何将事件消息发送到Azure Event Hub: Azure Event Hub 技术研究系列2-发送事件到Event Hub 本篇文章中,我们继续:从Even ...

  8. 教育类APP开发现新增长，多款APP该如何突围？

    "十二五"以来,国家共出台相关的重大教育政策文件741个,而进入到"十三五"时期教育领域综合改革深入推进的关键期,不断促进教育现代化的实现.加快迈入人力资源强国 ...

  9. iOS安全攻防之结构体保护使用

    Objective-C 代码很容易被 hook,因此需要对一些重要的业务逻辑进行保护,可以改用结构体的形式,把函数名隐藏在结构体里,以函数指针成员的形式存储.这样编译后只留了下地址,去掉了名字和参数表 ...

  10. springboot thymeleaf和shiro标签整合

    这里用的是 thymeleaf 2.x版本的 添加依赖 <dependency> <groupId>com.github.theborakompanioni</group ...