动态的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 相关文章推荐
javascript 可以拖动的DIV(二)
Jun 26 Javascript
javascript 写类方式之六
Jul 05 Javascript
js动态添加onload、onresize、onscroll事件(另类方法)
Dec 26 Javascript
Extjs单独定义各组件的实例代码
Jun 25 Javascript
详谈LABJS按需动态加载js文件
May 07 Javascript
jquery实现树形菜单完整代码
Dec 29 Javascript
深入理解JQuery循环绑定事件
Jun 02 Javascript
JavaScript数值千分位格式化的两种简单实现方法
Aug 01 Javascript
详解webpack性能优化——DLL
Oct 20 Javascript
jQuery中实现text()的方法
Apr 04 jQuery
浅谈laytpl 模板空值显示null的解决方法及简单的js表达式
Sep 19 Javascript
详解JavaScript中的Object.is()与&quot;===&quot;运算符总结
Jun 17 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
牡丹941资料
2021/03/01 无线电
PHP中限制IP段访问、禁止IP提交表单的代码
2011/04/23 PHP
使用gd库实现php服务端图片裁剪和生成缩略图功能分享
2013/12/25 PHP
php的慢速日志引起的Mysql错误问题分析
2014/05/13 PHP
php连接oracle数据库的核心步骤
2016/05/26 PHP
PHP 使用位运算实现四则运算的代码
2021/03/09 PHP
用 Javascript 验证表单(form)中多选框(checkbox)值
2009/09/08 Javascript
一个简单的JavaScript 日期计算算法
2009/09/11 Javascript
Mootools 1.2教程(3) 数组使用简介
2009/09/14 Javascript
比较全面的event对像在IE与FF中的区别 推荐
2009/09/21 Javascript
尝试在让script的type属性等于text/html
2013/01/15 Javascript
Jquery动态改变图片IMG的src地址示例
2013/06/25 Javascript
JQuery 在线引用及测试引用是否成功
2014/06/24 Javascript
js实现文章文字大小字号功能完整实例
2014/11/01 Javascript
JS实现模拟风力的雪花飘落效果
2015/05/13 Javascript
JS生成某个范围的随机数【四种情况详解】
2016/04/20 Javascript
详解原生JavaScript实现jQuery中AJAX处理的方法
2016/05/10 Javascript
JavaScript必知必会(二) null 和undefined
2016/06/08 Javascript
快速解决js动态改变dom元素属性后页面及时渲染的问题
2016/07/06 Javascript
浅谈Node.js:Buffer模块
2016/12/05 Javascript
Vue双向数据绑定(MVVM)的原理
2020/10/03 Javascript
基于Vant UI框架实现时间段选择器
2020/12/24 Javascript
python绘制条形图方法代码详解
2017/12/19 Python
python放大图片和画方格实现算法
2018/03/30 Python
Python 实现Windows开机运行某软件的方法
2018/10/14 Python
解决在Python编辑器pycharm中程序run正常debug错误的问题
2019/01/17 Python
Appium+python自动化怎么查看程序所占端口号和IP
2019/06/14 Python
python中利用numpy.array()实现俩个数值列表的对应相加方法
2019/08/26 Python
python实现粒子群算法
2020/10/15 Python
最新PyCharm从安装到PyCharm永久激活再到PyCharm官方中文汉化详细教程
2020/11/17 Python
美国最大的半成品净菜电商:Blue Apron(蓝围裙)
2018/04/27 全球购物
J2SDK1.5与J2SDK5.0有什么区别
2012/09/19 面试题
党支部班子“四风”问题自我剖析材料
2014/09/28 职场文书
2015年仓库工作总结
2015/04/09 职场文书
计划生育责任书
2015/05/09 职场文书
致男子1500米运动员的广播稿
2019/11/08 职场文书