动态的9*9乘法表效果的实现代码


Posted in Javascript onMay 16, 2016

近日在群里看到有个题目,拿出来写写,

要求:

用html,css,原生js实现如图的效果,先正向输出,然后逆向回溯,最后停留在完整的画面。

动态的9*9乘法表效果的实现代码

首先:

HTML部分代码:

 <div id="result"></div> 

就是这么简单一行搞定。

CSS代码:

#result{
 width:550px;
 margin:30px auto;
 font-size:0;
 font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;
}
#result span{
 display:inline-block;
 width:60px;
 height:25px;
 line-height:25px;
 font-size:12px;
 text-align:center;
 border:1px solid #eee;
 margin: -1px 0 0 -1px;
}

CSS代码也很简单,span中的margin主要就是为了消除出现双border的问题。

接下来重点来了

javascript代码:

首先创建一个9*9乘法表的函数

function create(){
 var html = [];
 for(var i = 1;i <= 9;i++){
  for(var j = 1;j <= i;j++){
    html.push('<span>'+j+'*'+i+'='+(j*i)+'</span>');
  }
   html.push('<br/>');
 }
 return html;
}

1,新建一个用来放html代码片段的空数组:

var html = [];

2,使用for循环遍历出9*9乘法表格:

for(var i = 1;i <= 9;i++){
 for(var j = 1;j <= i;j++){
 //内容
 } 
}

3,将循环内容push进之前新建的空数组:

html.push('<span>'+j+'*'+i+'='+(j*i)+'</span>');

4,注意为了实现阶梯在j循环完毕之后添加一个换行字符:

html.push('<br/>');

5,最后记得return出刚刚那个数组:

return html;

创建9*9乘法表的函数就完成了。

接下来是将展示到页面中:

function inHTML(){
   var html = create(),
    i = 0,
    tmp = create(),
    timer = null,
    result = document.getElementById('result');
   timer = setInterval(function(){
    if(i > html.length){
     html.splice(html.length-1,1)
     result.innerHTML = html.join('');
    }
    else{
     result.innerHTML += html[i++];
    }
    if(!html.length){
     result.innerHTML = tmp.join('');
     clearInterval(timer);
    }
   },100)
  }

我们依然是创建一个新的函数:inHTML()

1,首先声明一些初始化变量

var html = create(),//调用之前创建的9*9函数
  i = 0,//初始化变量i
  tmp = create(),
  timer = null,//初始化
  result = document.getElementById('result');//获取id

2,接着我们创建一个定时器,让数据依次展示:

timer = setInterval(function(){
 //内容 
},100)

让100毫秒执行一次这个定时器

3,接着写定时器中的内容:

if(i > html.length){ //判断i是否大于html.length,如果大于就逆向展示
 html.splice(html.length-1,1)
 result.innerHTML = html.join('');
}
else{ //如果小于就正向展示
 result.innerHTML += html[i++];
}
if(!html.length){ //判断如果html.length为false时展示。
 result.innerHTML = tmp.join('');
 clearInterval(timer);//清除定时器
}

inHTML()函数也写完了,那就剩下调用了

inHTML();

完成。

大家可以去自己去试试,有更好的想法可以给我留言。

以上这篇动态的9*9乘法表效果的实现代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
combox改进版 页面原型参考dojo的,比网上jQuery的那些combox功能强,代码更小
Apr 15 Javascript
jquery实现兼容浏览器的图片上传本地预览功能
Oct 14 Javascript
在子窗口中关闭父窗口的一句代码
Oct 21 Javascript
js setTimeout opener的用法示例详解
Oct 23 Javascript
详解JavaScript中的forEach()方法的使用
Jun 08 Javascript
Position属性之relative用法
Dec 14 Javascript
JS加载器如何动态加载外部js文件
May 26 Javascript
js字符串引用的两种方式(必看)
Sep 18 Javascript
详解js中==与===的区别
Jan 08 Javascript
利用Plupload.js解决大文件上传问题, 带进度条和背景遮罩层
Mar 15 Javascript
create-react-app安装出错问题解决方法
Sep 04 Javascript
VuePress 中如何增加用户登录功能
Nov 29 Javascript
Svg.js实例教程及使用手册详解(一)
May 16 #Javascript
限制只能输入数字的实现代码
May 16 #Javascript
JavaScript开发Chrome浏览器扩展程序UI的教程
May 16 #Javascript
基于javascript实现最简单的选项卡切换效果
May 16 #Javascript
JavaScript实现页面跳转的方式汇总
May 16 #Javascript
js实现页面跳转的几种方法小结
May 16 #Javascript
WebApi+Bootstrap+KnockoutJs打造单页面程序
May 16 #Javascript
You might like
解析PHP中一些可能会被忽略的问题
2013/06/21 PHP
PHP笛卡尔积实现算法示例
2018/07/30 PHP
PHP的JSON封装、转变及输出操作示例
2019/09/27 PHP
innertext , insertadjacentelement , insertadjacenthtml , insertadjacenttext 等区别
2007/06/29 Javascript
才发现的超链接js导致网页中GIF动画停止的解决方法
2007/11/02 Javascript
使用 JScript 创建 .exe 或 .dll 文件的方法
2011/07/13 Javascript
JavaScript中的变量声明早于赋值分析
2012/03/01 Javascript
TextArea设置MaxLength属性最大输入值的js代码
2012/12/21 Javascript
用jQuery获取IE9下拉框默认值问题探讨
2013/07/22 Javascript
让图片跳跃起来  javascript图片轮播特效
2016/02/16 Javascript
如何用js判断dom是否有存在某class的值
2017/02/13 Javascript
jquery中绑定事件的异同
2017/02/28 Javascript
discuz表情的JS提取方法分析
2017/03/22 Javascript
3分钟快速搭建nodejs本地服务器方法运行测试html/js
2017/04/01 NodeJs
使用node打造自己的命令行工具方法教程
2018/03/26 Javascript
卸载vue2.0并升级vue_cli3.0的实例讲解
2020/02/16 Javascript
微信小程序实现列表的横向滑动方式
2020/07/15 Javascript
Vue-Ant Design Vue-普通及自定义校验实例
2020/10/24 Javascript
JavaScript实现滚动加载更多
2020/12/27 Javascript
three.js中多线程的使用及性能测试详解
2021/01/07 Javascript
[03:49]DOTA2英雄基础教程 光之守卫
2014/01/14 DOTA
[56:17]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第三场 8.22
2019/09/05 DOTA
Python pickle类库介绍(对象序列化和反序列化)
2014/11/21 Python
深入学习python的yield和generator
2016/03/10 Python
Python的Django框架中使用SQLAlchemy操作数据库的教程
2016/06/02 Python
用sqlalchemy构建Django连接池的实例
2019/08/29 Python
Python pip 安装与使用(安装、更新、删除)
2019/10/06 Python
python GUI库图形界面开发之PyQt5窗口类QMainWindow详细使用方法
2020/02/26 Python
Django怎么在admin后台注册数据库表
2020/11/14 Python
电信专业应届生自荐信
2013/09/28 职场文书
舞蹈毕业生的自我评价
2014/03/05 职场文书
小学生环保倡议书
2014/05/15 职场文书
2015年新教师工作总结
2015/04/28 职场文书
创业计划书之网络外卖
2019/10/31 职场文书
Nginx使用X-Accel-Redirect实现静态文件下载的统计、鉴权、防盗链、限速等
2021/04/04 Servers
如何利用 CSS Overview 面板重构优化你的网站
2021/10/24 HTML / CSS