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. delphi 数组复制利用CopyMemory 最为完美

    在各网站的文章里面,见复制数据的方法中,有move的,有system.copy的,而要实际应用中,这两种方法,并不是很完美,会遇到一些问题,比如copy在记录里面的复制时,编译都过不去,而CopyMe ...

  2. PHP的日志记录-错误与异常记录

    PHP的日志记录-错误与异常记录 提到 Nginx + PHP 服务的错误日志,我们通常能想到的有 Nginx 的 access 日志.error 日志以及 PHP 的 error 日志.虽然看起来是 ...

  3. Linux档案权限与目录配置

    一.档案权限: Linux 最优秀的地方之一,就在于他的多人多任务环境.而为了让各个使用者具有较保密的档案数据,因此档案的权限管理就变的很重要了. Linux 一般将档案可存取的身份分为三个类别,分别 ...

  4. Mac下使用终端连接远程使用ssh协议的git服务器

    最近换了台新电脑, MacBook pro,拿到新电脑之后小小心喜了一下(终于解脱windows的束缚拥抱mac啦), 然后就开始苦逼的安装各种开发环境了. 之前在windows上使用tortoise ...

  5. 笔记：Hibernate 框架配置说明

    下载 Hibernate ,打开地址 www.hibernate.org ,点击 Hibernate ORM -> Downloads 下载 4.3.11 版本,要使用Hibernate 需要把 ...

  6. gulp工程化工具

    gulpfile.js var gulp = require('gulp'); var rename = require('gulp-rename') var pump = require('pump ...

  7. 【Darwin】 越狱后玩耍IPhone系统

    玩耍IOS系统 大家都知道IOS是自Mac OS修改而来的.而Mac OS和IOS的共同核心是Darwin,其基于FreeBSD发展而来,整体而言也是个类Unix系统.之前把自己的手机越狱之后正好开始 ...

  8. 一周Maven框架学习随笔

    第一次写博客,可能写得不是很好,但是希望自己持之以恒,以后会更好.也希望通过写博客记录随笔,让自己本身有所收获. 下面是今天的maven总结: maven个人理解中是Maven项目对象模型(POM), ...

  9. hibernate框架学习笔记12：查询优化

    类级别查询优化: 创建一个实体类: package domain; import java.util.HashSet; import java.util.Set; //客户实体 public clas ...

  10. 用Python登录好友QQ空间点赞

    记得之前跟我女票说过,说要帮她空间点赞,点到999就不点了.刚开始还能天天记得,但是后来事情一多,就难免会忘记,前两天点赞的时候忽然觉得这样好枯燥啊,正好也在学Python,就在想能不能有什么方法能自 ...