使用circlr.js插件实现3D效果的时候，不想在JS中写追加，直接写html又太麻烦（使用的是HBuilder X），所以找到了两种批量替换字符串，将其中的数字递增的方法。
想要实现的效果：
1. Microsoft Excel 使用自动填充序列和公式相加
2. 使用VS Code
circlr.js插件使用例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/index.css" />
</head>
<body>
<div class="container text-center">
<div class="row">
<div>
<div class="rotation" style="position: relative; width: 100%;">
<img src="images/1.png" style="display: block; width: 100%;">
<img src="images/2.png" style="display: none; width: 100%;">
<img src="images/3.png" style="display: none; width: 100%;">
<img src="images/4.png" style="display: none; width: 100%;">
<img src="images/5.png" style="display: none; width: 100%;">
<img src="images/6.png" style="display: none; width: 100%;">
<img src="images/7.png" style="display: none; width: 100%;">
<img src="images/8.png" style="display: none; width: 100%;">
<img src="images/9.png" style="display: none; width: 100%;">
<img src="images/10.png" style="display: none; width: 100%;">
<img src="images/11.png" style="display: none; width: 100%;">
<img src="images/12.png" style="display: none; width: 100%;">
<img src="images/13.png" style="display: none; width: 100%;">
<img src="images/14.png" style="display: none; width: 100%;">
<img src="images/15.png" style="display: none; width: 100%;">
<img src="images/16.png" style="display: none; width: 100%;">
<img src="images/17.png" style="display: none; width: 100%;">
<img src="images/18.png" style="display: none; width: 100%;">
<img src="images/19.png" style="display: none; width: 100%;">
<img src="images/20.png" style="display: none; width: 100%;">
<img src="images/21.png" style="display: none; width: 100%;">
<img src="images/22.png" style="display: none; width: 100%;">
<img src="images/23.png" style="display: none; width: 100%;">
<img src="images/24.png" style="display: none; width: 100%;">
<img src="images/25.png" style="display: none; width: 100%;">
<img src="images/26.png" style="display: none; width: 100%;">
<img src="images/27.png" style="display: none; width: 100%;">
<img src="images/28.png" style="display: none; width: 100%;">
<img src="images/29.png" style="display: none; width: 100%;">
<img src="images/30.png" style="display: none; width: 100%;">
<img src="images/31.png" style="display: none; width: 100%;">
<img src="images/32.png" style="display: none; width: 100%;">
<img src="images/33.png" style="display: none; width: 100%;">
<img src="images/34.png" style="display: none; width: 100%;">
<img src="images/35.png" style="display: none; width: 100%;">
<img src="images/36.png" style="display: none; width: 100%;">
<img src="images/37.png" style="display: none; width: 100%;">
<img src="images/38.png" style="display: none; width: 100%;">
<img src="images/39.png" style="display: none; width: 100%;">
<img src="images/40.png" style="display: none; width: 100%;">
<img src="images/41.png" style="display: none; width: 100%;">
<img src="images/42.png" style="display: none; width: 100%;">
<img src="images/43.png" style="display: none; width: 100%;">
<img src="images/44.png" style="display: none; width: 100%;">
<img src="images/45.png" style="display: none; width: 100%;">
<img src="images/46.png" style="display: none; width: 100%;">
<img src="images/47.png" style="display: none; width: 100%;">
<img src="images/48.png" style="display: none; width: 100%;">
<img src="images/49.png" style="display: none; width: 100%;">
<img src="images/50.png" style="display: none; width: 100%;">
<img src="images/51.png" style="display: none; width: 100%;">
<img src="images/52.png" style="display: none; width: 100%;">
<img src="images/53.png" style="display: none; width: 100%;">
<img src="images/54.png" style="display: none; width: 100%;">
<img src="images/55.png" style="display: none; width: 100%;">
<img src="images/56.png" style="display: none; width: 100%;">
<img src="images/57.png" style="display: none; width: 100%;">
<img src="images/58.png" style="display: none; width: 100%;">
<img src="images/59.png" style="display: none; width: 100%;">
<img src="images/60.png" style="display: none; width: 100%;">
<img src="images/61.png" style="display: none; width: 100%;">
<img src="images/62.png" style="display: none; width: 100%;">
<img src="images/63.png" style="display: none; width: 100%;">
<img src="images/64.png" style="display: none; width: 100%;">
<img src="images/65.png" style="display: none; width: 100%;">
<img src="images/66.png" style="display: none; width: 100%;">
<img src="images/67.png" style="display: none; width: 100%;">
<img src="images/68.png" style="display: none; width: 100%;">
<img src="images/69.png" style="display: none; width: 100%;">
<img src="images/70.png" style="display: none; width: 100%;">
<img src="images/71.png" style="display: none; width: 100%;">
<img src="images/72.png" style="display: none; width: 100%;">
</div>
</div>
</div>
</div>
<script src="js/circlr.js"></script>
</body>
</html>
补充两种方法：
1、使用JavaScript（Java、Python等语言）写一个字符串循环
2、使用bat批处理命令
3、使用HBuilderX也有像VS Code一样的快速生成语法，只是在VS Code中使用Enter键生成，而在HBuilder X中使用Tab键生成
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
