这是个客户的需求，具体大概是可以在一个 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. LeetCode:1. Add Two Numbers

    题目: LeetCode:1. Add Two Numbers 描述: Given an array of integers, return indices of the two numbers su ...

  2. 【安装Python环境】之“安装 setuptools ”时出现的问题以及解决办法

    安装Python环境时,还需要安装"setuptools 与 pip",但是安装setuptools时出现了几个问题,如下: setuptools 与 pip 下载地址如下:htt ...

  3. 单行 JS 实现移动端金钱格式的输入规则

    金钱格式检验属于很普通的需求,记得工作中第一次遇到这个需求的时候,还不太会写正则表达式,搜到了一个类似的解决方案,看着正则的文档改成了自己需要的形式. 但是用户的输入操作是任意的,只是显示提示信息,这 ...

  4. 深入理解Java虚拟机 - 学习笔记 1

    Java内存区域 程序计数器 (Program Counter Register) 是一块较小的内存空间,可以看作是当前线程所执行的字节码的行号指示器.在虚拟机的概念模型里,字节码解释器工作时就是通过 ...

  5. 字符串和整形数组的相互转化（JAVA程序）

    package te; public class StringConvert { static int[] a = {0,1,1,0,1,1,0,2}; static String s = " ...

  6. python csv例子

    import csv fieldnames = ['Column1', 'Column2', 'Column3', 'Column4'] rows = [{'Column1': '0', 'Colum ...

  7. Ubuntu怎样进行自由截图操作

    全屏截图 1. 很简单,键盘上右上角都有一个 Print Screen按键,敲一下,全屏截图操作完成. 自由截图 1. 此种方式很简单,打开系统设置->键盘,进入shortcuts选项 2. 点 ...

  8. Python爬虫02——贴吧图片爬虫V2.0

    Python小爬虫——贴吧图片爬虫V2.0 贴吧图片爬虫进阶:在上次的第一个小爬虫过后,用了几次发现每爬一个帖子,都要自己手动输入帖子链接,WTF这程序简直反人类!不行了不行了得改进改进. 思路: 贴 ...

  9. meta标签属性总结

    一.常见name属性.不同参数含义 meta标签的name属性语法格式是: <meta name="参数" content="具体的参数值"> 其中 ...

  10. linux不需要密码ssh登陆

    1. 自动ssh/scp方法A为本地主机(即用于控制其他主机的机器) ;B为远程主机(即被控制的机器Server), 假如ip为192.168.60.110;A和B的系统都是Linux在A上运行命令: ...