布啦啦李

使用JavaScript设计一款简单的数字时钟

本文目录

使用 JavaScript 设计一款带日期显示的数字时钟
- 效果预览
- 1. 项目概述
- 2. HTML 结构
- - 代码说明
- 3. CSS 样式
- - 代码说明
- 4. JavaScript 逻辑
- - 代码说明
- 5. 运行效果

使用 JavaScript 设计一款带日期显示的数字时钟

本文将详细介绍如何使用 HTML、CSS 和 JavaScript 设计一款带日期显示的数字时钟。我们将逐步讲解每一行代码的作用，帮助你理解如何实现一个实时更新的时钟，并扩展功能以显示当前日期。

效果预览

1. 项目概述

我们的目标是创建一个简单的网页时钟，能够显示当前的日期和时间。日期和时间会每秒更新一次，确保显示的内容始终准确。我们将使用以下技术实现：

HTML：定义网页结构。
CSS：美化时钟的外观。
JavaScript：实现日期和时间的动态更新。

2. HTML 结构

HTML 部分负责创建网页的基本结构，并定义用于显示日期和时间的容器。

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>JavaScript Clock with Datetitle> 
    <link rel="stylesheet" href="styles.css"> 
head>
<body>
    <div class="clock"> 
        <div id="date">div> 
        <div id="time">div> 
    div>

    <script src="script.js">script> 
body>
html>

代码说明

：声明文档类型为 HTML5。
：设置页面的字符编码为 UTF-8，确保支持多语言字符。
：使页面在移动设备上正确缩放。
</code>：设置页面的标题，显示在浏览器的标签栏中。</li> <li><code><link rel="stylesheet"></code>：引入外部的 CSS 文件，用于美化页面。</li> <li><code><div class="clock"></code>：创建一个容器，用于包裹日期和时间。</li> <li><code><div id="date"></div></code>：用于显示日期的元素，JavaScript 会动态更新其内容。</li> <li><code><div id="time"></div></code>：用于显示时间的元素，JavaScript 会动态更新其内容。</li> <li><code><script src="script.js"></script></code>：引入外部的 JavaScript 文件，用于实现动态功能。</li> </ul> <hr> <h3>3. CSS 样式</h3> <p>CSS 部分负责美化时钟的外观，使其看起来更美观。</p> <pre><code class="prism language-css"><span class="token comment">/* styles.css */</span> <span class="token selector">body</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span> <span class="token comment">/* 使用Flexbox布局 */</span> <span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token comment">/* 水平居中 */</span> <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token comment">/* 垂直居中 */</span> <span class="token property">height</span><span class="token punctuation">:</span> 100vh<span class="token punctuation">;</span> <span class="token comment">/* 设置页面高度为视口的100% */</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #282828<span class="token punctuation">;</span> <span class="token comment">/* 设置背景颜色为深灰色 */</span> <span class="token property">font-family</span><span class="token punctuation">:</span> Arial<span class="token punctuation">,</span> sans-serif<span class="token punctuation">;</span> <span class="token comment">/* 设置字体 */</span> <span class="token punctuation">}</span> <span class="token selector">.clock</span> <span class="token punctuation">{</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #444<span class="token punctuation">;</span> <span class="token comment">/* 设置时钟背景颜色 */</span> <span class="token property">padding</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span> <span class="token comment">/* 设置内边距 */</span> <span class="token property">border-radius</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span> <span class="token comment">/* 设置圆角 */</span> <span class="token property">box-shadow</span><span class="token punctuation">:</span> 0 0 20px <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0.5<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">/* 添加阴影效果 */</span> <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token comment">/* 使内容居中 */</span> <span class="token punctuation">}</span> <span class="token selector">#date</span> <span class="token punctuation">{</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 24px<span class="token punctuation">;</span> <span class="token comment">/* 设置日期字体大小 */</span> <span class="token property">color</span><span class="token punctuation">:</span> #ccc<span class="token punctuation">;</span> <span class="token comment">/* 设置日期字体颜色为浅灰色 */</span> <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span> <span class="token comment">/* 在日期和时间之间添加间距 */</span> <span class="token punctuation">}</span> <span class="token selector">#time</span> <span class="token punctuation">{</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 48px<span class="token punctuation">;</span> <span class="token comment">/* 设置时间字体大小 */</span> <span class="token property">color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span> <span class="token comment">/* 设置时间字体颜色为白色 */</span> <span class="token punctuation">}</span> </code></pre> <h4>代码说明</h4> <ul> <li><code>display: flex</code>：使用 Flexbox 布局，使内容居中。</li> <li><code>justify-content: center</code>：水平居中。</li> <li><code>align-items: center</code>：垂直居中。</li> <li><code>height: 100vh</code>：设置页面高度为视口的 100%。</li> <li><code>background-color: #282828</code>：设置背景颜色为深灰色。</li> <li><code>font-family: Arial, sans-serif</code>：设置字体为 Arial，如果不可用则使用 sans-serif 字体。</li> <li><code>background-color: #444</code>：设置时钟容器的背景颜色。</li> <li><code>padding: 20px</code>：为时钟容器添加内边距。</li> <li><code>border-radius: 10px</code>：为时钟容器添加圆角。</li> <li><code>box-shadow</code>：为时钟容器添加阴影效果。</li> <li><code>text-align: center</code>：使内容居中。</li> <li><code>font-size: 24px</code>：设置日期文字的字体大小。</li> <li><code>color: #ccc</code>：设置日期文字的颜色为浅灰色。</li> <li><code>margin-bottom: 10px</code>：在日期和时间之间添加间距。</li> <li><code>font-size: 48px</code>：设置时间文字的字体大小。</li> <li><code>color: #fff</code>：设置时间文字的颜色为白色。</li> </ul> <hr> <h3>4. JavaScript 逻辑</h3> <p>JavaScript 部分负责获取当前日期和时间，并实时更新页面显示。</p> <pre><code class="prism language-javascript"><span class="token comment">// script.js</span> <span class="token keyword">function</span> <span class="token function">updateDateTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> dateElement <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'date'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 获取显示日期的元素</span> <span class="token keyword">const</span> timeElement <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'time'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 获取显示时间的元素</span> <span class="token keyword">const</span> now <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 获取当前时间</span> <span class="token comment">// 格式化日期</span> <span class="token keyword">const</span> year <span class="token operator">=</span> now<span class="token punctuation">.</span><span class="token function">getFullYear</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 获取年份（例如2023）</span> <span class="token keyword">const</span> month <span class="token operator">=</span> <span class="token function">String</span><span class="token punctuation">(</span>now<span class="token punctuation">.</span><span class="token function">getMonth</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">padStart</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token string">'0'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 获取月份（注意月份从0开始，需要加1）</span> <span class="token keyword">const</span> day <span class="token operator">=</span> <span class="token function">String</span><span class="token punctuation">(</span>now<span class="token punctuation">.</span><span class="token function">getDate</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">padStart</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token string">'0'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 获取日期</span> <span class="token keyword">const</span> dateString <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>year<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">-</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>month<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">-</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>day<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span> <span class="token comment">// 拼接日期字符串（例如2023-10-15）</span> <span class="token comment">// 格式化时间</span> <span class="token keyword">const</span> hours <span class="token operator">=</span> <span class="token function">String</span><span class="token punctuation">(</span>now<span class="token punctuation">.</span><span class="token function">getHours</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">padStart</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token string">'0'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 获取小时</span> <span class="token keyword">const</span> minutes <span class="token operator">=</span> <span class="token function">String</span><span class="token punctuation">(</span>now<span class="token punctuation">.</span><span class="token function">getMinutes</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">padStart</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token string">'0'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 获取分钟</span> <span class="token keyword">const</span> seconds <span class="token operator">=</span> <span class="token function">String</span><span class="token punctuation">(</span>now<span class="token punctuation">.</span><span class="token function">getSeconds</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">padStart</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token string">'0'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 获取秒数</span> <span class="token keyword">const</span> timeString <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>hours<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">:</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>minutes<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">:</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>seconds<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span> <span class="token comment">// 拼接时间字符串（例如14:05:09）</span> <span class="token comment">// 更新页面中的日期和时间</span> dateElement<span class="token punctuation">.</span>textContent <span class="token operator">=</span> dateString<span class="token punctuation">;</span> <span class="token comment">// 将日期字符串更新到页面中</span> timeElement<span class="token punctuation">.</span>textContent <span class="token operator">=</span> timeString<span class="token punctuation">;</span> <span class="token comment">// 将时间字符串更新到页面中</span> <span class="token punctuation">}</span> <span class="token function">setInterval</span><span class="token punctuation">(</span>updateDateTime<span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 每秒钟调用一次updateDateTime函数</span> <span class="token function">updateDateTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 初始化日期和时间，避免页面加载时的延迟</span> </code></pre> <h4>代码说明</h4> <ul> <li><code>document.getElementById('date')</code>：获取用于显示日期的元素。</li> <li><code>document.getElementById('time')</code>：获取用于显示时间的元素。</li> <li><code>new Date()</code>：创建一个 Date 对象，表示当前时间。</li> <li><code>now.getFullYear()</code>：获取当前年份（例如<code>2023</code>）。</li> <li><code>now.getMonth() + 1</code>：获取当前月份（注意：<code>getMonth()</code>返回的月份从 0 开始，所以需要加 1）。</li> <li><code>now.getDate()</code>：获取当前日期（例如<code>15</code>）。</li> <li><code>String().padStart(2, '0')</code>：将数字转换为字符串，并确保其为两位数（例如<code>1</code>变为<code>01</code>）。</li> <li><code>dateString</code>：将年、月、日拼接成<code>YYYY-MM-DD</code>格式的字符串（例如<code>2023-10-15</code>）。</li> <li><code>hours</code>、<code>minutes</code>、<code>seconds</code>：分别获取当前的小时、分钟和秒数，并格式化为两位数。</li> <li><code>timeString</code>：将小时、分钟和秒拼接成<code>HH:MM:SS</code>格式的字符串（例如<code>14:05:09</code>）。</li> <li><code>dateElement.textContent</code>：将日期字符串更新到页面中。</li> <li><code>timeElement.textContent</code>：将时间字符串更新到页面中。</li> <li><code>setInterval(updateDateTime, 1000)</code>：每秒钟调用一次<code>updateDateTime</code>函数，确保日期和时间实时更新。</li> <li><code>updateDateTime()</code>：在页面加载时立即调用一次，避免初始加载时的延迟。</li> </ul> <hr> <h3>5. 运行效果</h3> <p>将上述代码保存为 HTML 文件并在浏览器中打开，你会看到一个带有日期和时间的时钟。效果如下：</p> <p><a href="http://img.e-com-net.com/image/info8/555982276723415a919d3953731867a9.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/555982276723415a919d3953731867a9.png" alt="使用JavaScript设计一款简单的数字时钟_第2张图片" width="806" height="414" style="border:1px solid black;"></a></p> <ul> <li>日期显示在时间上方，字体稍小，颜色为浅灰色。</li> <li>时间显示在日期下方，字体较大，颜色为白色。</li> <li>日期和时间每秒更新一次。</li> </ul> <hr> </div> </div> </div> </div> </div>  <div id="SOHUCS" sid="1891246733363572736"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script>  <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad">  <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div>  <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div>  <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(javascript,时钟)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1950232820773351424.htm" title="移动端城市区县二级联动选择功能实现包" target="_blank">移动端城市区县二级联动选择功能实现包</a> <span class="text-muted">good2know</span> <div>本文还有配套的精品资源，点击获取简介：本项目是一套为移动端设计的jQuery实现方案，用于简化用户在选择城市和区县时的流程。它包括所有必需文件：HTML、JavaScript、CSS及图片资源。通过动态更新下拉菜单选项，实现城市到区县的联动效果，支持数据异步加载。开发者可以轻松集成此功能到移动网站或应用，并可基于需求进行扩展和优化。1.jQuery移动端解决方案概述jQuery技术简介jQuery</div> </li> <li><a href="/article/1950217304876838912.htm" title="STM32入门之TIM基本定时器" target="_blank">STM32入门之TIM基本定时器</a> <span class="text-muted">嵌入式白话</span> <a class="tag" taget="_blank" href="/search/STM32%E5%85%A5%E9%97%A8%E5%AD%A6%E4%B9%A0/1.htm">STM32入门学习</a><a class="tag" taget="_blank" href="/search/stm32/1.htm">stm32</a><a class="tag" taget="_blank" href="/search/%E5%B5%8C%E5%85%A5%E5%BC%8F%E7%A1%AC%E4%BB%B6/1.htm">嵌入式硬件</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E7%89%87%E6%9C%BA/1.htm">单片机</a> <div>一、定时器简介定时器是嵌入式系统中的关键外设之一，它可以用于生成精确的延时、周期性中断、PWM波形生成等功能。在STM32F1系列单片机中，定时器不仅能为系统提供精确的时钟，还支持外部事件的捕获以及信号输出。对于定时器的功能，我们可以通过一个生活中非常常见的例子来形象地描述：微波炉的定时器。想象你正在使用微波炉加热食物。在微波炉里，定时器的作用就是帮助你控制食物加热的时间。当你设置了加热时间后，定</div> </li> <li><a href="/article/1950194742100815872.htm" title="用代码生成艺术字：设计个性化海报的秘密" target="_blank">用代码生成艺术字：设计个性化海报的秘密</a> <span class="text-muted"></span> <div>本文围绕“用代码生成艺术字：设计个性化海报的秘密”展开，先概述代码生成艺术字在海报设计中的独特价值，接着介绍常用的代码工具（如HTML、CSS、JavaScript等），详细阐述从构思到实现的完整流程，包括字体样式设计、动态效果添加等，还分享了提升艺术字质感的技巧及实际案例。最后总结代码生成艺术字的优势，为设计师提供打造个性化海报的实用指南，助力提升海报设计的独特性与吸引力，符合搜索引擎SEO标准</div> </li> <li><a href="/article/1950144218282389504.htm" title="为什么学习Web前端一定要掌握JavaScript？" target="_blank">为什么学习Web前端一定要掌握JavaScript？</a> <span class="text-muted">web前端学习指南</span> <div>为什么学习Web前端一定要掌握JavaScript？在前端的世界里，没有什么是JavaScript实现不了的，关于JS有一句话：凡是可以用JavaScript来写的应用，最终都会用JavaScript，JavaScript可运行在所有主要平台的所有主流浏览器上，也可运行在每一个主流操作系统的服务器端上。现如今我们在为网站写任何一个主要功能的时候都需要有懂能够用JavaScript写前端的开发人员。</div> </li> <li><a href="/article/1950141537937584128.htm" title="USRP X440" target="_blank">USRP X440</a> <span class="text-muted">东枫科技</span> <a class="tag" taget="_blank" href="/search/fpga%E5%BC%80%E5%8F%91/1.htm">fpga开发</a> <div>产品概述USRPX440是EttusResearch推出的高性能、多通道、宽带软件定义无线电（SDR）系统。基于XilinxZynqUltraScale+RFSoC架构，它提供高密度、相干性的信号收发能力，帮助您快速构建雷达、电子战（EW）、卫星通信（SATCOM）及毫米波原型系统。核心特性8路独立可调谐Tx/Rx通道支持高达8路发射和8路接收，通道间时钟共享实现相位相干（同设备内< 1° RMS</div> </li> <li><a href="/article/1950130692448907264.htm" title="Vue CSR 到 Nuxt 3 SSR 迁移：技术实现与问题解决实录" target="_blank">Vue CSR 到 Nuxt 3 SSR 迁移：技术实现与问题解决实录</a> <span class="text-muted">二倍速播放</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a> <div>1.迁移动机与技术选型1.1CSR架构的局限性基于Vue3和Vite构建的客户端渲染(CSR)单页应用(SPA)提供了良好的开发体验和用户交互流畅性。但是其核心局限在于：搜索引擎优化(SEO)：初始HTML响应仅包含一个根div元素，实际内容由JavaScript在浏览器端动态生成。虽然主流搜索引擎（如Google）能够执行部分JavaScript，但其抓取效率和稳定性不如直接获取完整HTML。非</div> </li> <li><a href="/article/1950114810557427712.htm" title="12. 什么是事件委托" target="_blank">12. 什么是事件委托</a> <span class="text-muted">yqcoder</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95-CSS/1.htm">前端面试-CSS</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>总结事件委托（EventDelegation）是JavaScript中一种重要的事件处理机制，它利用了事件冒泡的特性，将事件的处理程序绑定到父元素或祖先元素上，而不是直接绑定到具体的子元素上。什么是事件委托？事件冒泡：在DOM中，事件通常会从触发元素开始，然后逐级向上冒泡到其父元素、祖先元素，直到window对象。核心思想：事件委托的核心思想是利用事件冒泡机制，在父元素上监听事件，而不是在每个子元</div> </li> <li><a href="/article/1950075480849838080.htm" title="关于前端的性能优化" target="_blank">关于前端的性能优化</a> <span class="text-muted"></span> <div>性能优化主要涵盖了以下四个方面：(tip:仅代表个人总结，如有不当，还希望看到的大佬多多指示)减少网络请求：合并文件、使用CDN、启用缓存。优化资源加载：代码分割、懒加载、图片压缩。提升渲染性能：减少重绘回流、防抖节流、使用WebWorker。监控和迭代：定期使用工具检测性能，持续优化。一、网络层面优化减少HTTP请求合并文件：将多个CSS或JavaScript文件合并成一个，减少请求次数。使用C</div> </li> <li><a href="/article/1950074093608955904.htm" title="时间组件库Day.js那些事" target="_blank">时间组件库Day.js那些事</a> <span class="text-muted">前端小白花</span> <a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a> <div>一、简介1.什么是Day.jsDay.js是一个轻量级，易于使用的JavaScript日期库，提供了强大的日期和时间处理功能，与Moment.js的API设计相似，但具有更高的性能和更小的体积。Day.js官网https://day.js.org/docs/zh-CN/installation/installation2.优势a.特点轻量级：Dayjs的压缩后大小只有2KB左右，远小于Moment</div> </li> <li><a href="/article/1950071066281963520.htm" title="JavaScript正则表达式去除括号但保留内容与去除括号与内容" target="_blank">JavaScript正则表达式去除括号但保留内容与去除括号与内容</a> <span class="text-muted">Selicens</span> <a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/1.htm">正则表达式</a> <div>项目上碰到一个需求，是取多个递增文件的文件名，类似于test(1).txt、test(2).txt，但是不需要括号，只要test1、test2这种格式，最开始想到的办法就是js里的replace替换，先上一个比较笨但是也能实现效果的例子letname="test(1).txt"letdata=name.split('.')[0].replace('(','').replace(')','')con</div> </li> <li><a href="/article/1950042324155297792.htm" title="网络安全第14集" target="_blank">网络安全第14集</a> <span class="text-muted">不灭锦鲤</span> <a class="tag" taget="_blank" href="/search/web%E5%AE%89%E5%85%A8/1.htm">web安全</a><a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%85%A8/1.htm">安全</a> <div>前言：小迪安全14集，这集重点内容：0、什么是js渗透测试？在javascript中也存在变量和函数，存在可控变量和函数就有可能存在在漏洞，js开发的web应用和php、java开发的区别是，js能看得到的源代码，php看不到，但是风险就是未授权访问、配置信息泄露（加密算法、key秘钥等），源代码看得到，存在更多的url泄露，从而可能会出现未授权访问，从url，前提：web应用可以采用前端语言或后</div> </li> <li><a href="/article/1950040812469415936.htm" title="25年不倒的“犀牛书“：为什么《JavaScript权威指南第7版》仍是程序员的案头圣经？" target="_blank">25年不倒的“犀牛书“：为什么《JavaScript权威指南第7版》仍是程序员的案头圣经？</a> <span class="text-muted">阿蒙Armon</span> <a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a> <div>25年不倒的"犀牛书"：为什么《JavaScript权威指南第7版》仍是程序员的案头圣经？当一本技术书能连续畅销25年，历经7次迭代仍稳坐领域第一梯队，它必然藏着超越时代的硬实力。《JavaScript权威指南（原书第7版）》就是这样一部传奇——豆瓣9.4分的封神之作，程序员口中的"犀牛书"，从网景时代到ES2020，它始终是JavaScript开发者的终极参考书。如果你还在为原型链、闭包、异步编</div> </li> <li><a href="/article/1949999827764965376.htm" title="Stm32中USB 对时钟的要求" target="_blank">Stm32中USB 对时钟的要求</a> <span class="text-muted">lixzest</span> <a class="tag" taget="_blank" href="/search/stm32/1.htm">stm32</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E7%89%87%E6%9C%BA/1.htm">单片机</a><a class="tag" taget="_blank" href="/search/%E5%B5%8C%E5%85%A5%E5%BC%8F%E7%A1%AC%E4%BB%B6/1.htm">嵌入式硬件</a> <div>1.USB对时钟的要求USB外设通常需要精确的48MHz时钟（全速USBFS模式），这个时钟可以由以下方式提供：HSI48（内部48MHzRC振荡器）PLL（锁相环，例如从HSI/HSE倍频得到48MHz）外部晶振（HSE+PLL分频/倍频）如果你的USB驱动需要使用内部RC振荡器（而不是外部晶振），那么HSI48必须启用，否则USB无法正常工作。2.当前配置的分析RCC_OscInitStruc</div> </li> <li><a href="/article/1949995914462556160.htm" title="什么是JSON，如何与Java对象转化" target="_blank">什么是JSON，如何与Java对象转化</a> <span class="text-muted">doublez234</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/json/1.htm">json</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a> <div>JSON概念JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式。它易于人阅读和编写，同时也易于机器解析和生成。JSON基于JavaScript（ECMAScript（欧洲计算机协会制定的js规范））编程语言的一个子集，但它是一种独立于语言的数据格式，被广泛应用于各种编程语言和平台之间的数据交换。JSON的主要特点：轻量级：JSON格式非常简洁，只包含必要的数据信</div> </li> <li><a href="/article/1949975484238458880.htm" title="APP开发入门：了解主流的编程语言" target="_blank">APP开发入门：了解主流的编程语言</a> <span class="text-muted">agi大模型</span> <a class="tag" taget="_blank" href="/search/Python/1.htm">Python</a><a class="tag" taget="_blank" href="/search/%E8%81%8C%E4%B8%9A%E4%B8%8E%E8%81%8C%E5%9C%BA/1.htm">职业与职场</a><a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98/1.htm">程序员</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%88%86%E6%9E%90/1.htm">数据分析</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B%E8%AF%AD%E8%A8%80/1.htm">编程语言</a> <div>前言在过去的几年里，有许多程序员开始学习和使用编程语言。这其中包括C、C++、Java和Python。尽管有许多语言可供选择，但大多数程序员都会选择最容易学习的编程语言。如今，有很多编程语言供选择。程序员们在学习这些语言时可以自由地选择他们喜欢的方式，因为他们的目标是构建任何软件，而不仅仅是创建一个应用程序。你可以在Linux上学习C/C++、Java、Python、C#或JavaScript，你</div> </li> <li><a href="/article/1949928456414359552.htm" title="探秘CommonJS：Node.js模块化核心解析" target="_blank">探秘CommonJS：Node.js模块化核心解析</a> <span class="text-muted"></span> <div>CommonJS是JavaScript的模块化规范，主要应用于服务器端环境（尤其是Node.js），其核心目标是解决代码组织、依赖管理和作用域隔离问题。以下是其核心要点：一、核心特性同步加载模块通过require()同步加载并执行，后续代码需等待模块加载完成后执行，适用于I/O快速的服务器环境（如本地文件读取）。作用域隔离每个文件视为独立模块，模块内定义的变量、函数默认私有（不污染全局作用域），仅</div> </li> <li><a href="/article/1949926944988524544.htm" title="壹脉销客AI电子名片源码核心架构" target="_blank">壹脉销客AI电子名片源码核心架构</a> <span class="text-muted"></span> <div>为什么选择源码部署AI电子名片？在数字化转型浪潮中，越来越多的企业意识到拥有自主可控的电子名片系统的重要性。源码部署相比SaaS服务具有三大核心优势：数据完全自主-客户信息存储在企业自有服务器深度定制自由-可根据业务需求二次开发长期成本优化-一次部署永久使用壹脉销客AI电子名片源码核心架构壹脉销客提供的企业级电子名片解决方案采用前后端分离架构：前端技术栈（小程序端）javascript//小程序a</div> </li> <li><a href="/article/1949918371738873856.htm" title="vue 进入一个页面，然后离开这个页面他就重新加载" target="_blank">vue 进入一个页面，然后离开这个页面他就重新加载</a> <span class="text-muted">Java&Develop</span> <a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a> <div>vue进入一个页面，然后离开这个页面他就重新加载这个代码导致的注释即可window.location.reload();window.location.reload()是JavaScript中的一个方法，用于强制刷新当前页面（重新加载页面内容）。其作用类似于用户手动点击浏览器的刷新按钮，但可以通过代码精确触发。核心作用：刷新页面重新加载当前显示的文档（即重新请求当前URL的资源）。可选参数控制缓存</div> </li> <li><a href="/article/1949898570761039872.htm" title="[python][flask]flask静态资源" target="_blank">[python][flask]flask静态资源</a> <span class="text-muted"></span> <div>在Flask中，静态资源（如图片、CSS文件、JavaScript文件等）通常存储在项目的static文件夹中。Flask会自动为静态资源提供服务，使得你可以通过URL访问这些文件。以下是关于Flask中静态资源的使用方法和一些高级配置。1.默认静态文件夹Flask默认会将项目根目录下的static文件夹作为静态资源目录。例如，如果你的项目结构如下：my_flask_app/│├──app.py├</div> </li> <li><a href="/article/1949894278360657920.htm" title="JavaScript对象与Math对象完全指南" target="_blank">JavaScript对象与Math对象完全指南</a> <span class="text-muted">hui函数</span> <a class="tag" taget="_blank" href="/search/Javascript/1.htm">Javascript</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>JavaScript对象与Math对象完全指南对象基础概念与操作对象是什么？数据集合：包含相关数据和功能的容器结构组成：属性：描述对象特征的变量（名词性）方法：对象可执行的操作（动词性，本质是函数）对象创建与访问//创建对象letperson={ //属性 name:"张三", age:28, profession:"软件工程师", //方法 introduce(){ return`大家好，我</div> </li> <li><a href="/article/1949892133389398016.htm" title="深入理解JavaScript作用域与编译过程" target="_blank">深入理解JavaScript作用域与编译过程</a> <span class="text-muted">君子心理</span> <a class="tag" taget="_blank" href="/search/%E4%BD%9C%E7%94%A8%E5%9F%9F/1.htm">作用域</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E8%AF%91/1.htm">编译</a><a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/%E5%8F%98%E9%87%8F%E6%8F%90%E5%8D%87/1.htm">变量提升</a><a class="tag" taget="_blank" href="/search/%E9%97%AD%E5%8C%85/1.htm">闭包</a> <div>背景简介在编程领域，作用域和编译过程是理解语言机制的关键概念。JavaScript作为一种广泛使用的语言，其作用域规则和编译机制尤其值得我们深入探讨。本文将基于《你不懂JS》系列书籍中的相关内容，解析JavaScript的作用域系统、函数闭包以及编译过程，帮助读者获得更深层次的理解。作用域是什么？在JavaScript中，作用域定义了变量和函数的可访问范围。编写程序时，我们会频繁使用变量来存储和操</div> </li> <li><a href="/article/1949892007069544448.htm" title="掌握JavaScript对象与函数：深入理解原型与作用域" target="_blank">掌握JavaScript对象与函数：深入理解原型与作用域</a> <span class="text-muted">土城三富</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/%E5%AF%B9%E8%B1%A1/1.htm">对象</a><a class="tag" taget="_blank" href="/search/%E5%8E%9F%E5%9E%8B%E9%93%BE/1.htm">原型链</a><a class="tag" taget="_blank" href="/search/%E5%87%BD%E6%95%B0/1.htm">函数</a><a class="tag" taget="_blank" href="/search/%E4%BD%9C%E7%94%A8%E5%9F%9F/1.htm">作用域</a> <div>掌握JavaScript对象与函数：深入理解原型与作用域背景简介在探索JavaScript的世界时，我们经常遇到对象和函数这两个核心概念。对象是JavaScript中最为基本的结构之一，而函数则是实现代码复用、封装和模块化的主要工具。本文将基于给定的书籍章节内容，深入探讨对象的更新机制、原型继承以及函数的多样性及其调用模式，同时分享对全局变量使用的思考。更新对象在JavaScript中，对象的属性</div> </li> <li><a href="/article/1949891377278021632.htm" title="JavaScript函数使用模式与作用域的深入解析" target="_blank">JavaScript函数使用模式与作用域的深入解析</a> <span class="text-muted"></span> <div>JavaScript函数使用模式与作用域的深入解析JavaScript作为一门灵活且功能强大的编程语言，其函数的使用和作用域的特性是学习和开发中的关键点。本篇博客将深入解析JavaScript函数的几种使用模式，以及作用域的重要概念。构造器模式在JavaScript中，函数可以作为构造器（constructor）使用，当用new关键字调用时，函数会返回一个新对象。为了区分构造器函数和其他普通函数，</div> </li> <li><a href="/article/1949890620248092672.htm" title="掌握JavaScript函数和作用域：提高代码复用性" target="_blank">掌握JavaScript函数和作用域：提高代码复用性</a> <span class="text-muted">捕风捉你</span> <a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a> <div>在JavaScript编程中，函数是一个核心概念，它不仅能帮助我们将代码组织得更加清晰，还能提高代码的复用性。理解函数的定义与调用、掌握作用域的概念，对于编写高效和可维护的代码至关重要。本文将通过创建一个计时器应用的案例，帮助你全面掌握JavaScript中的函数和作用域知识。任务目标通过本教程，你将学习并掌握：函数的声明与调用函数表达式的使用作用域的概念及其在函数中的应用闭包的原理及实践学习内容</div> </li> <li><a href="/article/1949887845539835904.htm" title="JavaScript 函数与作用域" target="_blank">JavaScript 函数与作用域</a> <span class="text-muted">前端人类学</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/-/1.htm">-</a><a class="tag" taget="_blank" href="/search/%E8%A1%8C%E4%B8%BA/1.htm">行为</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%87%BD%E6%95%B0/1.htm">函数</a><a class="tag" taget="_blank" href="/search/%E4%BD%9C%E7%94%A8%E5%9F%9F/1.htm">作用域</a><a class="tag" taget="_blank" href="/search/%E9%97%AD%E5%8C%85/1.htm">闭包</a><a class="tag" taget="_blank" href="/search/%E9%80%92%E5%BD%92/1.htm">递归</a><a class="tag" taget="_blank" href="/search/%E4%BD%9C%E7%94%A8%E5%9F%9F%E9%93%BE/1.htm">作用域链</a> <div>Hi，我是布兰妮甜！JavaScript是一种动态类型语言，它支持面向对象编程和函数式编程。函数是JavaScript的核心组成部分之一，而作用域则决定了变量的可见性和生命周期。本文将详细介绍JavaScript中的函数定义、调用、参数传递、闭包、递归以及作用域链的概念。文章目录一、函数基础二、作用域基础三、闭包四、递归五、作用域链六、总结一、函数基础1.定义函数函数声明函数可以通过函数声明的方式</div> </li> <li><a href="/article/1949884694208245760.htm" title="深入理解作用域【JavaScript】" target="_blank">深入理解作用域【JavaScript】</a> <span class="text-muted">陆仟</span> <a class="tag" taget="_blank" href="/search/Web%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/1.htm">Web前端开发</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>一、作用域的内部原理JavaScript的作用域机制是理解变量如何被访问和存储的重要概念。下面详细介绍作用域的内部原理，包括编译、执行、查询、嵌套和异常处理这五个步骤。1.编译在JavaScript的执行过程中，首要的步骤是编译。尽管JavaScript是解释性语言，但现代JavaScript引擎（如V8）在执行代码前会先进行编译。编译阶段主要完成以下几项工作：词法分析：将源代码分解成语法单元（t</div> </li> <li><a href="/article/1949875239387197440.htm" title="即便你已经在浏览器中启用了 JavaScript有时网页依然可能出现功能失效、内容加载不完整或按钮点击无反应等问题。这些问题通常由 JavaScript 冲突" target="_blank">即便你已经在浏览器中启用了 JavaScript有时网页依然可能出现功能失效、内容加载不完整或按钮点击无反应等问题。这些问题通常由 JavaScript 冲突</a> <span class="text-muted"></span> <div>即便你已经在浏览器中启用了JavaScript有时网页依然可能出现功能失效、内容加载不完整或按钮点击无反应等问题。这些问题通常由JavaScript冲突、浏览器设置不当或插件干扰等原因引起。作为HostEase的技术人员我将为你提供一系列简单有效的JavaScript故障排除方法帮助你快速定位并解决这些问题。禁用可能干扰JavaScript的浏览器扩展,广告拦截器,安全插件或某些脚本管理器可能会干</div> </li> <li><a href="/article/1949872340728868864.htm" title="技术文章大纲：Anaconda插件开发挑战赛引言介绍Anaconda在数据科学和PythonUH开发中的重要性" target="_blank">技术文章大纲：Anaconda插件开发挑战赛引言介绍Anaconda在数据科学和PythonUH开发中的重要性</a> <span class="text-muted">aadwje</span> <a class="tag" taget="_blank" href="/search/eclipse/1.htm">eclipse</a><a class="tag" taget="_blank" href="/search/ide/1.htm">ide</a> <div>即便你已经在浏览器中启用了JavaScript有时网页依然可能出现功能失效、内容加载不完整或按钮点击无反应等问题。这些问题通常由JavaScript冲突、浏览器设置不当或插件干扰等原因引起。作为HostEase的技术人员我将为你提供一系列简单有效的JavaScript故障排除方法帮助你快速定位并解决这些问题。禁用可能干扰JavaScript的浏览器扩展,广告拦截器,安全插件或某些脚本管理器可能会干</div> </li> <li><a href="/article/1949842378927960064.htm" title="浪漫时光徐斌赵雨妍热门网络小说推荐_热门小说免费阅读浪漫时光(徐斌赵雨妍)" target="_blank">浪漫时光徐斌赵雨妍热门网络小说推荐_热门小说免费阅读浪漫时光(徐斌赵雨妍)</a> <span class="text-muted">喵喵美文</span> <div>《浪漫时光》主角：徐斌赵雨妍，简介：徐斌最近魔塄似得迷上了自己30岁的小妈赵雨妍！关注微信公众号【时钟文学】去回复个书号【1193】即可阅读小说【浪漫时光】全文内容！！！小妈赵雨妍年轻漂亮，身高167，身材堪比模特..徐斌父亲叫徐大林，今年五十了。徐大林自从娶了身材火辣的赵雨妍，夜夜笙歌的声音。徐斌家住在蓝月湾别墅，他拉开窗帘，看着别墅里激情的画面，简直被折磨得受不了！别墅内，窗外露天的泳池旁；赵</div> </li> <li><a href="/article/1949803748612173824.htm" title="深入分析 Node.js 的 V8 引擎如何在内部处理 JavaScript 代码，包括内存管理和垃圾回收机制。" target="_blank">深入分析 Node.js 的 V8 引擎如何在内部处理 JavaScript 代码，包括内存管理和垃圾回收机制。</a> <span class="text-muted">海派程序猿</span> <a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>各位观众老爷们，晚上好！今天咱们就来聊聊Node.js的大心脏——V8引擎，看看它到底是怎么把咱们写的JavaScript代码给“消化”掉的。别害怕，今天咱不搞那些生涩难懂的学院派理论，尽量用大白话，外加一些“栗子”，保证让你听得津津有味。V8引擎：JavaScript的超级翻译官首先，简单介绍一下V8。V8是Google开发的高性能JavaScript和WebAssembly引擎，用C++写的。</div> </li> <li><a href="/article/71.htm" title="Linux的Initrd机制" target="_blank">Linux的Initrd机制</a> <span class="text-muted">被触发</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>Linux 的 initrd 技术是一个非常普遍使用的机制，linux2.6 内核的 initrd 的文件格式由原来的文件系统镜像文件转变成了 cpio 格式，变化不仅反映在文件格式上， linux 内核对这两种格式的 initrd 的处理有着截然的不同。本文首先介绍了什么是 initrd 技术，然后分别介绍了 Linux2.4 内核和 2.6 内核的 initrd 的处理流程。最后通过对 Lin</div> </li> <li><a href="/article/198.htm" title="maven本地仓库路径修改" target="_blank">maven本地仓库路径修改</a> <span class="text-muted">bitcarter</span> <a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a> <div>默认maven本地仓库路径：C:\Users\Administrator\.m2 修改maven本地仓库路径方法： 1.打开E:\maven\apache-maven-2.2.1\conf\settings.xml 2.找到 </div> </li> <li><a href="/article/325.htm" title="XSD和XML中的命名空间" target="_blank">XSD和XML中的命名空间</a> <span class="text-muted">darrenzhu</span> <a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a><a class="tag" taget="_blank" href="/search/xsd/1.htm">xsd</a><a class="tag" taget="_blank" href="/search/schema/1.htm">schema</a><a class="tag" taget="_blank" href="/search/namespace/1.htm">namespace</a><a class="tag" taget="_blank" href="/search/%E5%91%BD%E5%90%8D%E7%A9%BA%E9%97%B4/1.htm">命名空间</a> <div>http://www.360doc.com/content/12/0418/10/9437165_204585479.shtml http://blog.csdn.net/wanghuan203/article/details/9203621 http://blog.csdn.net/wanghuan203/article/details/9204337 http://www.cn</div> </li> <li><a href="/article/452.htm" title="Java 求素数运算" target="_blank">Java 求素数运算</a> <span class="text-muted">周凡杨</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E7%B4%A0%E6%95%B0/1.htm">素数</a> <div>网络上对求素数之解数不胜数，我在此总结归纳一下，同时对一些编码，加以改进，效率有成倍热提高。第一种：原理: 6N(+-)1法任何一个自然数，总可以表示成为如下的形式之一： 6N，6N+1，6N+2，6N+3，6N+4，6N+5 (N=0，1，2，…) </div> </li> <li><a href="/article/579.htm" title="java 单例模式" target="_blank">java 单例模式</a> <span class="text-muted">g21121</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>想必单例模式大家都不会陌生，有如下两种方式来实现单例模式： class Singleton { private static Singleton instance=new Singleton(); private Singleton(){} static Singleton getInstance() { return instance; }</div> </li> <li><a href="/article/706.htm" title="Linux下Mysql源码安装" target="_blank">Linux下Mysql源码安装</a> <span class="text-muted">510888780</span> <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div>1.假设已经有mysql-5.6.23-linux-glibc2.5-x86_64.tar.gz (1)创建mysql的安装目录及数据库存放目录解压缩下载的源码包，目录结构，特殊指定的目录除外： </div> </li> <li><a href="/article/833.htm" title="32位和64位操作系统" target="_blank">32位和64位操作系统</a> <span class="text-muted">墙头上一根草</span> <a class="tag" taget="_blank" href="/search/32%E4%BD%8D%E5%92%8C64%E4%BD%8D%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F/1.htm">32位和64位操作系统</a> <div>32位和64位操作系统是指：CPU一次处理数据的能力是32位还是64位。现在市场上的CPU一般都是64位的，但是这些CPU并不是真正意义上的64 位CPU，里面依然保留了大部分32位的技术，只是进行了部分64位的改进。32位和64位的区别还涉及了内存的寻址方面，32位系统的最大寻址空间是2 的32次方= 4294967296（bit）= 4（GB）左右，而64位系统的最大寻址空间的寻址空间则达到了</div> </li> <li><a href="/article/960.htm" title="我的spring学习笔记10-轻量级_Spring框架" target="_blank">我的spring学习笔记10-轻量级_Spring框架</a> <span class="text-muted">aijuans</span> <a class="tag" taget="_blank" href="/search/Spring+3/1.htm">Spring 3</a> <div>一、问题提问： → 请简单介绍一下什么是轻量级？轻量级（Leightweight）是相对于一些重量级的容器来说的，比如Spring的核心是一个轻量级的容器，Spring的核心包在文件容量上只有不到1M大小，使用Spring核心包所需要的资源也是很少的，您甚至可以在小型设备中使用Spring。 </div> </li> <li><a href="/article/1087.htm" title="mongodb 环境搭建及简单CURD" target="_blank">mongodb 环境搭建及简单CURD</a> <span class="text-muted">antlove</span> <a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/Install/1.htm">Install</a><a class="tag" taget="_blank" href="/search/curd/1.htm">curd</a><a class="tag" taget="_blank" href="/search/NoSQL/1.htm">NoSQL</a><a class="tag" taget="_blank" href="/search/mongo/1.htm">mongo</a> <div>一搭建mongodb环境 1. 在mongo官网下载mongodb 2. 在本地创建目录 "D:\Program Files\mongodb-win32-i386-2.6.4\data\db" 3. 运行mongodb服务 [mongod.exe --dbpath "D:\Program Files\mongodb-win32-i386-2.6.4\data\</div> </li> <li><a href="/article/1214.htm" title="数据字典和动态视图" target="_blank">数据字典和动态视图</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%AD%97%E5%85%B8/1.htm">数据字典</a><a class="tag" taget="_blank" href="/search/%E5%8A%A8%E6%80%81%E8%A7%86%E5%9B%BE/1.htm">动态视图</a><a class="tag" taget="_blank" href="/search/%E7%B3%BB%E7%BB%9F%E5%92%8C%E5%AF%B9%E8%B1%A1%E6%9D%83%E9%99%90/1.htm">系统和对象权限</a> <div>数据字典（data dictionary）是 Oracle 数据库的一个重要组成部分，这是一组用于记录数据库信息的只读（read-only）表。随着数据库的启动而启动,数据库关闭时数据字典也关闭数据字典中包含数据库中所有方案对象（schema object）的定义(包括表，视图，索引，簇，同义词，序列，过程，函数，包，触发器等等) 数据库为一</div> </li> <li><a href="/article/1341.htm" title="多线程编程一般规则" target="_blank">多线程编程一般规则</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/thread/1.htm">thread</a><a class="tag" taget="_blank" href="/search/%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">多线程</a><a class="tag" taget="_blank" href="/search/java%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">java多线程</a> <div> 如果两个工两个以上的线程都修改一个对象，那么把执行修改的方法定义为被同步的，如果对象更新影响到只读方法，那么只读方法也要定义成同步的。不要滥用同步。如果在一个对象内的不同的方法访问的不是同一个数据，就不要将方法设置为synchronized的。 </div> </li> <li><a href="/article/1468.htm" title="将文件或目录拷贝到另一个Linux系统的命令scp" target="_blank">将文件或目录拷贝到另一个Linux系统的命令scp</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/unix/1.htm">unix</a><a class="tag" taget="_blank" href="/search/scp/1.htm">scp</a> <div>一.功能说明 scp就是security copy，用于将文件或者目录从一个Linux系统拷贝到另一个Linux系统下。scp传输数据用的是SSH协议，保证了数据传输的安全，其格式如下： scp 远程用户名@IP地址：文件的绝对路径</div> </li> <li><a href="/article/1595.htm" title="【持久化框架MyBatis3五】MyBatis3一对多关联查询" target="_blank">【持久化框架MyBatis3五】MyBatis3一对多关联查询</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/Mybatis3/1.htm">Mybatis3</a> <div>以教员和课程为例介绍一对多关联关系，在这里认为一个教员可以叫多门课程，而一门课程只有1个教员教，这种关系在实际中不太常见，通过教员和课程是多对多的关系。示例数据：地址表： CREATE TABLE ADDRESSES ( ADDR_ID INT(11) NOT NULL AUTO_INCREMENT, STREET VAR</div> </li> <li><a href="/article/1722.htm" title="cookie状态判断引发的查找问题" target="_blank">cookie状态判断引发的查找问题</a> <span class="text-muted">bitcarter</span> <a class="tag" taget="_blank" href="/search/form/1.htm">form</a><a class="tag" taget="_blank" href="/search/cgi/1.htm">cgi</a> <div>先说一下我们的业务背景： 1.前台将图片和文本通过form表单提交到后台，图片我们都做了base64的编码，并且前台图片进行了压缩 2.form中action是一个cgi服务 3.后台cgi服务同时供PC，H5，APP 4.后台cgi中调用公共的cookie状态判断方法（公共的，大家都用，几年了没有问题）问题：（折腾两天。。。。） 1.PC端cgi服务正常调用，cookie判断没</div> </li> <li><a href="/article/1849.htm" title="通过Nginx,Tomcat访问日志(access log)记录请求耗时" target="_blank">通过Nginx,Tomcat访问日志(access log)记录请求耗时</a> <span class="text-muted">ronin47</span> <div>一、Nginx通过$upstream_response_time $request_time统计请求和后台服务响应时间 nginx.conf使用配置方式： log_format main '$remote_addr - $remote_user [$time_local] "$request" ''$status $body_bytes_sent "$http_r</div> </li> <li><a href="/article/1976.htm" title="java-67- n个骰子的点数。把n个骰子扔在地上，所有骰子朝上一面的点数之和为S。输入n，打印出S的所有可能的值出现的概率。" target="_blank">java-67- n个骰子的点数。把n个骰子扔在地上，所有骰子朝上一面的点数之和为S。输入n，打印出S的所有可能的值出现的概率。</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div> public class ProbabilityOfDice { /** * Q67 n个骰子的点数 * 把n个骰子扔在地上，所有骰子朝上一面的点数之和为S。输入n，打印出S的所有可能的值出现的概率。 * 在以下求解过程中，我们把骰子看作是有序的。 * 例如当n=2时，我们认为（1，2）和（2，1）是两种不同的情况 */ private stati</div> </li> <li><a href="/article/2103.htm" title="看别人的博客，觉得心情很好" target="_blank">看别人的博客，觉得心情很好</a> <span class="text-muted">Cb123456</span> <a class="tag" taget="_blank" href="/search/%E5%8D%9A%E5%AE%A2/1.htm">博客</a><a class="tag" taget="_blank" href="/search/%E5%BF%83%E6%83%85/1.htm">心情</a> <div> 以为写博客，就是总结，就和日记一样吧，同时也在督促自己。今天看了好长时间博客: 职业规划: http://www.iteye.com/blogs/subjects/zhiyeguihua android学习: 1.http://byandby.i</div> </li> <li><a href="/article/2230.htm" title="[JWFD开源工作流]尝试用原生代码引擎实现循环反馈拓扑分析" target="_blank">[JWFD开源工作流]尝试用原生代码引擎实现循环反馈拓扑分析</a> <span class="text-muted">comsci</span> <a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C%E6%B5%81/1.htm">工作流</a> <div> 我们已经不满足于仅仅跳跃一次，通过对引擎的升级，今天我测试了一下循环反馈模式，大概跑了200圈，引擎报一个溢出错误在一个流程图的结束节点中嵌入一段方程，每次引擎运行到这个节点的时候，通过实时编译器GM模块，计算这个方程，计算结果与预设值进行比较，符合条件则跳跃到开始节点，继续新一轮拓扑分析，直到遇到</div> </li> <li><a href="/article/2357.htm" title="JS常用的事件及方法" target="_blank">JS常用的事件及方法</a> <span class="text-muted">cwqcwqmax9</span> <a class="tag" taget="_blank" href="/search/js/1.htm">js</a> <div>事件描述 onactivate 当对象设置为活动元素时触发。 onafterupdate 当成功更新数据源对象中的关联对象后在数据绑定对象上触发。 onbeforeactivate 对象要被设置为当前元素前立即触发。 onbeforecut 当选中区从文档中删除之前在源对象触发。 onbeforedeactivate 在 activeElement 从当前对象变为父文档其它对象之前立即</div> </li> <li><a href="/article/2484.htm" title="正则表达式验证日期格式" target="_blank">正则表达式验证日期格式</a> <span class="text-muted">dashuaifu</span> <a class="tag" taget="_blank" href="/search/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/1.htm">正则表达式</a><a class="tag" taget="_blank" href="/search/IT%E5%85%B6%E5%AE%83/1.htm">IT其它</a><a class="tag" taget="_blank" href="/search/java%E5%85%B6%E5%AE%83/1.htm">java其它</a> <div> 正则表达式验证日期格式 function isDate(d){ var v = d.match(/^(\d{4})-(\d{1,2})-(\d{1,2})$/i); if(!v) { this.focus(); return false; } } <input value="2000-8-8" onblu</div> </li> <li><a href="/article/2611.htm" title="Yii CModel.rules() 方法、validate预定义完整列表、以及说说验证" target="_blank">Yii CModel.rules() 方法、validate预定义完整列表、以及说说验证</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/yii/1.htm">yii</a> <div>public array rules () {return} array 要调用 validate() 时应用的有效性规则。返回属性的有效性规则。声明验证规则，应重写此方法。每个规则是数组具有以下结构：array('attribute list', 'validator name', 'on'=>'scenario name', ...validation </div> </li> <li><a href="/article/2738.htm" title="UITextAttributeTextColor = deprecated in iOS 7.0" target="_blank">UITextAttributeTextColor = deprecated in iOS 7.0</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/ios/1.htm">ios</a> <div>In this lesson we used the key "UITextAttributeTextColor" to change the color of the UINavigationBar appearance to white. This prompts a warning "first deprecated in iOS 7.0." Ins</div> </li> <li><a href="/article/2865.htm" title="判断一个数是质数的几种方法" target="_blank">判断一个数是质数的几种方法</a> <span class="text-muted">EmmaZhao</span> <a class="tag" taget="_blank" href="/search/Math/1.htm">Math</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>质数也叫素数，是只能被1和它本身整除的正整数，最小的质数是2，目前发现的最大的质数是p=2^57885161-1【注1】。判断一个数是质数的最简单的方法如下： def isPrime1(n): for i in range(2, n): if n % i == 0: return False return True 但是在上面的方法中有一些冗余的计算，所以</div> </li> <li><a href="/article/2992.htm" title="SpringSecurity工作原理小解读" target="_blank">SpringSecurity工作原理小解读</a> <span class="text-muted">坏我一锅粥</span> <a class="tag" taget="_blank" href="/search/SpringSecurity/1.htm">SpringSecurity</a> <div> SecurityContextPersistenceFilter ConcurrentSessionFilter WebAsyncManagerIntegrationFilter HeaderWriterFilter CsrfFilter LogoutFilter Use</div> </li> <li><a href="/article/3119.htm" title="JS实现自适应宽度的Tag切换" target="_blank">JS实现自适应宽度的Tag切换</a> <span class="text-muted">ini</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a> <div>效果体验：http://hovertree.com/texiao/js/3.htm 该效果使用纯JavaScript代码，实现TAB页切换效果，TAB标签根据内容自适应宽度，点击TAB标签切换内容页。 HTML文件代码： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"</div> </li> <li><a href="/article/3246.htm" title="Hbase Rest API : 数据查询" target="_blank">Hbase Rest API : 数据查询</a> <span class="text-muted">kane_xie</span> <a class="tag" taget="_blank" href="/search/REST/1.htm">REST</a><a class="tag" taget="_blank" href="/search/hbase/1.htm">hbase</a> <div>hbase（hadoop）是用java编写的，有些语言（例如python）能够对它提供良好的支持，但也有很多语言使用起来并不是那么方便，比如c#只能通过thrift访问。Rest就能很好的解决这个问题。Hbase的org.apache.hadoop.hbase.rest包提供了rest接口，它内嵌了jetty作为servlet容器。启动命令：./bin/hbase rest s</div> </li> <li><a href="/article/3373.htm" title="JQuery实现鼠标拖动元素移动位置（源码+注释）" target="_blank">JQuery实现鼠标拖动元素移动位置（源码+注释）</a> <span class="text-muted">明子健</span> <a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/js/1.htm">js</a><a class="tag" taget="_blank" href="/search/%E6%BA%90%E7%A0%81/1.htm">源码</a><a class="tag" taget="_blank" href="/search/%E6%8B%96%E5%8A%A8/1.htm">拖动</a><a class="tag" taget="_blank" href="/search/%E9%BC%A0%E6%A0%87/1.htm">鼠标</a> <div>欢迎讨论指正！ print.html代码： <!DOCTYPE html> <html> <head> <meta http-equiv=Content-Type content="text/html;charset=utf-8"> <title>发票打印</title> &l</div> </li> <li><a href="/article/3500.htm" title="Postgresql 连表更新字段语法 update" target="_blank">Postgresql 连表更新字段语法 update</a> <span class="text-muted">qifeifei</span> <a class="tag" taget="_blank" href="/search/PostgreSQL/1.htm">PostgreSQL</a> <div>下面这段sql本来目的是想更新条件下的数据，可是这段sql却更新了整个表的数据。sql如下： UPDATE tops_visa.visa_order SET op_audit_abort_pass_date = now() FROM tops_visa.visa_order as t1 INNER JOIN tops_visa.visa_visitor as t2 ON t1. </div> </li> <li><a href="/article/3627.htm" title="将redis,memcache结合使用的方案?" target="_blank">将redis,memcache结合使用的方案?</a> <span class="text-muted">tcrct</span> <a class="tag" taget="_blank" href="/search/redis/1.htm">redis</a><a class="tag" taget="_blank" href="/search/cache/1.htm">cache</a> <div>公司架构上使用了阿里云的服务，由于阿里的kvstore收费相当高，打算自建，自建后就需要自己维护，所以就有了一个想法，针对kvstore(redis)及ocs(memcache)的特点，想自己开发一个cache层，将需要用到list，set，map等redis方法的继续使用redis来完成，将整条记录放在memcache下，即findbyid，save等时就memcache，其它就对应使用redi</div> </li> <li><a href="/article/3754.htm" title="开发中遇到的诡异的bug" target="_blank">开发中遇到的诡异的bug</a> <span class="text-muted">wudixiaotie</span> <a class="tag" taget="_blank" href="/search/bug/1.htm">bug</a> <div>今天我们服务器组遇到个问题：我们的服务是从Kafka里面取出数据，然后把offset存储到ssdb中，每个topic和partition都对应ssdb中不同的key，服务启动之后，每次kafka数据更新我们这边收到消息，然后存储之后就发现ssdb的值偶尔是-2,这就奇怪了，最开始我们是在代码中打印存储的日志，发现没什么问题，后来去查看ssdb的日志，才发现里面每次set的时候都会对同一个key</div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> <strong>按字母分类：</strong> <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a> </div> </div> </div> <footer id="footer" class="mb30 mt30"> <div class="container"> <div class="footBglm"> <a target="_blank" href="/">首页</a> - <a target="_blank" href="/custom/about.htm">关于我们</a> - <a target="_blank" href="/search/Java/1.htm">站内搜索</a> - <a target="_blank" href="/sitemap.txt">Sitemap</a> - <a target="_blank" href="/custom/delete.htm">侵权投诉</a> </div> <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.  </div> </div> </footer>  <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/> <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script> </body> </html>