原生JS实现非常好看的计数器

2024-04-02 19:04:59 554人浏览八月长安

摘要

今天给大家分享一个用原生js实现的好看计数器，效果如下：以下是代码实现，欢迎大家复制粘贴和收藏。 <!DOCTYPE html> <html lang="e

今天给大家分享一个用原生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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。

--结束END--

本文标题: 原生JS实现非常好看的计数器

本文链接: https://lsjlt.com/news/154351.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

猜你喜欢

原生JS实现非常好看的计数器

今天给大家分享一个用原生JS实现的好看计数器，效果如下：以下是代码实现，欢迎大家复制粘贴和收藏。 <!DOCTYPE html> <html lang="e...

99+

2024-04-02
原生js实现宽度计数器

本文实例为大家分享了js实现宽度计数器的具体代码，供大家参考，具体内容如下一.用原生js实现宽度计数器 1.源码 <!DOCTYPE html> <html la...

99+

2024-04-02
原生js实现简易计算器

本文实例为大家分享了js实现简易计算器的具体代码，供大家参考，具体内容如下最近，博主闲来无聊，就没事用js写了个简易计算器（博主是搞后端的，不是前端>_<）。其实，感觉...

99+

2024-04-02
原生JS实现简单计算器功能

本文实例为大家分享了JS实现简单计算器功能的具体代码，供大家参考，具体内容如下使用html和css写出计算器的基本结构和样式，用原生JS实现计算器的加减乘除运算功能，只能计算简单的...

99+

2024-04-02
原生JS怎么实现简单计算器功能

本篇内容主要讲解“原生JS怎么实现简单计算器功能”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“原生JS怎么实现简单计算器功能”吧!使用html和css写出计算器的基本结构和样式，用原生JS实现计...

99+

2023-06-29
原生js怎样实现倒计时功能

这篇文章主要介绍原生js怎样实现倒计时功能，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！思路：（1）获取日期对象、现在距离1970年的毫秒数、2018年距离1970年的毫秒数、201...

99+

2024-04-02
原生JS实现数码表特效

本文分享一个用原生JS实现的数码时钟特效，效果如下：上面的数字是用的图片生成的，共10张图片如下：实现代码如下，欢迎大家复制粘贴。 <!DOCTYPE html&g...

99+

2024-04-02
如何使用原生js实现倒计时功能

这篇文章给大家分享的是有关如何使用原生js实现倒计时功能的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。<!DOCTYPE html><html&nbs...

99+

2024-04-02
原生js实现计算购物车总金额的示例

随着vue、react、angular等MVVM框架的兴起。让之前需要对dom进行复杂操作才能实现的需求变得如此简单。确实，作为数据驱动dom的框架，让我们在项目中变得愈加游刃有余。...

99+

2023-05-16

js计算购物车总金额 js 购物车总金额
原生Js实现的画廊功能

目录第一种第二种原生Js实现画廊功能，点击图片，在下方出现相应放大图片。给a标签绑定onclick点击事件。这里上方的小图和下方将要展示大图，都是同一张...

99+

2024-04-02
原生JS实现点击数字小游戏

原生JS实现点击数字小游戏，供大家参考，具体内容如下最近公司在季度测试中出了一道很有趣的测试题，要求使用我们自己的黑科技–IVX来实现,感兴趣的朋友可以去了解哦，是真的黑科技，在这...

99+

2024-04-02
JS实现简单计数器

用HTML CSS和JavaScript实现简单计数器，有加、减和零三个按钮，分别实现加一、减一和归零操作。下面先看一下效果图。 HTML代码 <div class="b...

99+

2024-04-02
如何实现JS原生数据双向绑定

这篇文章主要介绍如何实现JS原生数据双向绑定，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！代码如下：<span deep="7">...

99+

2024-04-02
原生JavaScript实现网页版计算器

本文实例为大家分享了JavaScript实现网页版计算器的具体代码，供大家参考，具体内容如下由于无聊看电脑上的系统软件翻到了计算器这个功能，就简单写一下这个计算器的功能吧，这个网页...

99+

2024-04-02
原生js怎么实现对Ajax的封装

这篇文章主要介绍原生js怎么实现对Ajax的封装，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！前言众所周知，jquery在我们日常开发中的使用频率非常高，与js相比，我们省去了冗长的...

99+

2024-04-02
最好用的省市二级联动原生js实现你值得拥有

复制代码代码如下: <script language=javascript> cities = new Object(); cities['台湾']=new Array...

99+

2022-11-15

省市二级联动
js实现简易计数器功能

本文实例为大家分享了js实现简易计数器功能的具体代码，供大家参考，具体内容如下实现简易计数器可进行三个操作,开始计数,暂停计数,复位操作 (使用计时函数事件) <html&...

99+

2022-11-13

js 计数器
原生js实现放大镜的示例分析

这篇文章主要介绍原生js实现放大镜的示例分析，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！原理：左边阴影在左边图片上从左到右移动的时候，右边大框也在右边大图片上从左到右移动（尽管在视...

99+

2024-04-02
原生js如何实现简单的Ripple按钮

这篇文章主要介绍原生js如何实现简单的Ripple按钮，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！整理文档，搜刮出一个原生js实现简单的Ripple按钮的代码，稍微整理精简一下做下...

99+

2024-04-02
JS原生实现轮播图的几种方法

轮播图主要思想就是：在大的容器里，装着一个很长的表，表是容器宽度的整数倍。然后通过更改列表样式里的left属性来实现左右滑动。本文旨在控制滑动五张图片，但在html中使用了七...

99+

2024-04-02