近日在群里看到有个题目,拿出来写写,
要求:
用html,css,原生js实现如图的效果,先正向输出,然后逆向回溯,最后停留在完整的画面。
首先:
HTML部分代码:
就是这么简单一行搞定。
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乘法表的函数