原生JS实现非常好看的计数器
今天给大家分享一个用原生JS实现的好看计数器，效果如下：
以下是代码实现，欢迎大家复制粘贴和收藏。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>原生JS实现一个好看计数器</title>
<style>
* {
font-family: '微软雅黑', sans-serif;
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #000d0f;
}
.container {
position: relative;
width: 80px;
height: 50px;
border-radius: 40px;
border: 2px solid rgba(255, 255, 255, 0.2);
transition: 0.5s;
}
.container:hover {
width: 120px;
border: 2px solid rgba(255, 255, 255, 1);
}
.container .next {
position: absolute;
top: 50%;
right: 30px;
display: block;
width: 12px;
height: 12px;
border-top: 2px solid #fff;
border-left: 2px solid #fff;
z-index: 1;
transform: translateY(-50%) rotate(135deg);
cursor: pointer;
transition: 0.5s;
opacity: 0;
}
.container:hover .next {
opacity: 1;
right: 20px;
}
.container .prev {
position: absolute;
top: 50%;
left: 30px;
display: block;
width: 12px;
height: 12px;
border-top: 2px solid #fff;
border-left: 2px solid #fff;
z-index: 1;
transform: translateY(-50%) rotate(315deg);
cursor: pointer;
transition: 0.5s;
opacity: 0;
}
.container:hover .prev {
opacity: 1;
left: 20px;
}
#box span {
position: absolute;
display: none;
width: 100%;
height: 100%;
text-align: center;
line-height: 46px;
color: #00deff;
font-size: 24px;
font-weight: 700;
user-select: none;
}
#box span:nth-child(1) {
display: initial;
}
</style>
</head>
<body>
<div class="container">
<div class="next" onclick="nextNum()"></div>
<div class="prev" onclick="prevNum()"></div>
<div id="box">
<span>0</span>
</div>
</div>
<script>
var numbers = document.getElementById('box')
for (let i = 0; i < 100; i++) {
let span = document.createElement('span')
span.textContent = i
numbers.appendChild(span)
}
let num = numbers.getElementsByTagName('span')
let index = 0
function nextNum() {
num[index].style.display = 'none'
index = (index + 1) % num.length
num[index].style.display = 'initial'
}
function prevNum() {
num[index].style.display = 'none'
index = (index - 1 + num.length) % num.length
num[index].style.display = 'initial'
}
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
使用JavaScript制作一个简单的计数器的方法
设计思想 该方法的关键是Cookie技术和动态图像特性的综合运用.使用Cookie,可以在用户端的硬盘上记录用户的数据,下次访问此站点时,即可读取用户端硬盘的Cookie,直接得知来访者的身份和访问次数等有关信息.JavaScript中通过document.cookie属性访问Cookie,这个属性包括名字.失效日期.有效域名.有效URL路径等.用等号分开的名字和其值是Cookie的实际数据,本例中用来存储该访问者访问该页面的次数.通过把Web页中的图像映射到一个Images数组,一定条件下修改
-
javascript下计数器每秒自动加1
var a = 0; function tran(){ var time = document.getElementById('time'); time.innerHTML = a++; window.setTimeout('tran()',1000); } window.setTimeout('tran()',1000); [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
-
js计数器代码
复制代码 代码如下: <script Language="javascript"> var seconds = 10;//记数时间 var handle;//事件柄 //开始记数器 function startTimer() { handle = setInterval("timer()",1000); } //结束记数器 function stopTimer() { clearInterval(handle); seconds =
-
用JAVASCRIPT帮我写个计数器
你们能用JAVASCRIPT帮我写个计数器吗?要带文本的那种,我在ASP那里要用呀?拜托.......... 我自己写了一个,是不带文本的,谁能帮我弥补一下呢? <%@ Language=Jscript %> <% Application.Lock(); Application("Counter") = parseInt(Application("Counter")) + 1;
-
JavaScript实现计数器基础方法
本文实例为大家分享了js实现计数器的具体代码,供大家参考,具体内容如下 通过使用 JavaScript,设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行.称之为计时事件. 在 JavaScritp 中使用计时事件是很容易的,两个关键方法是: setInterval() - 间隔指定的毫秒数不停地执行指定的代码. setTimeout() - 暂停指定的毫秒数后执行指定的代码 Note: setInterval() 和 setTimeout() 是 HTML DOM Window对象的两
-
JS实现简单计数器
用HTML CSS和JavaScript实现简单计数器,有加.减和零三个按钮,分别实现加一.减一和归零操作.下面先看一下效果图. HTML代码 <div class="body"> <div class="text"> <font>Counter</font> </div> <div class="count" > <span id="demo" c
-
原生JS实现非常好看的计数器
今天给大家分享一个用原生JS实现的好看计数器,效果如下: 以下是代码实现,欢迎大家复制粘贴和收藏. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &
-
原生JS实现N级菜单的代码
需求分析 简单的分析一下,要实现N级菜单,首先从布局入手,即判断是否有下级菜单 1.没有下一级菜单,直接排列 2.有下级菜单,又分为下级菜单排放位置,和在上级菜单显示类似 '>' 的符号,效果如图: 图:1 初步实现 1.实现是否存在 > 注意: 下面凡是担忧 xxx===yyy ? xxx : xxx都是利用三元表达式,来表达思路. HTML结构如下: 图:2 •要实现图一的效果,我们只需要判断li标签里面的children.length===2 ? 'span存在' : 'span移
-
用原生JS实现简单的多选框功能
废话不多说了,直接给大家贴代码了,具体代码如下所示: <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <body> <input id="cheakAll" type="checkbox">全选 <div> <
-
基于原生JS实现分页效果的示例代码
这个只是一个分页的demo,主要是思路整理(很久之前项目用的东西) 分页实现的效果 主要是 左侧上一页 右侧是下一页 中间显示主要是超过5个显示 省略号 然后是可配置选项 实现之后的效果 首先需要初始化该对象的一些基本属性,显示总页码数,中间显示的页面数, 添加一个回调函数,在页面变化激活回调函数并返回当前页面和一些需要的其他参数 init为对象初始化的方法(里面的参数都是可以写成活的,我这里偷懒了所以写成死的了) 这个里的 z_page 可以接是接口返回的总页数 function Page(o
-
40行原生js代码实现前端简易路由
目录 前言 路由到底是一个什么东西? 实现一个 hashRouter historyRouter memoryRouter 最后做个总结 前言 在使用Vue或者是React 的路由的时候,不是很清楚他们的思路,导致在理解这些思想上出现了很多问题,于是自己实现了一个简易的原生js实现的前端路由,并整理了一下前端会遇到的集中路由模式和区别, 来帮助学习路由 路由到底是一个什么东西? 路由(routing)就是通过互联的网络把信息从源地址传输到目的地址的活动.路由发生在OSI网络参考模型中的第三层即网
-
原生js封装添加class,删除class的实例
一.添加class function addClass(ele,cName) { var arr = ele.className.split(' ').concat(cName.split(" ")); for(var i=0;i<arr.length;i++){ for(var k=arr.length-1;k>i;k--){ (arr[k]==="")&&arr.splice(k,1); (arr[i]===arr[k])&&
-
利用Angularjs和原生JS分别实现动态效果的输入框
在刚开始没有给输入框添加焦点之前,没有任何效果.见下图: 然后点击其中任何一个,焦点就会触发一个动画,动画的结果见图二: 中间的输入登录密码文字,会自动添加到顶部(原谅我没有截取到动画过程的图片). 我测试了一下,这样的效果只有高级浏览器支持(IE只有IE10.IE11.Edge支持). 下面我来把代码贴上来,原理很简单,就是通过事件触发类名的增加和删除.具体的动画由CSS3来实现,这也是为什么低级浏览器不支持的原因. 原生JS实现示例: <!DOCTYPE html> <html la
-
原生js的ajax和解决跨域的jsonp(实例讲解)
最近慢慢感觉,学再多框架,库,都不如老老实实先把基础弄扎实了. 不说废话,先上一个用ajax请求下本地的一个.txt文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> window.onload =function(){ var oBtn = d
-
原生JS实现的放大镜效果实例代码
这是我用原生js写的放大镜效果,与各种各样的框架技术相比,我喜欢使用原生的js,在这里,想和大家一起谈谈原生和框架技术的理解与个人喜好. <!DOCTYPE HTML> <html> <head> <title>js放大镜效果</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <style
-
原生js实现手风琴功能（支持横纵向调用）
话不多说,请看代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>手风琴-支持横纵向调用-原生js封装</title> <link rel="shortcut icon" href="../public/image/favicon.ico" type=&q