关注公众号
分享一个教你写字html静态页面源码
代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>SSL证书在线生成，SSL证书免费在线生成，HTTPS证书生成，免费证书生成-sslphp,无需登陆就能申请-在线工具箱大全-写字</title>
<meta name="description" content="在线免费SSL证书生成器，sslphp，在线生成用于学习测试使用的SSL域名证书，IP证书，https证书，您可以使用生成的证书发布HTTPS的站点.无需登陆就能申请">
<meta name="keywords" content="ssl证书在线生成，ssl证书生成，SSL，ssl certificate, sslphp https, certificate, ssl，https，ssl，sslphp.com，无需登陆就能申请ssl">
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css">
</head>
<!-- 引入Bootstrap的CSS文件 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css">
<!-- 引入jQuery文件 -->
<script type="text/javascript" src="http://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<!-- 引入hanzi-writer库 -->
<script type="text/javascript" src="http://cdn.jsdelivr.net/npm/hanzi-writer@3.0/dist/hanzi-writer.min.js"></script>
<link rel="icon" href="https://k.goolibao.com/favicon.ico">
<link href="/index/files/app.home.css" rel="stylesheet">
</head>
<body>
<div class="page-wrap product-page">
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-white border-bottom fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="/">
<!-- <span style="font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">厦门雄笙信息科技</span>-->
<img src="https://ssl.goolibao.com/static/images/logo1.png" height="30">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar">
<ul class="navbar-nav gap-2 mb-2 mb-lg-0 me-auto">
<!--
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">
产品
</a>
</li>
-->
<li class="nav-item">
<a class="nav-link" href="/ssl">证书控制台</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/tool">工具箱</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/code">商业支持</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/sp">赞助</a>
</li>
</ul>
<a href="#" class="btn btn-primary">
立即登录
</a>
</div>
</div>
</nav>
</header>
<style>
.product-page .banner .container .banner-content {
margin: 0 auto;
max-width: 780px;
padding-bottom: 0px;
}
.product-page .banner {
background: var(--bs-primary);
min-height: 423px;
padding-top: 64px;
}
</style>
<body>
<!-- 使用Bootstrap的class来美化页面 -->
<div class="container mt-5">
<h1 class="text-center my-5">在线教你写字工具</h1>
<div class="row justify-content-center mb-3">
<div class="col-md-4">
<input id="input" class="form-control form-control-lg" placeholder="请输入你要写的字" />
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-4">
<button id="btn" class="btn btn-primary btn-lg">开始教学</button>
</div>
</div>
<div class="row justify-content-center mt-5">
<div class="col-md-6">
<div id="container" class="card bg-light mb-3">
</div>
</div>
</div>
</div>
<!-- 引入Bootstrap的JavaScript文件 -->
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.1/js/bootstrap.bundle.min.js"></script>
<script type="application/javascript" src="/index/tool/z.js"></script>
</body>
</html>js代码：
const input = $('input');
const container = $("#container");
function play(writer) {
return new Promise((resolve) => {
writer.animateCharacter({
onComplete: () => {
resolve();
}
});
})
}
function chainWriters(writers) {
return writers.reduce((p, writer) => p.then(() => play(writer)), Promise.resolve())
}
$('#btn').on('click', () => {
const words = input.val().split('');
console.log(words)
container.empty()
const writers = words.map((character) => {
const itemDom = container.append('<div style="transform: rotate(180deg)"></div>');
return HanziWriter.create(itemDom.get(0), character, {
width: 50,
height: 100,
padding: 1,
showOutline: false,
showCharacter: false,
delayBetweenStrokes: 300
});
});
chainWriters(writers)
})
演示地址“
https://ssl.goolibao.com/tool
版权说明
文章采用： 《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权。版权声明：未标注转载均为本站原创，转载时请以链接形式注明文章出处。如有侵权、不妥之处，请联系站长删除。敬请谅解！
