看到别的网页上打开,会显示一个动态的数字,感觉这个效果增加了网页的灵动感。就尝试着写代码,最终实现的方法:

会从0增加到一个数值,实现的代码:

<!-- html 部分   -->
<div class="number">
<div id="num1">0</div>
<div id="num2">0</div>
<div id="num3">0</div>
<div id="num4">0</div>
</div>
<!-- js部分 -->
<script type="text/javascript">
window.onload = function ()
{
//数字自动获取
var oNumone = document.getElementById("num1");
var oNumtwo = document.getElementById("num2");
var oNumthree = document.getElementById("num3");
var oNumfour = document.getElementById("num4");
var i = 0;
setInterval(updateNum, 10);
updateNum();
function updateNum()
{
if(oNumone.innerHTML<30)
oNumone.innerHTML = ++i
if(oNumtwo.innerHTML<66)
oNumtwo.innerHTML = ++i
if(oNumthree.innerHTML<88)
oNumthree.innerHTML = ++i
if(oNumfour.innerHTML<666)
oNumfour.innerHTML = ++i }
}
</script>

复制上面的代码,即可实现。
附:JS通过元素的name属性获取元素
使用document对象的getElementsByName()方法可以通过元素的name属性获取元素,通常用于获取表单元素。与getElementById()方法不同的是,使用该方法的返回值是一个数组,而不是一个元素,如果想通过name属性获取页面中唯一的元素,可以获取返回数组中下标值为0的元素。
ep:
<input type="text" name="love" id="loveyou" value="sports"/>

<input type="text" name="love" id="loveyou" value="art"/>
获取其value值:
<script language="JavaScript">
alert(document.getElementsByName("love")[0].value);
结果会输出:sports

纯JavaScript制作动态增加的网页数字的更多相关文章

  1. Javascript的动态增加‘类’的方法

    1.我们可以为每一个实例对象增加方法.也就是说我们在每次使用‘类’之外的方法时候,都需要创建一次. function Dog(){ window.alert('I  am a dog!'); } va ...

  2. JQuery插件制作动态网页

    运用JQuery插件制作动态网页   前  言 JQuery 今天我给大家介绍一个运用JQuery插件制作的动态网页--iphone 5C 宣传页面.这个网页中运用到了fullpage.js和move ...

  3. 【前端酷站】分享一个纯 Javascript 的图表库与立体像素风制作~

    今天小编为大家推荐一个神奇的酷站.ECharts,一个纯 Javascript 的图表库. 以下是各个几个不错的界面的介绍: 首页:http://echarts.baidu.com/ 在首页有完整的说 ...

  4. 有人说,即使没有JavaScript,你也可以做网页。在纯HTML

    有人说,即使没有JavaScript,你也可以做网页.在纯HTML +服务器端语言理论中也可以完成所有功能,那么,为什么以及在哪里存在JavaScript?   JS,全称JavaScript   在 ...

  5. JS事件 什么是事件?JavaScript 创建动态页面。事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。

    什么是事件 JavaScript 创建动态页面.事件是可以被 JavaScript 侦测到的行为. 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件. 比如说,当用户单击 ...

  6. 在SAP UI中使用纯JavaScript显示产品主数据的3D模型视图

    在Jerry写这篇文章时,通过Google才知道,SAP其实是有自己的3D模型视图显示解决方案的. 故事要从Right Hemisphere说起,这是一家专业的企业级2D/3D模型浏览及转换的软件供应 ...

  7. 如何用iframe标签以及Javascript制作时钟?

    如何利用iframe标签以及Javascript制作时钟? 如何制作一个时钟呢?效果如下图所示: 这里的时钟会不停的走,但是下面的页面是不会变得,这样就实现了我们想要的效果了.下面我将分为以下几个方面 ...

  8. 5.11-5.15javascript制作动态表格

    制作动态表格的主要是运用js中表格类的insertRow.insertCell简易添加行和列的代码,不过要注意每行添加的表格是有位置行编号的,每行的编号为rows.length-1,增加的表格内的标签 ...

  9. 理解Javascript的动态语言特性

    原文:理解Javascript的动态语言特性 理解Javascript的动态语言特性 Javascript是一种解释性语言,而并非编译性,它不能编译成二进制文件. 理解动态执行与闭包的概念 动态执行: ...

  10. 如何使用纯 CSS 制作四子连珠游戏

    序言:你是否想过单纯使用 CSS 也可以制作一款游戏?甚至可以双人对决!这是一篇非常有趣的文章,作者详细讲解了使用纯 CSS 制作四子连珠游戏的思路以及使用奇淫巧技解决困难问题的方法.因为案例本身比较 ...

随机推荐

  1. CircleIndicator组件,使指示器风格更加多样化

    UI界面是应用程序可视化必不可少的部分.设计精致的UI界面可以使得整个可视化应用程序给用户留下深刻的印象,是改善用户界面体验最直接的方式. ArkUI开发框架为开发者提供了丰富的UI原生组件,如Nav ...

  2. C++ 编程入门指南:深入了解 C++ 语言及其应用领域

    C++ 简介 什么是 C++? C++ 是一种跨平台的编程语言,可用于创建高性能应用程序. C++ 是由 Bjarne Stroustrup 开发的,作为 C 语言的扩展. C++ 为程序员提供了对系 ...

  3. 报表格式太难?一文教你Excel融合分析

    Excel是我们最经常使用的处理报表工具了,尤其是金融行业更是需要天天和报表打交道.但是Excel有一个问题,如果面对的数据庞杂,则处理起来就会相当麻烦,当需要从多个数据源获取数据来制作一个报表时,这 ...

  4. Qt 实现涂鸦板一:简易涂鸦板

    新建一个Qt项目,在 .h 文件中写入 #pragma once #include <QtWidgets/QWidget> #include "ui_xuexi.h" ...

  5. openGauss数据与PostgreSQL的差异对比

    openGauss 数据与 PostgreSQL 的差异对比 前言 openGauss 数据库已经发布 2.0.1 版本了,中启乘数科技是一家专业的专注于极致性能的数据库服务提供商,所以也关注 ope ...

  6. MogDB/openGauss 3.0 扩容及缩容

    MogDB/openGauss 3.0 扩容及缩容 本文出处:https://www.modb.pro/db/452139 一.概述 背景信息 gs_expansion 工具对数据库的备机进行扩容,支 ...

  7. HarmonyOS CPU与I/O密集型任务开发指导

      一.CPU密集型任务开发指导 CPU密集型任务是指需要占用系统资源处理大量计算能力的任务,需要长时间运行,这段时间会阻塞线程其它事件的处理,不适宜放在主线程进行.例如图像处理.视频编码.数据分析等 ...

  8. HDC.Together2023 HarmonyOS学生公开课议程抢先看!

     未来已来,见证相遇 万众瞩目的HarmonyOS学生公开课 于8月6日9:30正式起航 关注HarmonyOS生态前景 聚焦HarmonyOS新技术 畅谈HarmonyOS未来 把握时代发展机遇,让 ...

  9. CentOS添加一个新的硬盘分区到挂载的过程

    1.分区 分区工具fdisk用法介绍    fdisk命令参数介绍    p.打印分区表.    n.新建一个新分区.    d.删除一个分区.    q.退出不保存.    w.把分区写进分区表,保 ...

  10. 淘宝二面:MySQL里有2000万条数据,但是Redis中只存20万的数据,如何保证redis中的数据都是热点数据?

    引言 在当今互联网领域,尤其在大型电商平台如淘宝这样的复杂分布式系统中,数据的高效管理和快速访问至关重要.面对数以千万计的商品.交易记录以及其他各类业务数据,如何在MySQL等传统关系型数据库之外,借 ...