粒子文字（原创）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="font/font.css" rel="stylesheet">
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script type="text/javascript" src="https://www.jq22.com/demo/PointText202408161233/js/PointText.js"></script>
<style>
body{
display:grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(4, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
place-items: center;
}
canvas {
height: 90vh;
width: auto;
grid-area: 1 / 1 / 5 / 6;
}
.show-div {
grid-area: 4 / 3 / 5 / 4;
}
</style>
</head>
<body>
<canvas id="time"></canvas>
<div class="show-div">
<button id="time-show">开关时钟</button>
<input id="input_text"></input><button id="btn">展示</button>
</div>
<script>
$(document).ready(function () {
let pointTextConfig=null,autoTime=true;
const canvas = $("#time");
function updateClock() {
if ($("#time").length === 0) {
return;
}
const now = new Date();
const text = now.getFullYear()+"-" +(now.getMonth() + 1).toString().padStart(2, '0')+"-" +now.getDate().toString().padStart(2, '0')+" " + now.getHours().toString().padStart(2, '0') + ":" + now.getMinutes().toString().padStart(2, '0') + ":" + now.getSeconds().toString().padStart(2, '0');
if (pointTextConfig){
pointTextConfig.setText(text);
}else {
pointTextConfig=PointText.initPointText(text,"#time",canvas.width(),canvas.height(),`${canvas.height() / 8 * devicePixelRatio}px 'digital numbers'`,'rgba(102,204,153,0.36)',3);
}
if(autoTime)
requestAnimationFrame(updateClock);
}
updateClock();
$("#time-show").on("click",function(e){
if (autoTime){
autoTime = false;
}else {
autoTime = true;
updateClock();
}
});
$("#btn").on("click",function(e){
if (pointTextConfig){
pointTextConfig.setText($("#input_text").val());
}else {
pointTextConfig=PointText.initPointText(text,"#time",canvas.width(),canvas.height(),`${canvas.height() / 8 * devicePixelRatio}px 'digital numbers'`,'rgba(102,204,153,0.36)',3);
}
});
});
</script>
</body>
</html>
页:
[1]