布啦啦李

使用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/1947204912051974144.htm" title="DHTMLX Suite 9.2 重磅发布：支持历史记录、类Excel交互、剪贴板、拖放增强等多项升级" target="_blank">DHTMLX Suite 9.2 重磅发布：支持历史记录、类Excel交互、剪贴板、拖放增强等多项升级</a> <span class="text-muted"></span> <div>全球知名的JavaScriptUI组件库DHTMLXSuite迎来9.2新版本！此次更新虽为次版本号，却实质性提升了Grid网格组件的交互能力与用户体验，引入了包括历史记录管理、剪贴板操作、数据选择范围管理、Block区块选择等多项高级模块，支持更接近电子表格的使用体验。新版Grid组件不仅在数据可视化、数据编辑方面功能更强，还增强了与主流前端框架（如React、Vue、Angular）的集成示例</div> </li> <li><a href="/article/1947196965230014464.htm" title="如何用纯 HTML 文件实现 Vue.js 应用，并通过 CDN 引入 Element UI" target="_blank">如何用纯 HTML 文件实现 Vue.js 应用，并通过 CDN 引入 Element UI</a> <span class="text-muted">人工智能训练师</span> <a class="tag" taget="_blank" href="/search/VUE/1.htm">VUE</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/ui/1.htm">ui</a> <div>相关名词解释Vue.jsVue.js：是一款用于构建用户界面的JavaScript框架。它基于标准HTML、CSS和JavaScript构建，提供声明式的、组件化的编程模型，可高效开发用户界面。具有响应式数据绑定等特性，能自动跟踪数据变化并更新DOM。ElementUI：是一个基于Vue.js的流行前端UI框架，由饿了么团队开发和维护。它提供了一系列预设计的Vue组件，如按钮、输入框、表格等，可帮</div> </li> <li><a href="/article/1947188515175460864.htm" title="【原生JS教程】第3节：运算符与表达式" target="_blank">【原生JS教程】第3节：运算符与表达式</a> <span class="text-muted">全栈前端老曹</span> <a class="tag" taget="_blank" href="/search/%E5%8E%9F%E7%94%9FJS%E6%95%99%E7%A8%8B%E4%B8%8E%E5%AE%9E%E6%88%98/1.htm">原生JS教程与实战</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%95%99%E7%A8%8B/1.htm">前端教程</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><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>第3课：运算符与表达式引言运算符是JavaScript中用于操作数据的基本工具，表达式则是由变量、常量、运算符等构成的可求值代码片段。掌握运算符的分类和使用方式，是编写逻辑判断、数据处理和复杂计算的基础。通过本节课的学习，你将掌握：JavaScript中常见的运算符类型（算术、比较、逻辑、三元等）运算符的优先级与结合性表达式的基本概念与使用场景常见运算符陷阱与最佳实践本节内容概要✅1.算术运算符（</div> </li> <li><a href="/article/1947176162606247936.htm" title="前端学习路线推荐" target="_blank">前端学习路线推荐</a> <span class="text-muted">oldfifteen</span> <div>第一阶段：HTML+CSS:HTML进阶、CSS进阶、div+css布局、HTML+css整站开发、JavaScript基础：Js基础教程、js内置对象常用方法、常见DOM树操作大全、ECMAscript、DOM、BOM、定时器和焦点图。JS基本特效：常见特效、例如：tab、导航、整页滚动、轮播图、JS制作幻灯片、弹出层、手风琴菜单、瀑布流布局、滚动事件、滚差视图。JS高级特征：正则表达式、排序算</div> </li> <li><a href="/article/1947172756219031552.htm" title="程序员的技术栈及学习路径" target="_blank">程序员的技术栈及学习路径</a> <span class="text-muted">Honeysea_70</span> <a class="tag" taget="_blank" href="/search/%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86/1.htm">基础知识</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%BB%8F%E9%AA%8C%E5%88%86%E4%BA%AB/1.htm">经验分享</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>程序员的技术栈是非常多元的，通常涵盖了多个领域和技术。程序员的技术栈通常根据工作需求、项目类型以及个人兴趣的不同而有所不同，但通常会有一定的共性。下面是一个较为典型的程序员的技术栈，以及如何从入门到进阶地学习这些技术。1.编程语言掌握多种编程语言一个资深程序员通常会熟练掌握至少两到三种编程语言，每种语言的侧重点不同，适用于不同的开发场景。主流编程语言：JavaScript：前端开发的核心语言，Re</div> </li> <li><a href="/article/1947166003586723840.htm" title="2023-10-09" target="_blank">2023-10-09</a> <span class="text-muted">小狐狸哎呦喂</span> <div>洗衣机深夜还在转，国庆送的有声书十几个小时后就到期，时钟滴答滴答，文字一片晦涩，我的忙碌漫无目的，毫无头绪，我的六感纷繁复杂，无法聚焦，是时候该调整一下了！首先搬家。是的，我的嘴巴对耳朵说，你没听错。准备借宿父母家，一来享受一下良好作息时间带来的次序感，规律感。二来感受一下温馨的家庭生活，歇一歇，充充电。然后尽量的简化生活。何为简化，就是回归最简单的生活状态，不需要太多外物，尽量朴实，哪怕笨拙的生</div> </li> <li><a href="/article/1947166002303266816.htm" title="小尼《三》" target="_blank">小尼《三》</a> <span class="text-muted">云逸1108</span> <div>山中无岁月，庵里有时钟，子午它都响，松涛伴鹤鸣。三殿添灯油，五更扫落红，两位小青尼，一脸倦春风。</div> </li> <li><a href="/article/1947150439640264704.htm" title="WEB：DOM （二）核心操作 —— 内容" target="_blank">WEB：DOM （二）核心操作 —— 内容</a> <span class="text-muted"></span> <div>文章目录一、innerHTML二、innerText与textContent2.1innerText2.2textContent2.3对比与选择三、表单元素的值操作获取和修改元素的内容是DOM操作中最常见的需求，JavaScript提供了多种方式来操作元素的内容。一、innerHTMLinnerHTML属性用于获取或设置元素的HTML内容，设置时会解析HTML标签。原始内容constcontent</div> </li> <li><a href="/article/1947142987007979520.htm" title="（2）React的JSX语法" target="_blank">（2）React的JSX语法</a> <span class="text-muted">__method__</span> <div>JSX−JSX是JavaScript语法的扩展。React开发不一定使用JSX，但我们建议使用它。要使用自定义的组件，要以大写字母开始自行编辑一个todolist页面首先在src下面创建src/TodoList.js，输入以下代码importReact,{Component}from"react";classTodoListextendsComponent{render(){return(todo</div> </li> <li><a href="/article/1947141107905261568.htm" title="JavaScript语言基础全解析：语法、面向对象与异步编程" target="_blank">JavaScript语言基础全解析：语法、面向对象与异步编程</a> <span class="text-muted">白仑色</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E7%B3%BB%E5%88%97/1.htm">前端系列</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/udp/1.htm">udp</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的三大核心支柱JavaScript作为一门跨平台、多范式的编程语言，已从最初的网页脚本发展为全栈开发的基石。其语言基础可概括为三大核心：语法基础（变量、数据类型、控制流等）、面向对象与原型系统（独特的原型继承机制）、异步编程模型（处理非阻塞操作的核心方案）。掌握这三部分，不仅能写出规范的代码，更能深入理解JavaScript的设计哲学。本文将系统讲解这三大模块，每个知识点</div> </li> <li><a href="/article/1947126353723715584.htm" title="多通路fpga 通信_FPGA高速接口PCIe详解" target="_blank">多通路fpga 通信_FPGA高速接口PCIe详解</a> <span class="text-muted">weixin_39597636</span> <a class="tag" taget="_blank" href="/search/%E5%A4%9A%E9%80%9A%E8%B7%AFfpga/1.htm">多通路fpga</a><a class="tag" taget="_blank" href="/search/%E9%80%9A%E4%BF%A1/1.htm">通信</a> <div>在高速互连领域中，使用高速差分总线替代并行总线是大势所趋。与单端并行信号(PCI总线)相比，高速差分信号(PCIe总线)可以使用更高的时钟频率，从而使用更少的信号线，完成之前需要许多单端并行数据信号才能达到的总线带宽。PCIe协议基础知识PCI总线使用并行总线结构，在同一条总线上的所有外部设备共享总线带宽，而PCIe总线使用了高速差分总线，并采用端到端的连接方式，因此在每一条PCIe链路中只能连接</div> </li> <li><a href="/article/1947113625495859200.htm" title="Java实习模拟面试之创玖科技：前后端交互、数据库、Spring全家桶、性能优化与Linux实战" target="_blank">Java实习模拟面试之创玖科技：前后端交互、数据库、Spring全家桶、性能优化与Linux实战</a> <span class="text-muted">培风图南以星河揽胜</span> <a class="tag" taget="_blank" href="/search/java%E9%9D%A2%E8%AF%95/1.htm">java面试</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E7%A7%91%E6%8A%80/1.htm">科技</a> <div>关键词：JavaScript、JQuery、Ajax、Node.js、MySQL、Oracle、Spring、SpringMVC、SpringBoot、MyBatis、Tomcat、Redis、Nginx、Linux、Git、SAAS系统开发一、面试开场：自我介绍面试官提问：请做个自我介绍，重点突出你的技术栈和项目经验。候选人回答：您好，我是一名计算机科学与技术专业的应届生，具备扎实的Java基础</div> </li> <li><a href="/article/1947112490986958848.htm" title="前端实现抛物线小球动画效果：从原理到代码实践" target="_blank">前端实现抛物线小球动画效果：从原理到代码实践</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/%E6%8A%9B%E7%89%A9%E7%BA%BF/1.htm">抛物线</a><a class="tag" taget="_blank" href="/search/JS/1.htm">JS</a><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a> <div>目录引言一、抛物线动画的核心原理二、纯HTML/CSS实现抛物线动画1.HTML结构2.CSS动画3.效果说明三、动态交互：JavaScript实现抛物线动画1.HTML结构2.JavaScript逻辑3.效果说明四、Vue.js实现抛物线动画1.组件结构2.实现思路五、React实现抛物线动画1.组件代码2.实现思路六、注意事项七、总结引言在前端开发中，动画效果是提升用户体验的重要手段之一。抛物</div> </li> <li><a href="/article/1947112238758293504.htm" title="解锁 JavaScript 模块化：ES6 Module 语法深度指南" target="_blank">解锁 JavaScript 模块化：ES6 Module 语法深度指南</a> <span class="text-muted">编程随想▿</span> <a class="tag" taget="_blank" href="/search/ES6/1.htm">ES6</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/es6/1.htm">es6</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>目录ES6Module核心语法1.export-导出模块内容(1)命名导出(NamedExports)(3)混合导出(CombiningNamedandDefault)2.import-导入模块内容(1)导入命名导出(2)导入默认导出(3)混合导入3.动态导入(import())重要特性与注意事项总结ES6Module核心语法ES6Module的核心围绕两个关键字：export和import。1.</div> </li> <li><a href="/article/1947112211478540288.htm" title="JavaScript的介绍及嵌入方式" target="_blank">JavaScript的介绍及嵌入方式</a> <span class="text-muted">紫罗兰丶</span> <div>JavaScript介绍JavaScript是运行在浏览器端的脚步语言，JavaScript主要解决的是前端与用户交互的问题，包括使用交互与数据交互。JavaScript是浏览器解释执行的，前端脚本语言还有JScript（微软，IE独有），ActionScript(Adobe公司，需要插件)等。JavaScript嵌入页面的方式1.页面script标签嵌入vara="你好!"2.外部引用</div> </li> <li><a href="/article/1947110471391834112.htm" title="HTTPS协议的应用场景分析" target="_blank">HTTPS协议的应用场景分析</a> <span class="text-muted">Arwen303</span> <a class="tag" taget="_blank" href="/search/https/1.htm">https</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%8D%8F%E8%AE%AE/1.htm">网络协议</a><a class="tag" taget="_blank" href="/search/http/1.htm">http</a> <div>HTTPS协议的应用场景分析一、Web服务与交互网页浏览场景：用户通过浏览器访问各类网站（如门户网站、资讯平台），传输HTML、CSS、JavaScript等静态资源。应用：主流网站普遍采用HTTPS，确保页面内容安全加载。例如，Wikipedia、新浪等站点通过HTTPS防止内容被篡改。安全需求：防止页面被中间人劫持植入恶意广告或脚本。在线表单与用户登录场景：用户提交注册表单、登录账号时传输用户</div> </li> <li><a href="/article/1947105933045854208.htm" title="JavaScript取值get的json/url/普通对象参考" target="_blank">JavaScript取值get的json/url/普通对象参考</a> <span class="text-muted"></span> <div>dstore.on('datachanged',function(dstore){for(i=0;i<dstore.getCount();i++){vara=dstore.getAt(i);varimp_info=a.get('imp_info');上面这段JS代码，imp_info取到的是一长串KEY和VALUE组成的内容，我怎样可以准确获取其中一个KEY=SPkValue的VALUE？----</div> </li> <li><a href="/article/1947096479617314816.htm" title="基于单片机的电子时钟设计" target="_blank">基于单片机的电子时钟设计</a> <span class="text-muted">2301_79312104</span> <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%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>收藏和点赞，您的关注是我创作的动力文章目录概要一、设计目标二、系统电路设计2.1硬件电路的设计方案三、系统软件设计3.1主程序设计3.2仿真调试四、总结五、文章目录概要电子时钟具有长远的发展历史，它的出现使得人们对时间的概念有了进一步的认知和了解，可以说意义十分的重大。在时代的推动，以及市场的需求下，电子时钟的功能以及性能都有着质的突破，而且应用的范围也越来越广，到处都有着电子时钟的影子。电子</div> </li> <li><a href="/article/1947091054595469312.htm" title="OracleERP云软件二次开发：业务流程管理与自定义教程" target="_blank">OracleERP云软件二次开发：业务流程管理与自定义教程</a> <span class="text-muted">kkchenjj</span> <a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%B8%9A%E8%BD%AF%E4%BB%B6%E4%BA%8C%E6%AC%A1%E5%BC%80%E5%8F%91%E5%85%A8%E9%9B%86/1.htm">工业软件二次开发全集</a><a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%B8%9A%E8%BD%AF%E4%BB%B6/1.htm">工业软件</a><a class="tag" taget="_blank" href="/search/ERP/1.htm">ERP</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/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>OracleERP云软件二次开发：业务流程管理与自定义教程OracleERP云平台概览OracleERP云平台架构OracleERPCloud采用了一种多层架构设计，旨在提供高度可扩展、安全且灵活的云解决方案。其架构主要分为以下几个层次：用户界面层：提供直观的用户界面，支持多种设备访问，包括桌面、平板和手机。这一层利用了现代Web技术，如HTML5、CSS3和JavaScript，确保了良好的用户</div> </li> <li><a href="/article/1947087398567473152.htm" title="Vue3 实现 Excel 文件导入导出功能" target="_blank">Vue3 实现 Excel 文件导入导出功能</a> <span class="text-muted">海天胜景</span> <a class="tag" taget="_blank" href="/search/excel/1.htm">excel</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>在Vue3中实现Excel文件的导入和导出功能，你可以使用一些流行的JavaScript库，如SheetJS（也称为xlsx）来处理Excel文件。以下是实现这一功能的基本步骤：1.安装SheetJS首先，你需要安装xlsx库。在你的Vue项目中，可以通过npm或yarn来安装：npminstallxlsx#或者yarnaddxlsx2.导入和导出Excel文件导入Excel文件你可以使用一个文件</div> </li> <li><a href="/article/1947035574640635904.htm" title="2025年面试官常用的前端开发笔试考题" target="_blank">2025年面试官常用的前端开发笔试考题</a> <span class="text-muted">豆豆（前端开发+ui设计）</span> <a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</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/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E8%81%8C%E5%9C%BA%E5%92%8C%E5%8F%91%E5%B1%95/1.htm">职场和发展</a> <div>填空题(20道)ReactHooks中，用于模拟类组件生命周期componentDidMount的Hook是________。useEffect在Vue3中，使用________API可以替代Vue2中的data和methods。CompositionWebpack的________插件可以帮助将CSS提取到单独的文件中。MiniCssExtractPlugin在JavaScript中，Promi</div> </li> <li><a href="/article/1947018283278462976.htm" title="Github 2024-06-07开源项目日报 Top10" target="_blank">Github 2024-06-07开源项目日报 Top10</a> <span class="text-muted"></span> <div>根据GithubTrendings的统计，今日(2024-06-07统计)共有10个项目上榜。根据开发语言中项目的数量，汇总情况如下：开发语言项目数量Python项目3C++项目3JavaScript项目2JupyterNotebook项目1TypeScript项目1Vue项目1比特币核心：开源比特币软件创建周期：4919天开发语言：C++协议类型：MITLicenseStar数量：76760个F</div> </li> <li><a href="/article/1946988534107795456.htm" title="现代前端开发流程：CI/CD与自动化部署实战" target="_blank">现代前端开发流程：CI/CD与自动化部署实战</a> <span class="text-muted">天天进步2015</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/1.htm">前端开发</a><a class="tag" taget="_blank" href="/search/ci%2Fcd/1.htm">ci/cd</a><a class="tag" taget="_blank" href="/search/%E8%87%AA%E5%8A%A8%E5%8C%96/1.htm">自动化</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a> <div>目录引言现代前端开发面临的挑战CI/CD基础概念前端CI/CD流程设计实战案例：构建前端CI/CD管道自动化部署策略监控与回滚机制最佳实践与优化建议总结引言随着前端技术的飞速发展，现代Web应用变得越来越复杂。前端项目不再只是简单的HTML、CSS和JavaScript文件的集合，而是演变成了包含众多依赖项、构建工具和框架的复杂系统。在这种情况下，持续集成和持续部署（CI/CD）流程成为了确保前端</div> </li> <li><a href="/article/1946963830898749440.htm" title="服务器采购和选型" target="_blank">服务器采购和选型</a> <span class="text-muted">中兔西维亚</span> <a class="tag" taget="_blank" href="/search/%E5%AE%9E%E7%94%A8%E5%B7%A5%E5%85%B7/1.htm">实用工具</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a> <div>1.CPU双路CPU，0号位和1号位，只要0号位CPU正常，服务器就能工作，若1号位CPU故障，服务器会报警。若0号位CPU故障，1号位CPU正常，服务器不能启动，需要将1号位的CPU换到0号位上才可以启动服务器。双路CPU，坏一个，另一个能正常工作吗？还是都不能用了，懂得告知，万谢cpu主频和最大睿频都是什么意思？CPU的主频，即CPU内核工作的时钟频率。睿频是指当启动一个运行程序后，处理器会自</div> </li> <li><a href="/article/1946951216026152960.htm" title="JavaScript 异步编程的终极指南：从回调到 Promise、Async/Await" target="_blank">JavaScript 异步编程的终极指南：从回调到 Promise、Async/Await</a> <span class="text-muted"></span> <div>JavaScript异步编程的终极指南：从回调到Promise、Async/Await你是否也曾被一个涉及多层网络请求的函数折磨得死去活来？代码像俄罗斯套娃一样层层嵌套，逻辑混乱不堪，bug隐藏在深渊之中。这种场景，就是每个JavaScript开发者都无法回避的课题：异步编程。由于JavaScript运行在单线程环境中，异步是其命脉所在。它允许程序在等待耗时操作（如API请求、文件读写）完成时，继</div> </li> <li><a href="/article/1946950331581657088.htm" title="从零开始学习 Redux：React Native 项目中的状态管理" target="_blank">从零开始学习 Redux：React Native 项目中的状态管理</a> <span class="text-muted">wayne214</span> <a class="tag" taget="_blank" href="/search/react/1.htm">react</a><a class="tag" taget="_blank" href="/search/native/1.htm">native</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a> <div>Redux是一个用于JavaScript应用程序的状态管理库，通常与React或ReactNative配合使用，帮助管理应用的状态和数据流。其核心原理是通过集中式的“单一数据源”来管理应用状态，避免组件之间的“层层传递”状态和副作用。Redux的原理单一数据源（Store）Redux维护一个全局状态树（即Store），所有组件都通过读取这个状态树来获取数据。应用中的所有状态（数据）都存储在这个单一</div> </li> <li><a href="/article/1946938860831305728.htm" title="【vue-7】Vue3 响应式数据声明：深入理解 reactive()" target="_blank">【vue-7】Vue3 响应式数据声明：深入理解 reactive()</a> <span class="text-muted">AllenBright</span> <a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/Vue/1.htm">Vue</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>在Vue3中，响应式系统经过了彻底的重构，提供了更强大、更灵活的方式来声明和管理响应式数据。reactive()是Vue3组合式API中最核心的响应式函数之一。本文将深入探讨reactive()的工作原理、使用场景以及最佳实践。1.什么是reactive()?reactive()是Vue3提供的一个函数，它接收一个普通JavaScript对象，并返回该对象的响应式代理。这个代理对象与原始对象看起来</div> </li> <li><a href="/article/1946932681040261120.htm" title="微信小程序-礼物商城：完整开发项目教程" target="_blank">微信小程序-礼物商城：完整开发项目教程</a> <span class="text-muted">薛迟</span> <div>本文还有配套的精品资源，点击获取简介：微信小程序是腾讯公司推出的移动应用开发平台，适用于无需安装即可使用的在线服务。本项目分享的“微信小程序-礼物商城”源码为开发者提供了电商功能的实际参考，包括商品展示、搜索、购物车、订单管理、支付和用户评价等。源码覆盖了WXML、WXSS、JavaScript基础技术，数据存储、网络请求、页面路由、组件化开发、样式设计、调试与发布、授权与登录以及性能优化等微信小</div> </li> <li><a href="/article/1946888428167688192.htm" title="分布式定时器：原理设计与技术挑战" target="_blank">分布式定时器：原理设计与技术挑战</a> <span class="text-muted">你一身傲骨怎能输</span> <a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84%E8%AE%BE%E8%AE%A1/1.htm">架构设计</a><a class="tag" taget="_blank" href="/search/%E5%88%86%E5%B8%83%E5%BC%8F/1.htm">分布式</a> <div>文章摘要分布式定时器用于在分布式系统中可靠、准确地触发定时任务，常见实现方案包括：基于数据库/消息队列的定时扫描、分布式任务调度框架（如Quartz集群、xxl-job）、时间轮/延迟队列（如Redis/Kafka）以及Zookeeper/Etcd协调服务。主要技术挑战包括时钟同步、任务幂等、高可用、负载均衡和故障恢复等。核心难点在于保证任务唯一性、调度精度与分布式一致性，技术选型需权衡轻量级（R</div> </li> <li><a href="/article/1946875448063488000.htm" title="16路串口光纤通信FPGA项目实现指南 - 第二部分（上）" target="_blank">16路串口光纤通信FPGA项目实现指南 - 第二部分（上）</a> <span class="text-muted">无证驾驶梁嗖嗖</span> <a class="tag" taget="_blank" href="/search/FPGA/1.htm">FPGA</a><a class="tag" taget="_blank" href="/search/fpga%E5%BC%80%E5%8F%91/1.htm">fpga开发</a> <div>16路串口光纤通信FPGA项目实现指南-第二部分（上）四、Aurora通信接口实现4.1Aurora顶层模块设计文件位置：uart_fiber.srcs/sources_1/new/aurora_top.vmoduleaurora_top(inputinit_clk,//初始化时钟（通常为50MHz）outputuser_clk_i,//Aurora用户时钟输出outputCHANNEL_UP,/</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>