node如何实现时钟效果 提取css和js脚本文件
dearweb
发布：2021-11-07 14:35:51阅读：
现在越来越多的前端开始使用node编程了，本文主要介绍node小案例，时钟展示，并且将css和js脚本文件抽离出来。
首先我们看下源代码
css与js脚本文件直接写入html中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html,body{
margin: 0;
padding: 0;
background: yellow;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.box{
width: 400px;
height: 200px;
background-color: rgba(255,255,255,.6);
display: flex;
align-items: center;
font-size: 80px;
justify-content: center
}
</style>
</head>
<body>
<div class="box">
<div id="box1">02</div>
<span>:</span>
<div id="box2">01</div>
<span>:</span>
<div id="box3">02</div>
</div>
<script>
setInterval(()=>{
let dt = new Date()
let HH = dt.getHours()
let mm = dt.getMinutes()
let ss = dt.getSeconds()
document.getElementById('box1').innerHTML = HH < 10 ? ('0' + HH) : HH
document.getElementById('box2').innerHTML = mm < 10 ? ('0' + mm) : mm
document.getElementById('box3').innerHTML = ss < 10 ? ('0' + ss) : ss
},1000)
</script>
</body>
</html>页面效果展示
下面我们开始进行文件抽离
总共分三步
抽离css，抽离js，生成新的html文件代码如下
const { Console } = require('console')
const fs = require('fs')
const path = require('path')
//匹配<style></style>标签的正则
// \s表示空白符 \S表示任意非空白符 *表示匹配任意次
const regStyle = /<style>[\s\S]*<\/style>/
// 匹配匹配<script></script> 标签的正则
const regScript = /<script>[\s\S]*<\/script>/
// 调用fs.readFile() 方法 读取文件
fs.readFile(path.join(__dirname,'./clock/index.html'),'utf-8',function(err,data){
if(err) return console.log('读取文件失败')
// 读取成功之后 调用对应的三个方法 分别拆解出 css , js ， html 文件
// 修改css文件
resolveCss(data)
// 修改js文件
resolveJs(data)
// 修改html文件
resolveHtml(data);
})
// 处理css方法
function resolveCss(data){
// 正则提取 css 并进行替换 style标签的处理
let resultCss = regStyle.exec(data)[0].replace('<style>','').replace('</style>',"")
// 将css样式写入css文件中
fs.writeFile(path.join(__dirname,'./clock/index.css'),resultCss,function(err){
if(err)return console.log('样式写入失败')
})
}
// 处理js
function resolveJs(data){
let resultJs = regScript.exec(data)[0].replace('<script>','').replace('</script>','')
// 将js写入文件中
fs.writeFile(path.join(__dirname,'./clock/index.js'),resultJs,function(err){
if(err)return console.log('脚本写入失败')
})
}
// 处理html
function resolveHtml(data){
// console.log(data.replace('html','9999'))
const newHtml = data.replace(regStyle,'<link rel="stylesheet" href="./index.css">').replace(regScript,'<script src="./index.js"></script>')
fs.writeFile(path.join(__dirname,'./clock/indexNew.html'),newHtml,function(err){
if(err)return console.log('写入文件失败')
console.log('文件写入成功')
})
}下图就是生成后的展示
注意点：
fs.writeFile() 不能创建文件夹路径，只能写入文件。
重复调用 fs.writeFile() 写入同一个文件，新写入的内容会覆盖之前的旧内容。
以上就是时钟的小案例，不足之处还望大神多多指教喔。
小礼物走一波，支持作者
赏还没有人赞赏，支持一波吧
