纯JavaScript制作动态增加的网页数字
看到别的网页上打开,会显示一个动态的数字,感觉这个效果增加了网页的灵动感。就尝试着写代码,最终实现的方法:
会从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制作动态增加的网页数字的更多相关文章
- Javascript的动态增加‘类’的方法
1.我们可以为每一个实例对象增加方法.也就是说我们在每次使用‘类’之外的方法时候,都需要创建一次. function Dog(){ window.alert('I am a dog!'); } va ...
- JQuery插件制作动态网页
运用JQuery插件制作动态网页 前 言 JQuery 今天我给大家介绍一个运用JQuery插件制作的动态网页--iphone 5C 宣传页面.这个网页中运用到了fullpage.js和move ...
- 【前端酷站】分享一个纯 Javascript 的图表库与立体像素风制作~
今天小编为大家推荐一个神奇的酷站.ECharts,一个纯 Javascript 的图表库. 以下是各个几个不错的界面的介绍: 首页:http://echarts.baidu.com/ 在首页有完整的说 ...
- 有人说,即使没有JavaScript,你也可以做网页。在纯HTML
有人说,即使没有JavaScript,你也可以做网页.在纯HTML +服务器端语言理论中也可以完成所有功能,那么,为什么以及在哪里存在JavaScript? JS,全称JavaScript 在 ...
- JS事件 什么是事件?JavaScript 创建动态页面。事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。
什么是事件 JavaScript 创建动态页面.事件是可以被 JavaScript 侦测到的行为. 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件. 比如说,当用户单击 ...
- 在SAP UI中使用纯JavaScript显示产品主数据的3D模型视图
在Jerry写这篇文章时,通过Google才知道,SAP其实是有自己的3D模型视图显示解决方案的. 故事要从Right Hemisphere说起,这是一家专业的企业级2D/3D模型浏览及转换的软件供应 ...
- 如何用iframe标签以及Javascript制作时钟?
如何利用iframe标签以及Javascript制作时钟? 如何制作一个时钟呢?效果如下图所示: 这里的时钟会不停的走,但是下面的页面是不会变得,这样就实现了我们想要的效果了.下面我将分为以下几个方面 ...
- 5.11-5.15javascript制作动态表格
制作动态表格的主要是运用js中表格类的insertRow.insertCell简易添加行和列的代码,不过要注意每行添加的表格是有位置行编号的,每行的编号为rows.length-1,增加的表格内的标签 ...
- 理解Javascript的动态语言特性
原文:理解Javascript的动态语言特性 理解Javascript的动态语言特性 Javascript是一种解释性语言,而并非编译性,它不能编译成二进制文件. 理解动态执行与闭包的概念 动态执行: ...
- 如何使用纯 CSS 制作四子连珠游戏
序言:你是否想过单纯使用 CSS 也可以制作一款游戏?甚至可以双人对决!这是一篇非常有趣的文章,作者详细讲解了使用纯 CSS 制作四子连珠游戏的思路以及使用奇淫巧技解决困难问题的方法.因为案例本身比较 ...
随机推荐
- 05 CMMI(Capability Maturity Model Integration)【软件过程与管理】
CMMI(Capability Maturity Model Integration) CMMI成熟度等级 执行的:过程不可预测,缺乏控制,反应式的 已管理的:项目描绘过程,而且经常是反应式的 已定义 ...
- 2024年:如何根据项目具体情况选择合适的CSS技术栈
2024年:如何根据项目具体情况选择合适的CSS技术栈 (请注意,这是一篇主观且充满个人技术偏好的文章) 方案一: antd/element ui/类似竞品 适合情形: 项目没有设计师 or 大部分人 ...
- 成长计划知识赋能 | 第九期:渐进式深入理解OpenHarmony系统
成长计划知识赋能直播第九期如约而至,面向OpenHarmony初中级开发者,解析OpenHarmony系统架构和驱动框架,助力开发者快速上手OpenHarmony系统开发. 详情见海报内容,资深软 ...
- 1.NCC算法实现及其优化[基础实现篇]
NCC算法实现及其优化 本文将集中探讨一种实现相对简单,效果较好的模板匹配算法(NCC) \[R(x,y)= \frac{ \sum_{x',y'} (T'(x',y') \cdot I'(x+x', ...
- Qt:Qt自适应高分辨率屏幕
现在的电脑分辨率越来越高,DPI也越来越大,使用Qt创建出来的界面,在小分辨率电脑上显示的很好,但是在大分辨率电脑上显示异常,感觉边框被压缩了,看起来很不协调. 从Qt 5.6 还是从Qt 5.14 ...
- 堆结构(Heap)的基本实现【数据结构与算法—TypeScript 实现】
笔记整理自 coderwhy 『TypeScript 高阶数据结构与算法』课程 概念 本质:一种特殊的树结构,由 完全二叉树 实现 多数情况为二叉堆 二叉堆:最大堆.最小堆 最大堆:堆上的每个节点都的 ...
- Spark常见的问题以及解决方案
Spark为什么比Hadoop要快? Spark比hadoop快的原因,我认为主要是spark的DAG机制优于hadoop太多,spark的DAG机制以及RDD的设计避免了很多落盘的操作,在窄依赖的情 ...
- szfpga 详细:高云1N1开发板高云gowin软件使用教程
1.概述 国产FPGA是最近几年起来的产品,具有性价比高特点.高云FPGA,大多用在LED,电机控制,PLC设备上. 高云1N1开发板采用GW1N-LV1QN48C6/I5 FPGA器件.具有低功 ...
- 力扣409(java&python)-最长回文串(简单)
题目: 给定一个包含大写字母和小写字母的字符串 s ,返回 通过这些字母构造成的 最长的回文串 . 在构造过程中,请注意 区分大小写 .比如 "Aa" 不能当做一个回文字符串. 示 ...
- 欢迎 Llama 3:Meta 的新一代开源大语言模型
介绍 Meta 公司的 Llama 3 是开放获取的 Llama 系列的最新版本,现已在 Hugging Face 平台发布.看到 Meta 持续致力于开放 AI 领域的发展令人振奋,我们也非常高兴地 ...