热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

黑马案例--时钟案例拆分(利用node.js将内嵌标签改为外联标签)

本文主要介绍关于node.js,css,css3的知识点,对【黑马案例--时钟案例拆分(利用node.js将内嵌标签改为外联标签)】和【1)SMA(AB】有兴趣的朋友可以看下由【龙眸】投稿的技术文章

本文主要介绍关于node.js,css,css3的知识点,对【黑马案例--时钟案例拆分(利用node.js将内嵌标签改为外联标签)】和【1)/SMA(AB】有兴趣的朋友可以看下由【龙眸】投稿的技术文章,希望该技术和经验能帮到你解决你所遇的笔记相关技术问题。

1)/SMA(AB

案例需求


案例实现步骤


步骤1


步骤2


步骤3


步骤4


步骤5

案例的两个注意点

①fs.writeFile() 方法只能用来创建文件,不能用来创建路径
②重复调用 fs.writeFile() 写入同一个文件,新写入的内容会覆盖之前的旧内容

内嵌html文件

    DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="token punctuation">"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>index首页
      title> <style> html, body {
        margin: 0; padding: 0; height: 100%; background-image: linear-gradient(to bottom right, red, gold); } .box {
        width: 400px; height: 250px; background-color: rgba(255, 255, 255, 0.6); border-radius: 6px; position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); box-shadow: 1px 1px 10px #fff; text-shadow: 0px 1px 30px white; display: flex; justify-content: space-around; align-items: center; font-size: 70px; user-select: none; padding: 0 20px; /* 盒子投影 */ -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0%, transparent), to(rgba(250, 250, 250, .2))); } 
       style> 
        head> <body> <div class="box"> <div id="HH">00
         div> <div>:
          div> <div id="mm">00
           div> <div>:
            div> <div id="ss">00
             div> 
              div> <script> window.onload = function() {
                // 定时器,每隔 1 秒执行 1 次 setInterval(() => {
                var dt = new Date() var HH = dt.getHours() var mm = dt.getMinutes() var ss = dt.getSeconds() // 为页面上的元素赋值 document.querySelector('#HH').innerHTML = padZero(HH) document.querySelector('#mm').innerHTML = padZero(mm) document.querySelector('#ss').innerHTML = padZero(ss) }, 1000) } // 补零函数 function padZero(n) {
                return n > 9 ? n : '0' + n } 
               script> 
                body> 
                 html> 
node.js拆分
// 1.1入fs模块
const fs = require('fs')
// 1.2导入path模块
const path = require('path')

// 1.3定义正则表达式,分别匹配 和标签
// \s匹配空白字符 \S匹配任意非空白字符
const regStyle = /

推荐阅读
  • Explore how Matterverse is redefining the metaverse experience, creating immersive and meaningful virtual environments that foster genuine connections and economic opportunities. ... [详细]
  • DNN Community 和 Professional 版本的主要差异
    本文详细解析了 DotNetNuke (DNN) 的两种主要版本:Community 和 Professional。通过对比两者的功能和附加组件,帮助用户选择最适合其需求的版本。 ... [详细]
  • RecyclerView初步学习(一)
    RecyclerView初步学习(一)ReCyclerView提供了一种插件式的编程模式,除了提供ViewHolder缓存模式,还可以自定义动画,分割符,布局样式,相比于传统的ListVi ... [详细]
  • 深入解析Android自定义View面试题
    本文探讨了Android Launcher开发中自定义View的重要性,并通过一道经典的面试题,帮助开发者更好地理解自定义View的实现细节。文章不仅涵盖了基础知识,还提供了实际操作建议。 ... [详细]
  • 优化ListView性能
    本文深入探讨了如何通过多种技术手段优化ListView的性能,包括视图复用、ViewHolder模式、分批加载数据、图片优化及内存管理等。这些方法能够显著提升应用的响应速度和用户体验。 ... [详细]
  • Windows服务与数据库交互问题解析
    本文探讨了在Windows 10(64位)环境下开发的Windows服务,旨在定期向本地MS SQL Server (v.11)插入记录。尽管服务已成功安装并运行,但记录并未正确插入。我们将详细分析可能的原因及解决方案。 ... [详细]
  • 本文详细介绍了 GWT 中 PopupPanel 类的 onKeyDownPreview 方法,提供了多个代码示例及应用场景,帮助开发者更好地理解和使用该方法。 ... [详细]
  • 本文详细介绍如何使用Python进行配置文件的读写操作,涵盖常见的配置文件格式(如INI、JSON、TOML和YAML),并提供具体的代码示例。 ... [详细]
  • 导航栏样式练习:项目实例解析
    本文详细介绍了如何创建一个具有动态效果的导航栏,包括HTML、CSS和JavaScript代码的实现,并附有详细的说明和效果图。 ... [详细]
  • IneedtofocusTextCellsonebyoneviaabuttonclick.ItriedlistView.ScrollTo.我需要通过点击按钮逐个关注Tex ... [详细]
  • Android 渐变圆环加载控件实现
    本文介绍了如何在 Android 中创建一个自定义的渐变圆环加载控件,该控件已在多个知名应用中使用。我们将详细探讨其工作原理和实现方法。 ... [详细]
  • ImmutableX Poised to Pioneer Web3 Gaming Revolution
    ImmutableX is set to spearhead the evolution of Web3 gaming, with its innovative technologies and strategic partnerships driving significant advancements in the industry. ... [详细]
  • 本文详细解析了Python中的os和sys模块,介绍了它们的功能、常用方法及其在实际编程中的应用。 ... [详细]
  • 本教程涵盖OpenGL基础操作及直线光栅化技术,包括点的绘制、简单图形绘制、直线绘制以及DDA和中点画线算法。通过逐步实践,帮助读者掌握OpenGL的基本使用方法。 ... [详细]
  • 本文详细介绍了 com.facebook.drawee.view.SimpleDraweeView 中的 setScaleType 方法,提供了多个实际代码示例,并解释了其在不同场景下的应用。 ... [详细]
author-avatar
UUUUUUUUUU8
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有