Node.js黑马时钟案例(本人详细介绍实现过程)

先上没有使用node.js之前的html部分代码

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html,
        body {
            height: 100%;
            overflow: hidden;
            background-image: linear-gradient(to bottom right, red, yellow);
        }
        .box,
        .box1 {
            position: absolute;
            left: 50%;
            margin-left: -300px;
            margin-top: 0px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            width: 600px;
            height: 400px;
            background-color: rgba(0, 0, 0, 0.2);
            font-size: 80px;
        }
        .box1 {
            transform: translateY(400px) rotate(180deg);
            background-color: rgba(255, 255, 255, 0.2);
        }
    style>
head>
<body>
    
    <div class="boss">
        
        <div class="box">
            <div class="hours">00div>
            <div>:div>
            <div class="minutes">00div>
            <div>:div>
            <div class="second">00div>
        div>
    div>
body>
<script>
    // 页面加载事件
    window.addEventListener("load", function () {
        // 获取box
        let box = document.querySelector(".box")
        // 获取boss
        let boss = document.querySelector(".boss")
        // 克隆box
        let divs = box.cloneNode(true)
        divs.className = "box1"
        boss.appendChild(divs)
        // 获取时分秒元素标签
        let times = document.querySelectorAll(".box > div")
        let times1 = document.querySelectorAll(".box1 > div")
        console.log(times1);
        function timer() {
            // 获取时分秒
            let nowDate = new Date()
            // 时
            let hours = nowDate.getHours()
            // 分
            let minutes = nowDate.getMinutes()
            // 秒
            let second = nowDate.getSeconds()
            // 添加到页面
            times[0].innerHTML = zero(hours)
            times[2].innerHTML = zero(minutes)
            times[4].innerHTML = zero(second)
            times1[0].innerHTML = zero(hours)
            times1[2].innerHTML = zero(minutes)
            times1[4].innerHTML = zero(second)
        }
        setInterval(timer, 1000)
        //补零
        function zero(n) {
            return n > 1 ? n : "0" + n
        }
    })
script>
html>

效果如下图所示:

Node.js黑马时钟案例(本人详细介绍实现过程)_第1张图片
我们的需求是什么?
使用nodejs创建文件

1.index.css
2.index.js
我们需要把style与script中的内容分别写入到这两个文件当中,然后替换掉html当中的style与script标签,替换为外链的方式

详细介绍实现过程,介绍在代码注释当中,请看代码:

// 引入fs模块
const fs = require("fs")
// 引入path模块
const path = require("path")
// 正则匹配
// 正则匹配style标签
// 需要使用\分离
// s表示空白字符 S表示非空白字符 *表示匹配所有
const regStyle = /","")
    // 我们需要使用writeFile的方法创建一个 .css的文件 然后把处理好的r[0]的内容写入进去
    fs.writeFile(path.join(__dirname,"index.css"),newStyle,"utf8",err=>{
        if(err){
            return err.message
        }
        console.log("成功")
    })
}
function resolveScript(value){
    // 使用exec方法去查找 查找到返回一个数组 没查找到返回null
    const r = regScript.exec(value)
    // 返回数组选中下标0
    // 做替换操作 我们需要把script标签去掉 所以替换为""
    const newScript = r[0].replace("","")
    // 我们需要使用writeFile的方法创建一个 .js的文件 然后把处理好的r[0]的内容写入进去
    fs.writeFile(path.join(__dirname,"index.js"),newScript,"utf8",err=>{
        if(err){
            return err.message
        }
        console.log("成功")
    })
}
// 最后我们需要操作html当中的标签内容 更改为外链的方法写入
function resolveHtml(value){
    // 处理style标签与script标签 外链进html文件中
    const newHtml = value.replace(regStyle,'').replace(
        regScript,''
    )
    // 我们把我们处理好的newHtml写入到旧的html当中
    fs.writeFile(path.join(__dirname,"index.html"),newHtml,"utf8",err=>{
        if(err){
            return err.message
        }
    })
}

当我们在终端运行之后:

Node.js黑马时钟案例(本人详细介绍实现过程)_第2张图片

文件被创建出来了,内容也分别添加进到了文件当中
我们来看看index.html部分

Node.js黑马时钟案例(本人详细介绍实现过程)_第3张图片

看看效果是否还是原来的样子:
Node.js黑马时钟案例(本人详细介绍实现过程)_第4张图片

感谢大家的阅读,如有不对的地方,可以向我提出,感谢大家!

你可能感兴趣的:(node.js)