动态的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 相关文章推荐
innertext , insertadjacentelement , insertadjacenthtml , insertadjacenttext 等区别
Jun 29 Javascript
javascript基本语法分析说明
Jun 15 Javascript
js CSS操作方法集合
Oct 31 Javascript
JS实现拖动示例代码
Nov 01 Javascript
js中string转int把String类型转化成int类型
Aug 13 Javascript
JavaScript中用sort()方法对数组元素进行排序的操作
Jun 09 Javascript
原生JS实现跑马灯效果
Feb 20 Javascript
详解使用fetch发送post请求时的参数处理
Apr 05 Javascript
JS实现DOM删除节点操作示例
Apr 04 Javascript
vue中提示$index is not defined错误的解决方式
Sep 02 Javascript
Vue使用screenfull实现全屏效果
Sep 17 Javascript
Vue-router编程式导航的两种实现代码
Mar 04 Vue.js
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/09 PHP
php微信公众平台开发之获取用户基本信息
2015/08/17 PHP
yii2项目实战之restful api授权验证详解
2017/05/20 PHP
javascript 浏览器检测代码精简版
2010/03/04 Javascript
JavaScript 计算图片加载数量的代码
2011/01/01 Javascript
网页编辑器ckeditor和ckfinder配置步骤分享
2012/05/24 Javascript
jquery 删除cookie失效的解决方法
2013/11/12 Javascript
javascript确认框的三种使用方法
2013/12/17 Javascript
12306验证码破解思路分享
2015/03/25 Javascript
jQuery里filter()函数与find()函数用法分析
2015/06/24 Javascript
浅析2种JavaScript继承方式
2015/12/04 Javascript
AngularJS实现元素显示和隐藏的几个案例
2015/12/09 Javascript
nodejs修复ipa处理过的png图片
2016/02/17 NodeJs
jQuery Easyui Datagrid实现单行的上移下移及保存移动的结果
2016/08/15 Javascript
jQuery实现的自动加载页面功能示例
2016/09/04 Javascript
AngularJS实现标签页的两种方式
2016/09/05 Javascript
Bootstrap优化站点资源、响应式图片、传送带使用详解3
2016/10/14 Javascript
sea.js常用的api简易文档
2016/11/15 Javascript
JS闭包可被利用的常见场景小结
2017/04/09 Javascript
vue双向数据绑定知识点总结
2018/04/18 Javascript
原生实现一个react-redux的代码示例
2018/06/08 Javascript
WEEX环境搭建与入门详解
2019/10/16 Javascript
[02:38]DOTA2超级联赛专访Loda 认为IG世界最强
2013/05/27 DOTA
Python中动态获取对象的属性和方法的教程
2015/04/09 Python
Python用list或dict字段模式读取文件的方法
2017/01/10 Python
django DRF图片路径问题的解决方法
2018/09/10 Python
Python判断字符串是否为空和null方法实例
2020/04/26 Python
python异步Web框架sanic的实现
2020/04/27 Python
删除pycharm鼠标右键快捷键打开项目的操作
2021/01/16 Python
英国床垫和床架购物网站:Bedman
2019/11/04 全球购物
车间工艺员岗位职责
2013/12/09 职场文书
加油口号大全
2014/06/13 职场文书
用电申请报告范文
2015/05/18 职场文书
少先队大队委竞选口号
2015/12/25 职场文书
Python使用mitmproxy工具监控手机 下载手机小视频
2022/04/18 Python
Java线程的6种状态与生命周期
2022/05/11 Java/Android