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. IPFS: BitSwap协议(数据块交换)

    原创 2018-01-11 飞向未来 IPFS指南 BitSwap协议 IPFS节点之间是如何进行数据交换的?本文来讲一下这个问题. IPFS在BitTorrent的基础上实现了p2p数据交换协议:B ...

  2. JS常用函数用途小记

    concat() 方法用于连接两个或多个数组. 该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本. var a = [1,2,3]; document.write(a.concat(4,5) ...

  3. 在Ubuntu下如何切换到超级用户

    由于 Ubuntu 是基于 Debian 的 linux 操作系统,在默认的情况下,是没有超级用户(superuser, root)的,但有些系统操作必须有超级用户的权限才能进行,如手动释放内存等. ...

  4. java人民币读法转换

    实现浮点数转换成人民币读法字符串 编写一个程序,将浮点数转换成人民币读法字符串,例如,将1006.333转换为壹千零陆元叁角叁分. 题意分析: 将浮点数分成整数部分和小数部分,分开处理整数部分和小数部 ...

  5. android：layout_weight属性详解

    1. 按比例显示LinearLayout内各个子控件,需设置android:layout_width="0dp",如果为竖直方向的设置android:layout_height=& ...

  6. Oracle查看表空间大小和使用率

    1. 全部表空间的大小select tablespace_name, sum(bytes)/1024/1024 from dba_data_files group by tablespace_name ...

  7. webSocket通讯

    1.使用facebook第三方SRWebSocket进行websocket通讯. pod 'SocketRocket' 2.通讯地址: ws://192.168.1.128:18882/ws 注意:s ...

  8. C#/AutoCAD 2018/ObjectArx/二次开发添加图形对象步骤和添加直线的例子（三）

    1.创建一个图形对象的步骤如下(1)得到创建对象的图形数据库:(2)在内存中创建实体类的一个对象:(3)定义一个指向当前数据库的事务处理:(4)打开图形数据库的块表:(5)打开一个存储实体的块表记录( ...

  9. hibernate框架学习笔记3：API详解

    Configuration对象: package api; import org.hibernate.SessionFactory; import org.hibernate.cfg.Configur ...

  10. web面试题

    1.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? Ie(Ie内核) 火狐(Gecko) 谷歌(webkit) opear(Presto)