스크립트 & 소스코드 공유

要实现 有序列表（<ol>）的序号小于 10 时前面补零（如 01, 02, ..., 09, 10, 11...），核心思路是：隐藏默认序号，用 CSS 伪元素 ::before 动态生成带前导零的序号。

以下是 3 种主流实现方法，从简单到灵活，覆盖不同场景：

一、最推荐：纯 CSS counter + ::before（无需 JS，兼容性好）

利用 CSS 计数器 counter-reset/counter-increment 统计列表项数量，再通过 ::before 伪元素显示序号，配合 content 拼接前导零。

核心原理：

1. counter-reset: list-counter 0：在 <ol> 上初始化计数器，起始值为 0（默认从 1 开始，这里显式设 0 更清晰）。
2. counter-increment: list-counter 1：在每个 <li> 上递增计数器，每次 +1。
3. content: counter(list-counter, decimal-leading-zero)：用 decimal-leading-zero 格式显示计数器（自动为 1-9 补零）。

1. Elements 패널에서 <canvas> 태그를 찾고 오른쪽에서 스타일 또는 속성을 확인하세요.
2. 우클릭 메뉴에서 “Store as Global Variable”을 선택합니다.
3. 콘솔에서 위와 같은 방법(canvas.toDataURL())으로 이미지 데이터를 추출 후 저장 가능합니다.

• canvas 내부에 이미지가 그려지는 방식에 따라 보안상 이유로 toDataURL()이 실패할 수 있습니다. (예: Cross-Origin 이미지가 캔버스에 포함된 경우)
• 만약 toDataURL()이 반환되지 않거나 오류가 발생하면 이미지 소스 자체를 따로 다운로드해야 할 수 있습니다.

var canvas = $0; // $0는 마지막 선택된 요소를 가리킵니다.

var dataURL = canvas.toDataURL("image/png");

var a = document.createElement('a');

a.href = dataURL;

a.download = 'canvas-image.png'; // 저장될 파일명 지정

document.body.appendChild(a);

a.click();

document.body.removeChild(a);

canvas 요소 제대로 선택했는지 확인

• var canvas = $0; 에서 $0이 실제 <canvas> 요소인지 확인하세요.
• 콘솔에 console.log(canvas); 입력해 보고 canvas 요소 객체가 잘 나오는지 확인해보세요.

직접 data URL을 새 탭에 복사해서 열기

• toDataURL()이 정상적으로 결과를 반환하면, dataURL 자체가 엄청 길 수도 있는데, 콘솔에 들어오는 문자열을 다 복사해서 새 탭 주소창에 붙여넣기 하면 이미지가 나옵니다.

因需求要做一个，横向的文字从右到左的跑马灯 ,鼠标移动上去暂停，参考其他大大的跑马灯不太适用所以，自己再次封装了一个跑马灯，分享给大家也方便自己下次直接使用，我自己用的JQ版本为3.3.1（jquery-3.3.1.min.js）
先上效果图

代码部分为

HTML部分

<div style="padding: 0 1rem;">
<div id="container_small_tip">
<div id="content_small_tip"></div>
</div>
</div>

CSS部分

#container_small_tip{
background:#ffffff;
position:relative;
overflow:hidden;
width:100%;
height:36px;
line-height:36px;
}
#content_small_tip{
position:absolute;
left:0;
top:0;
white-space:nowrap;
color: #EBEEF7;
}

JS部分

调用方式为

var content = "自8888年8月8日起原基础强化班和原全面提升班合并升级为全面提分班，原全面提升班和原全面提升班所剩课时在升级后的全面提分班自动顺延";
$("#content_small_tip").html(content);
roll(2,"#container_small_tip","#content_small_tip");

跑马灯函数封装为

//跑马灯插件start
function roll(speed=1,fatherselect,select){
if ($(fatherselect) == null) return;
var $container = $(fatherselect);//#container_small_tip
var $content = $(select);//#content_small_tip
var init_left = $container.width();
$content.css({ left: parseInt(init_left) + "px" });
var This = this;
var time = setInterval(function () {move($container, $content, speed); }, 20);                //setInterval会改变this指向，即使加了This=this，也要用匿名函数封装

$container.bind("mouseover", function () {
clearInterval(time);
});
$container.bind("mouseout", function () {
time = setInterval(function () {move($container, $content, speed); }, 20);
});
// setTimeout(function () { $("#container").slideUp(); }, 30000);  //毫秒单位，显示30s后消失
return this;
};
function move($container, $content, speed){
var container_width = $container.width();
var content_width = $content.width();
if (parseInt($content.css("left")) + content_width > 0) {
$content.css({ left: parseInt($content.css("left")) - speed + "px" });
$content.css({color:"#02A0E9"})//改变字体颜色
}
else {
$content.css({ left: parseInt(container_width) + "px" });
$content.css({color:"#02A0E9"})//改变字体颜色
}
}
//跑马灯插件end