解析如何利用iframe标签以及js制作时钟 2023年6月10日 下午12:42 • JavaScript 当我们需要在网页上显示时钟时，可以使用iframe标签和JS来实现。本文将详细介绍如何利用iframe标签和JS制作时钟。 步骤1：创建HTML网页 首先，在你的HTML文件中，创建一个标签，在其中指定一个id，以便在后面的JavaScript代码中引用。</p> <pre><code class="language-html"><!DOCTYPE html> <html> <head> <title>时钟页面</title> </head> <body> <iframe id="clock" width="100" height="100" frameborder="0"></iframe> </body> </html> </code></pre> <h2>步骤2：编写JavaScript代码</h2> <p>接下来，编写JavaScript代码，用于实现时钟功能。具体来说，我们需要：</p> <ol> <li>获取当前时间</li> <li>将时间格式化为“时：分：秒”的形式</li> <li>将格式化后的时间放到iframe标签内</li> </ol> <pre><code class="language-javascript">function updateClock() { var clock = document.getElementById("clock"); var date = new Date(); var hours = date.getHours(); var minutes = date.getMinutes(); var seconds = date.getSeconds(); var time = hours + ":" + minutes + ":" + seconds; clock.innerHTML = time; } setInterval(updateClock, 1000); </code></pre> <p>在上述代码中，我们首先获取了iframe标签，然后获取当前时间，并将其格式化为字符串。最后，我们将时间字符串放入iframe标签中。</p> <p>由于我们需要时钟每秒钟更新一次，因此我们使用setInterval()方法来定时更新时钟。</p> <h2>步骤3：制作一个时钟网页示例</h2> <p>通过前面的步骤，我们已经知道了如何使用iframe标签和JavaScript来实现时钟。接下来，我们来看一个完整的示例，使用一个圆形的div元素来作为时钟的外框。</p> <pre><code class="language-html"><!DOCTYPE html> <html> <head> <title>时钟页面</title> <style> .clock { width: 200px; height: 200px; border: 10px solid #666; border-radius: 100%; position: relative; } .hand { position: absolute; background-color: #666; transform-origin: 50% 100%; } .second-hand { width: 2px; height: 80px; top: 10px; left: 99px; z-index: 2; animation: rotate 60s infinite linear; } .minute-hand { width: 6px; height: 70px; top: 20px; left: 97px; z-index: 1; animation: rotate 3600s infinite linear; } .hour-hand { width: 10px; height: 50px; top: 40px; left: 95px; animation: rotate 43200s infinite linear; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } </style> </head> <body> <div class="clock"> <div class="hand second-hand"></div> <div class="hand minute-hand"></div> <div class="hand hour-hand"></div> <iframe id="clock" width="100%" height="100%" frameborder="0" style="position: absolute; top: 0; left: 0;"></iframe> </div> <script> function updateClock() { var clock = document.getElementById("clock"); var date = new Date(); var hours = date.getHours(); var minutes = date.getMinutes(); var seconds = date.getSeconds(); var time = hours + ":" + (minutes < 10 ? "0" + minutes : minutes) + ":" + (seconds < 10 ? "0" + seconds : seconds); clock.innerHTML = time; } setInterval(updateClock, 1000); </script> </body> </html> </code></pre> <p>在上述代码中，我们使用了CSS样式来创建了一个圆形的时钟外框，并使用了transform-origin属性来指定时钟指针的旋转中心点。同时，我们还使用了CSS3的动画效果来让时针、分针和秒针实现旋转，从而实现了一个精美的时钟效果。</p> <p>总结：</p> <p>通过本文的介绍，您已经了解了如何使用iframe标签和JS制作时钟，不仅提高了您的前端技能，同时也为您今后的网页设计带来了更多可能性。</p> <div class="entry-readmore"><div class="entry-readmore-btn"></div></div> <div class="entry-copyright"><p>本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：<a href="https://pythonjishu.com/rvheewvzjgooizh/">解析如何利用iframe标签以及js制作时钟 - Python技术站</a></p></div> </div> <div class="entry-tag"><a href="https://pythonjishu.com/tag/javascript/" rel="tag">javascript</a></div> <div class="entry-action"> <div class="btn-zan" data-id="317969"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-thumb-up-fill"></use></svg></i> 赞 <span class="entry-action-num">(0)</span></div> </div> <div class="entry-bar"> <div class="entry-bar-inner"> <div class="entry-bar-info entry-bar-info2"> <div class="info-item meta"> <a class="meta-item j-heart" href="javascript:;" data-id="317969"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-star"></use></svg></i> <span class="data">0</span></a> <a class="meta-item" href="#comments"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-comment"></use></svg></i> <span class="data">0</span></a> <a class="meta-item dashang" href="javascript:;"> <i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-cny-circle-fill"></use></svg></i> 打赏 <span class="dashang-img dashang-img2"> <span> <img src="//pythonjishu.com/wp-content/uploads/2023/02/2023-02-06_10-34-29.jpg" alt="微信扫一扫"/> 微信扫一扫 </span> <span> <img src="//pythonjishu.com/wp-content/uploads/2023/02/2023-02-06_10-35-01.jpg" alt="支付宝扫一扫"/> 支付宝扫一扫 </span> </span> </a> </div> <div class="info-item share"> <a class="meta-item mobile j-mobile-share" href="javascript:;" data-id="317969" data-qrcode="https://pythonjishu.com/rvheewvzjgooizh/"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-share"></use></svg></i> 生成海报</a> <a class="meta-item wechat" data-share="wechat" target="_blank" rel="nofollow" href="#"> <i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-wechat"></use></svg></i> </a> <a class="meta-item weibo" data-share="weibo" target="_blank" rel="nofollow" href="#"> <i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-weibo"></use></svg></i> </a> <a class="meta-item qq" data-share="qq" target="_blank" rel="nofollow" href="#"> <i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-qq"></use></svg></i> </a> <a class="meta-item qzone" data-share="qzone" target="_blank" rel="nofollow" href="#"> <i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-qzone"></use></svg></i> </a> </div> <div class="info-item act"> <a href="javascript:;" id="j-reading"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-article"></use></svg></i></a> </div> </div> </div> </div> </div> <div class="entry-page"> <div class="entry-page-prev entry-page-nobg"> <a href="https://pythonjishu.com/nbohzucmclrhjft/" title="通过JS 获取Mouse Position(鼠标坐标)的代码" rel="prev"> <span>通过JS 获取Mouse Position(鼠标坐标)的代码</span> </a> <div class="entry-page-info"> <span class="pull-left"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-arrow-left-double"></use></svg></i> 上一篇</span> <span class="pull-right">2023年6月10日</span> </div> </div> <div class="entry-page-next entry-page-nobg"> <a href="https://pythonjishu.com/aytsmgdzbslallm/" title="DOM节点深度克隆函数cloneNode()用法实例" rel="next"> <span>DOM节点深度克隆函数cloneNode()用法实例</span> </a> <div class="entry-page-info"> <span class="pull-right">下一篇 <i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-arrow-right-double"></use></svg></i></span> <span class="pull-left">2023年6月10日</span> </div> </div> </div> <div class="entry-related-posts"> <h3 class="entry-related-title">相关文章</h3><ul class="entry-related cols-3 post-loop post-loop-default"><li class="item item-no-thumb"> <div class="item-content"> <h3 class="item-title"> <a href="https://pythonjishu.com/yrnzrjgyxfttnho/" rel="bookmark"> 在JavaScript中处理字符串之fontcolor()方法的使用 </a> </h3> <div class="item-excerpt"> <p>在JavaScript中处理字符串之fontcolor()方法的使用 简介 JavaScript 提供了一些内置方法，用来处理字符串，其中之一就是 fontcolor() 。 fontcolor() 方法用于创建带有指定颜色的 HTML <font> 标签，用于改变文本颜色。 该方法接受一个参数 color，该参数是一个字符串，值为想要应用的颜色…</p> </div> <div class="item-meta"> <a class="item-meta-li" href="https://pythonjishu.com/other/javascript/" target="_blank">JavaScript</a> <span class="item-meta-li date">2023年5月28日</span> <div class="item-meta-right"> <a class="item-meta-li comments" href="https://pythonjishu.com/yrnzrjgyxfttnho/#comments" target="_blank" title="评论数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-comment"></use></svg></i>0</a><span class="item-meta-li stars" title="收藏数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-star"></use></svg></i>0</span><span class="item-meta-li likes" title="点赞数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-thumb-up"></use></svg></i>0</span> </div> </div> </div> </li> <li class="item item-no-thumb"> <div class="item-content"> <h3 class="item-title"> <a href="https://pythonjishu.com/ncphanhwqpzmrgu/" rel="bookmark"> JavaScript基于DOM操作实现简单的数学运算功能示例 </a> </h3> <div class="item-excerpt"> <p>下面是“JavaScript基于DOM操作实现简单的数学运算功能示例”的完整攻略。 一、什么是DOM DOM（文档对象模型）是指浏览器将HTML文档解析成树状结构的一种方式。在DOM中，每一个HTML元素（标签）都是一个对象，开发者通过JavaScript可以访问和操作这些对象，实现页面的动态效果和交互功能。 二、使用DOM操作实现简单的数学运算 1. 示例…</p> </div> <div class="item-meta"> <a class="item-meta-li" href="https://pythonjishu.com/other/javascript/" target="_blank">JavaScript</a> <span class="item-meta-li date">2023年5月28日</span> <div class="item-meta-right"> <a class="item-meta-li comments" href="https://pythonjishu.com/ncphanhwqpzmrgu/#comments" target="_blank" title="评论数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-comment"></use></svg></i>0</a><span class="item-meta-li stars" title="收藏数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-star"></use></svg></i>0</span><span class="item-meta-li likes" title="点赞数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-thumb-up"></use></svg></i>0</span> </div> </div> </div> </li> <li class="item item-no-thumb"> <div class="item-content"> <h3 class="item-title"> <a href="https://pythonjishu.com/viyncdmpfajdeig/" rel="bookmark"> js实现让某个动作延迟几秒执行 </a> </h3> <div class="item-excerpt"> <p>实现动作延迟执行可以通过JavaScript语言中提供的setTimeout()函数来实现。 该函数的语法为： setTimeout(function, delay) 其中“function”参数是需要执行的函数名或函数体，delay参数是延迟的时间，单位是毫秒。 下面给出两个示例来讲解该函数如何实现动作延迟执行： 示例一：实现3秒钟后弹窗提示 可以使用以下…</p> </div> <div class="item-meta"> <a class="item-meta-li" href="https://pythonjishu.com/other/javascript/" target="_blank">JavaScript</a> <span class="item-meta-li date">2023年6月11日</span> <div class="item-meta-right"> <a class="item-meta-li comments" href="https://pythonjishu.com/viyncdmpfajdeig/#comments" target="_blank" title="评论数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-comment"></use></svg></i>0</a><span class="item-meta-li stars" title="收藏数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-star"></use></svg></i>0</span><span class="item-meta-li likes" title="点赞数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-thumb-up"></use></svg></i>0</span> </div> </div> </div> </li> <li class="item item-myimg"><div class="wpcom_myimg_wrap __flow"><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2252152819722406" crossorigin="anonymous"></script> <!-- 通用 --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-2252152819722406" data-ad-slot="5528197265" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div></li><li class="item item-no-thumb"> <div class="item-content"> <h3 class="item-title"> <a href="https://pythonjishu.com/cloddocmdwjsrvs/" rel="bookmark"> js闭包用法实例详解 </a> </h3> <div class="item-excerpt"> <p>JS闭包用法实例详解 什么是闭包? 闭包是指有权访问另一个函数作用域中变量的函数。创建闭包的常见方式是在一个函数内部创建另一个函数。在创建的内部函数中，可以访问外部函数的参数和变量，即使外部函数已经返回退出。 为什么要使用闭包? 闭包的主要作用是作为函数工厂，可以用来封装变量和方法，使全局变量不被污染。 同时，闭包可以让一个函数访问另一个函数的局部变量，使得…</p> </div> <div class="item-meta"> <a class="item-meta-li" href="https://pythonjishu.com/other/javascript/" target="_blank">JavaScript</a> <span class="item-meta-li date">2023年5月28日</span> <div class="item-meta-right"> <a class="item-meta-li comments" href="https://pythonjishu.com/cloddocmdwjsrvs/#comments" target="_blank" title="评论数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-comment"></use></svg></i>0</a><span class="item-meta-li stars" title="收藏数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-star"></use></svg></i>0</span><span class="item-meta-li likes" title="点赞数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-thumb-up"></use></svg></i>0</span> </div> </div> </div> </li> <li class="item item-no-thumb"> <div class="item-content"> <h3 class="item-title"> <a href="https://pythonjishu.com/facftabukytwjgb/" rel="bookmark"> js中实例与对象的区别讲解 </a> </h3> <div class="item-excerpt"> <p>JS中，实例和对象都是面向对象编程的概念，但它们有着不同的含义。 实例与对象的区别 对象 对象是JS中非常重要且常见的数据类型。它可以是一个简单的数据类型，也可以是一个数组，函数等组合类型，甚至可以是由其他对象组成的复杂类型。每个对象都有一个自己的属性和方法，这些方法和属性可以被对象访问和修改。以下是一个简单对象的例子： let person = { nam…</p> </div> <div class="item-meta"> <a class="item-meta-li" href="https://pythonjishu.com/other/javascript/" target="_blank">JavaScript</a> <span class="item-meta-li date">2023年5月27日</span> <div class="item-meta-right"> <a class="item-meta-li comments" href="https://pythonjishu.com/facftabukytwjgb/#comments" target="_blank" title="评论数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-comment"></use></svg></i>0</a><span class="item-meta-li stars" title="收藏数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-star"></use></svg></i>0</span><span class="item-meta-li likes" title="点赞数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-thumb-up"></use></svg></i>0</span> </div> </div> </div> </li> <li class="item item-no-thumb"> <div class="item-content"> <h3 class="item-title"> <a href="https://pythonjishu.com/spirmbehaazureh/" rel="bookmark"> 从阶乘函数对比Javascript和C#的异同 </a> </h3> <div class="item-excerpt"> <p>下面是从阶乘函数对比 Javascript 和 C# 的异同的完整攻略： 一、阶乘函数的定义 阶乘函数是数学中的一种重要函数，一般表示为 n!，表示一个正整数 n 以内所有正整数的乘积。例如： $$5! = 5 \times 4 \times 3 \times 2 \times 1 = 120$$ 二、Javascript 实现阶乘函数 Javascript…</p> </div> <div class="item-meta"> <a class="item-meta-li" href="https://pythonjishu.com/other/javascript/" target="_blank">JavaScript</a> <span class="item-meta-li date">2023年5月28日</span> <div class="item-meta-right"> <a class="item-meta-li comments" href="https://pythonjishu.com/spirmbehaazureh/#comments" target="_blank" title="评论数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-comment"></use></svg></i>0</a><span class="item-meta-li stars" title="收藏数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-star"></use></svg></i>0</span><span class="item-meta-li likes" title="点赞数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-thumb-up"></use></svg></i>0</span> </div> </div> </div> </li> <li class="item item-no-thumb"> <div class="item-content"> <h3 class="item-title"> <a href="https://pythonjishu.com/qbmbkebcbhocifr/" rel="bookmark"> javascript实现类似java中getClass()得到对象类名的方法 </a> </h3> <div class="item-excerpt"> <p>要实现类似Java中getClass()方法的对象类名获取方式，可以使用JavaScript中的Object.prototype.toString方法。这个方法可以返回一个表示当前对象的字符串，其中包含了对象的类型信息。 下面是实现该方法的详细步骤： 定义一个全局函数，比如叫做getClass，接收一个对象作为参数。 function getClass(ob…</p> </div> <div class="item-meta"> <a class="item-meta-li" href="https://pythonjishu.com/other/javascript/" target="_blank">JavaScript</a> <span class="item-meta-li date">2023年6月11日</span> <div class="item-meta-right"> <a class="item-meta-li comments" href="https://pythonjishu.com/qbmbkebcbhocifr/#comments" target="_blank" title="评论数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-comment"></use></svg></i>0</a><span class="item-meta-li stars" title="收藏数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-star"></use></svg></i>0</span><span class="item-meta-li likes" title="点赞数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-thumb-up"></use></svg></i>0</span> </div> </div> </div> </li> <li class="item item-no-thumb"> <div class="item-content"> <h3 class="item-title"> <a href="https://pythonjishu.com/cofbwbvprgefosc/" rel="bookmark"> JavaScript使用cookie实现记住账号密码功能 </a> </h3> <div class="item-excerpt"> <p>一、什么是cookie？ 在介绍如何使用cookie实现记住账号密码功能前，我们先来了解一下什么是cookie。 Cookie是一种存储在用户计算机上的小文件。当用户访问网站时，网站会在用户计算机上存储一些数据，并在以后访问该网站时使用这些数据。Cookie主要用于跟踪用户，在用户浏览网站时保持用户状态以及在一段时间内记录用户在网站上的活动。 二、使用coo…</p> </div> <div class="item-meta"> <a class="item-meta-li" href="https://pythonjishu.com/other/javascript/" target="_blank">JavaScript</a> <span class="item-meta-li date">2023年6月11日</span> <div class="item-meta-right"> <a class="item-meta-li comments" href="https://pythonjishu.com/cofbwbvprgefosc/#comments" target="_blank" title="评论数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-comment"></use></svg></i>0</a><span class="item-meta-li stars" title="收藏数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-star"></use></svg></i>0</span><span class="item-meta-li likes" title="点赞数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-thumb-up"></use></svg></i>0</span> </div> </div> </div> </li> </ul> </div> </article> </main> <aside class="sidebar"> <div class="widget widget_post_thumb"><h3 class="widget-title"><span>最新文章</span></h3> <ul> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="https://pythonjishu.com/openai-sora/" title="OpenAI重磅发布首个视频生成模型Sora，网友：一出手就是王炸！"> <img width="480" height="300" src="https://pythonjishu.com/wp-content/themes/justnews/themer/assets/images/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="OpenAI重磅发布首个视频生成模型Sora，网友：一出手就是王炸！" decoding="async" data-original="https://pythonjishu.com/wp-content/uploads/2024/02/66372-20240216111025772-344088444-480x300.gif" /> </a> </div> <div class="item-content"> <p class="item-title"><a href="https://pythonjishu.com/openai-sora/" title="OpenAI重磅发布首个视频生成模型Sora，网友：一出手就是王炸！">OpenAI重磅发布首个视频生成模型Sora，网友：一出手就是王炸！</a></p> <p class="item-date">2024年2月17日</p> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="https://pythonjishu.com/openai-developer-conference/" title="短短 45 分钟发布会，OpenAI 再次让 AI 圈一夜未眠！"> <img width="480" height="300" src="https://pythonjishu.com/wp-content/themes/justnews/themer/assets/images/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="短短 45 分钟发布会，OpenAI 再次让 AI 圈一夜未眠！" decoding="async" data-original="https://pythonjishu.com/wp-content/uploads/2023/11/6ee575e7369b-480x300.jpg" /> </a> </div> <div class="item-content"> <p class="item-title"><a href="https://pythonjishu.com/openai-developer-conference/" title="短短 45 分钟发布会，OpenAI 再次让 AI 圈一夜未眠！">短短 45 分钟发布会，OpenAI 再次让 AI 圈一夜未眠！</a></p> <p class="item-date">2023年11月8日</p> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="https://pythonjishu.com/ai-create-article-3/" title="如何评估AI 文章的输出质量：深入了解人工智慧生成的内容"> <img width="480" height="300" src="https://pythonjishu.com/wp-content/themes/justnews/themer/assets/images/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="如何评估AI 文章的输出质量：深入了解人工智慧生成的内容" decoding="async" data-original="https://pythonjishu.com/wp-content/uploads/2023/10/photo-1684369175833-4b445ad6bfb5-480x300.jpg" /> </a> </div> <div class="item-content"> <p class="item-title"><a href="https://pythonjishu.com/ai-create-article-3/" title="如何评估AI 文章的输出质量：深入了解人工智慧生成的内容">如何评估AI 文章的输出质量：深入了解人工智慧生成的内容</a></p> <p class="item-date">2023年11月1日</p> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="https://pythonjishu.com/ai-create-article-2/" title="根据目标受众调整AI 写作风格：有效运用人工智能技术撰写吸引读者的内容"> <img width="480" height="300" src="https://pythonjishu.com/wp-content/themes/justnews/themer/assets/images/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="根据目标受众调整AI 写作风格：有效运用人工智能技术撰写吸引读者的内容" decoding="async" data-original="https://pythonjishu.com/wp-content/uploads/2023/10/photo-1686191128680-caa7558da57f-480x300.jpg" /> </a> </div> <div class="item-content"> <p class="item-title"><a href="https://pythonjishu.com/ai-create-article-2/" title="根据目标受众调整AI 写作风格：有效运用人工智能技术撰写吸引读者的内容">根据目标受众调整AI 写作风格：有效运用人工智能技术撰写吸引读者的内容</a></p> <p class="item-date">2023年10月29日</p> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="https://pythonjishu.com/ai-create-article/" title="5款中文AI文章产生器：中文写作必备「AI写作工具」快速SEO文章"> <img width="480" height="300" src="https://pythonjishu.com/wp-content/themes/justnews/themer/assets/images/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="5款中文AI文章产生器：中文写作必备「AI写作工具」快速SEO文章" decoding="async" data-original="https://pythonjishu.com/wp-content/uploads/2023/10/photo-1686191567765-480x300.jpg" /> </a> </div> <div class="item-content"> <p class="item-title"><a href="https://pythonjishu.com/ai-create-article/" title="5款中文AI文章产生器：中文写作必备「AI写作工具」快速SEO文章">5款中文AI文章产生器：中文写作必备「AI写作工具」快速SEO文章</a></p> <p class="item-date">2023年10月29日</p> </div> </li> </ul> </div><div class="widget widget_html_myimg"><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2252152819722406" crossorigin="anonymous"></script> <!-- 通用 --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-2252152819722406" data-ad-slot="5528197265" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div><div class="widget widget_lastest_news"><h3 class="widget-title"><span>热门文章</span></h3></div> </aside> </div> </div> <footer class="footer"> <div class="container"> <div class="footer-col-wrap footer-with-icon"> <div class="footer-col footer-col-copy"> <ul class="footer-nav hidden-xs"><li id="menu-item-374373" class="menu-item menu-item-374373"><a href="https://pythonjishu.com/about/">关于我们</a></li> <li id="menu-item-374372" class="menu-item menu-item-privacy-policy menu-item-374372"><a rel="privacy-policy" href="https://pythonjishu.com/privacy-policy/">隐私政策</a></li> </ul> <div class="copyright"> <div class="copyright"> <p style="text-align: left;">© 2022-2024 <strong><a href="https://pythonjishu.com/" target="_blank" rel="noopener">Python技术站</a> </strong> 保留所有权利</p> <p style="text-align: left;"><img class="" src="https://pythonjishu.com/wp-content/uploads/2023/11/baico.png" alt="baico" width="16" height="18" /> <a href="https://beian.mps.gov.cn/#/query/webSearch?code=21010502000733" target="_blank" rel="nofollow noopener noreferrer">辽公网安备21010502000733号</a> <a href="https://beian.miit.gov.cn" target="_blank" rel="nofollow noopener noreferrer">辽ICP备18014290号</a></p> <p><img class="alignleft" src="https://pythonjishu.com/wp-content/uploads/2023/11/aliprotected.png" alt="aliprotected" width="244" height="26" /></p> </div> </div> </div> <div class="footer-col footer-col-sns"> <div class="footer-sns"> <a class="sns-wx" href="javascript:;" aria-label="icon"> <i class="wpcom-icon fa fa-wechat sns-icon"></i> <span style="background-image:url('//pythonjishu.com/wp-content/uploads/2023/01/wechat-metahuber.jpg');"></span> </a> <a class="sns-wx" href="javascript:;" aria-label="icon"> <i class="wpcom-icon ri-music-fill sns-icon"></i> <span style="background-image:url('//pythonjishu.com/wp-content/uploads/2023/05/2023-05-07_20-49-41.jpg');"></span> </a> </div> </div> </div> </div> </footer> <div class="action action-style-1 action-color-1 action-pos-1" style="bottom:320px;"> <div class="action-item"> <i class="wpcom-icon fa fa-wechat action-item-icon"></i> <span>合作推广</span> <div class="action-item-inner action-item-type-1"> <img class="action-item-img" src="//pythonjishu.com/wp-content/uploads/2023/01/wechat-metahuber.jpg" alt="合作推广"> </div> </div> <div class="action-item j-share"> <i class="wpcom-icon wi action-item-icon"><svg aria-hidden="true"><use xlink:href="#wi-share"></use></svg></i> <span>分享本页</span> </div> <div class="action-item gotop j-top"> <i class="wpcom-icon wi action-item-icon"><svg aria-hidden="true"><use xlink:href="#wi-arrow-up-2"></use></svg></i> <span>返回顶部</span> </div> </div> <script type="text/javascript" id="main-js-extra"> /* <![CDATA[ */ var _wpcom_js = {"webp":"","ajaxurl":"https:\/\/pythonjishu.com\/wp-admin\/admin-ajax.php","theme_url":"https:\/\/pythonjishu.com\/wp-content\/themes\/justnews","slide_speed":"5000","is_admin":"0","lang":"zh_CN","js_lang":{"share_to":"\u5206\u4eab\u5230:","copy_done":"\u590d\u5236\u6210\u529f\uff01","copy_fail":"\u6d4f\u89c8\u5668\u6682\u4e0d\u652f\u6301\u62f7\u8d1d\u529f\u80fd","confirm":"\u786e\u5b9a","qrcode":"\u4e8c\u7ef4\u7801","page_loaded":"\u5df2\u7ecf\u5230\u5e95\u4e86","no_content":"\u6682\u65e0\u5185\u5bb9","load_failed":"\u52a0\u8f7d\u5931\u8d25\uff0c\u8bf7\u7a0d\u540e\u518d\u8bd5\uff01","expand_more":"\u9605\u8bfb\u5269\u4f59 %s"},"share":"1","lightbox":"1","post_id":"317969","user_card_height":"356","poster":{"notice":"\u8bf7\u300c\u70b9\u51fb\u4e0b\u8f7d\u300d\u6216\u300c\u957f\u6309\u4fdd\u5b58\u56fe\u7247\u300d\u540e\u5206\u4eab\u7ed9\u66f4\u591a\u597d\u53cb","generating":"\u6b63\u5728\u751f\u6210\u6d77\u62a5\u56fe\u7247...","failed":"\u6d77\u62a5\u56fe\u7247\u751f\u6210\u5931\u8d25"},"video_height":"484","fixed_sidebar":"1","dark_style":"0","font_url":"\/\/fonts.googleapis.com\/css2?family=Noto+Sans+SC:wght@400;500&display=swap","follow_btn":"<i class=\"wpcom-icon wi\"><svg aria-hidden=\"true\"><use xlink:href=\"#wi-add\"><\/use><\/svg><\/i>\u5173\u6ce8","followed_btn":"\u5df2\u5173\u6ce8","user_card":"1"}; /* ]]> */ </script> <script type="text/javascript" src="https://pythonjishu.com/wp-content/themes/justnews/js/main.js?ver=6.19.0" id="main-js"></script> <script type="text/javascript" src="https://pythonjishu.com/wp-content/themes/justnews/themer/assets/js/icons-2.7.19.js?ver=6.19.0" id="wpcom-icons-js"></script> <script type="text/javascript" id="wpcom-member-js-extra"> /* <![CDATA[ */ var _wpmx_js = {"ajaxurl":"https:\/\/pythonjishu.com\/wp-admin\/admin-ajax.php","plugin_url":"https:\/\/pythonjishu.com\/wp-content\/plugins\/wpcom-member\/","post_id":"317969","js_lang":{"login_desc":"\u60a8\u8fd8\u672a\u767b\u5f55\uff0c\u8bf7\u767b\u5f55\u540e\u518d\u8fdb\u884c\u76f8\u5173\u64cd\u4f5c\uff01","login_title":"\u8bf7\u767b\u5f55","login_btn":"\u767b\u5f55","reg_btn":"\u6ce8\u518c"},"login_url":"https:\/\/pythonjishu.com\/%e7%94%a8%e6%88%b7%e7%99%bb%e5%bd%95\/?modal-type=login","register_url":"https:\/\/pythonjishu.com\/%e7%94%a8%e6%88%b7%e6%b3%a8%e5%86%8c\/?modal-type=register","errors":{"require":"\u4e0d\u80fd\u4e3a\u7a7a","email":"\u8bf7\u8f93\u5165\u6b63\u786e\u7684\u7535\u5b50\u90ae\u7bb1","pls_enter":"\u8bf7\u8f93\u5165","password":"\u5bc6\u7801\u5fc5\u987b\u4e3a6~32\u4e2a\u5b57\u7b26","passcheck":"\u4e24\u6b21\u5bc6\u7801\u8f93\u5165\u4e0d\u4e00\u81f4","phone":"\u8bf7\u8f93\u5165\u6b63\u786e\u7684\u624b\u673a\u53f7\u7801","terms":"\u8bf7\u9605\u8bfb\u5e76\u540c\u610f\u6761\u6b3e","sms_code":"\u9a8c\u8bc1\u7801\u9519\u8bef","captcha_verify":"\u8bf7\u70b9\u51fb\u6309\u94ae\u8fdb\u884c\u9a8c\u8bc1","captcha_fail":"\u4eba\u673a\u9a8c\u8bc1\u5931\u8d25\uff0c\u8bf7\u91cd\u8bd5","nonce":"\u968f\u673a\u6570\u6821\u9a8c\u5931\u8d25","req_error":"\u8bf7\u6c42\u5931\u8d25"}}; /* ]]> */ </script> <script type="text/javascript" src="https://pythonjishu.com/wp-content/plugins/wpcom-member/js/index.js?ver=1.5.7" id="wpcom-member-js"></script> <script type="text/javascript" src="https://pythonjishu.com/wp-content/themes/justnews/js/wp-embed.js?ver=6.19.0" id="wp-embed-js"></script> <script id="module-flowchart"> (function($) { $(function() { if (typeof $.fn.flowChart !== "undefined") { if ($(".language-flow").length > 0) { $(".language-flow").parent("pre").attr("style", "text-align: center; background: none;"); $(".language-flow").addClass("flowchart").removeClass("language-flow"); $(".flowchart").flowChart(); } } }); })(jQuery); </script> <script id="module-sequence-diagram"> (function($) { $(function() { if (typeof $.fn.sequenceDiagram !== "undefined") { $(".language-sequence").parent("pre").attr("style", "text-align: center; background: none;"); $(".language-seq").parent("pre").attr("style", "text-align: center; background: none;"); $(".language-sequence").addClass("sequence-diagram").removeClass("language-sequence"); $(".language-seq").addClass("sequence-diagram").removeClass("language-seq"); $(".sequence-diagram").sequenceDiagram({ theme: "simple" }); } }); })(jQuery); </script> <script id="module-toc"> (function($) { $(function() { }); })(jQuery); </script> <script>document.getElementById('j-user-wrap').style.display="none";</script> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Article", "@id": "https://pythonjishu.com/rvheewvzjgooizh/", "url": "https://pythonjishu.com/rvheewvzjgooizh/", "headline": "解析如何利用iframe标签以及js制作时钟", "description": "当我们需要在网页上显示时钟时，可以使用iframe标签和JS来实现。本文将详细介绍如何利用iframe标签和JS制作时钟。 步骤1：创建HTML网页 首先，在你的HTML文件中，创建一个标签，在其中指定一个id，以便在后面的JavaScript代码中引用。 <!DOCTYPE html> <html&…", "datePublished": "2023-06-10T12:42:24+08:00", "dateModified": "2023-06-10T12:42:24+08:00", "author": {"@type":"Person","name":"metahuber","url":"/5","image":"//pythonjishu.com/wp-content/uploads/member/avatars/b7fbbce2345d7772.1690897281.jpg"} } </script> </body> </html> <!-- Cached by WP-Optimize (gzip) - https://getwpo.com - Last modified: 2024年12月23日 am4:33 (Asia/Shanghai UTC:8) -->
