JavaScript css3进度条

使用css3实现进度条

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        #id1{

            /*background-color: red;*/

            border: solid 1px red;

            height: 30px;

            width: 800px;

        }

        .ni{

            height: 30px;

            width: 0px;

            background-color: green;

            animation: func 5s linear forwards;

        }

        @keyframes func{

            0% {

                width: 0px;

            }

            100%

            {

            width: 500px;

            }

        }

    </style>

</head>

<body>

    <div id="id1">

        <div class="ni">

        </div>

    </div>

</body>

<script>

JavaScript 进度条

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        #id1{

            background-color: red;

            height: 30px;

            width: auto;

        }

    </style>

</head>

<body>

    <div id="id1">

    </div>

</body>

<script>

    <!--通过使用重复定时器,实现进度条-->

    var div1 = document.getElementById('id1');

    var width =0;

    var time1 = setInterval(function () {

        width+=10;

        console.log(width);

        div1.style.width = width +'px';

        if (width >= 1000){

            clearInterval(time1)

            }

    },100);

</script>

</html>

使用JavaScript简单实现乘法表

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div id="id1">

    </div>

</body>

<script>

    for (var i=1;i<=9;i++){

        for (var j=1;j<=i;j++){

    //        console.log(j+"*"+i+"="+j*i);

            document.write(j+'*'+i+'='+i*j+'     ');

        }

        document.write('<br>')

    }

</script>

</html>

JavaScript 以及 css3进度条的更多相关文章

  1. JS框架_(JQuery.js)纯css3进度条动画

    百度云盘 传送门 密码:wirc 进度条动画效果: <!DOCTYPE html> <html lang="zh"> <head> <me ...

  2. CSS3进度条动画

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  3. css3 进度条

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>1 ...

  4. 分享9款极具创意的HTML5/CSS3进度条动画

    1.HTML5/CSS3图片加载进度条 可切换多主题 今天要分享的这款HTML5/CSS3进度条模拟了真实的图片加载场景,插件会默认去从服务器下载几张比较大的图片,然后让该进度条展现当前读取图片的进度 ...

  5. 9款极具创意的HTML5/CSS3进度条动画（免积分下载）

    尊重原创,原文地址:http://www.cnblogs.com/html5tricks/p/3622918.html 免积分打包下载地址:http://download.csdn.net/detai ...

  6. 超赞的CSS3进度条 可以随进度显示不同颜色

    原文:超赞的CSS3进度条 可以随进度显示不同颜色 现在的WEB已经不是以前的WEB了,传输更大的数据量,有着更加复杂的计算,这就需要利用进度条来提高用户体验,必要时可以让用户耐心等待,不至于因操作卡 ...

  7. 9款极具创意的HTML5/CSS3进度条动画

    今天我们要分享9款极具创意的HTML5/CSS3进度条动画,这些进度条也许可以帮你增强用户交互和提高用户体验,喜欢的朋友就收藏了吧. 1.HTML5/CSS3图片加载进度条 可切换多主题 今天要分享的 ...

  8. 【常见】CSS3进度条Loading动画

    现在,GIF 格式的进度条已经越来越少,CSS 进度条如雨后春笋般涌现.CSS3的崛起,更使得动态效果得以轻松实现,未来,必定是CSS3的天下,所以今天我就来分享一下几个常见的CSS3进度条Loadi ...

  9. JavaScript之Loading进度条

    一个loading进度条,定义一个fakeProgress方法,定位一个URL,然后setTimeout设置跳转时间我们就能看到我们要打开的URL网址了. 这个链接我就直接链接到我的新浪博客去了,算是 ...

随机推荐

  1. Python3 多线程编程（thread、threading模块)

    threading是对thread的封装. 1.开启线程: t=threading.Thread(target=sayhi,args=('hh',)) t.start() 或者先建一个Thread的继 ...

  2. Open source operational tools

    操作系统:Centos,Ubuntu,Redhat,suse,Freebsd 网站服务:nginx,apache,lighttpd,php,tomcat,resin 数据   库:MySQL,Mari ...

  3. Algorithm --> KMP算法

    KMP算法 一.传统字符串匹配算法 /* * 从s中第sIndex位置开始匹配p * 若匹配成功,返回s中模式串p的起始index * 若匹配失败,返回-1 */ ) { ; || p.length( ...

  4. 00_Linux介绍_我的Linux之路

    原文章发布于特克斯博客www.susmote.com 什么是操作系统 操作系统(Operating System,简称OS)是管理和控制计算机硬件与软件资源的计算机程序,是直接运行在"裸机& ...

  5. Object类-----java

    Object类是所有类的父类,如果一个类没有使用extends关键字明确标识继承另一个类,那么这类默认继承object类 Object类中的方法,适合所有子类. 1 toString()方法在Obje ...

  6. 光环国际联合阿里云推出“AI智客计划”

    2018阿里巴巴云栖大会深圳峰会3月28日.29日在大中华喜来登酒店举行,阿里云全面展示智能城市.智能汽车.智能生活.智能制造等产业创新. 3月28日下午,以"深化产教融合,科技赋能育人才& ...

  7. JDK1.8源码(六)——java.util.LinkedList 类

    上一篇博客我们介绍了List集合的一种典型实现 ArrayList,我们知道 ArrayList 是由数组构成的,本篇博客我们介绍 List 集合的另一种典型实现 LinkedList,这是一个有链表 ...

  8. 记录python接口自动化测试--pycharm执行测试用例时需要使用的姿势（解决if __name__ == "__main__":里面的程序不生效的问题）(第三目)

    1.只运行某一条case 把光标移动到某一条case后面,然后右键,选择"Run..."来运行程序 此时,pycharm会只运行光标所在位置的这一条case 2.如果想执行全部ca ...

  9. C语言程序设计第三次作业--选择结构（1）

    Deadline: 2017-10-29 22:00 一.学习要点 掌握关系运算符和关系表达式 掌握如何判断两个实数相等 掌握常用数学函数的使用 掌握逻辑运算符和逻辑表达式 理解逻辑运算的短路特性 掌 ...

  10. 如何解决python中使用flask时遇到的markupsafe._compat包缺失的问题

    在使用python进行GUI的程序编写时,使用flask时出现错误: 在使用pip freeze进行查看已下载的包时显示MarkupSafe与Jinjia2都已安装: 在网上查阅一些资料后发现,在py ...