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的热门问题

      最近小编在公众号收到了一些提及比较高的问题,今天总结一下统一回答 目前网络上有一些对ipfs的解读五花八门,各式各样,有看好的,也有打击的,总之一项新技术诞生之初遇到的问题IPFS都遇到了. 问题 ...

  2. 有关Redis的Add和Set方法的比较

    测试发现,如果key已经存在,则调用Redis.Add(key, value)则不能添加或修改此key的内容value: 这样的话,我们在添加一个key和value的时候,不得不判断一次Contain ...

  3. Mycat 介绍

    Mycat 是什么 Mycat是什么?从定义和分类来看,它是一个开源的分布式数据库系统,是一个实现了 MySQL协议的的Server,前端用户可以把它看作是一个数据库代理,用 MySQL客户端工具和命 ...

  4. 1.使用dom4j解析XML文件

    一.dom4j的简介 dom4j是一个Java的XML API,是jdom的升级品,用来读写XML文件的.dom4j是一个十分优秀的JavaXML API,具有性能优异.功能强大和极其易使用的特点,它 ...

  5. python读取三维点云球坐标数据并动态生成三维图像与着色

    关键步骤: 1.首先通过读取.txt文本数据并进行一系列字符串处理,提取显示所需要的相关数据矩阵 2.然后利用python的matplotlib库来进行动态三维显示 备注:matplotlib在显示2 ...

  6. python处理点云数据并生成三维点云模型

    1.python代码: 1 import numpy as np 2 import matplotlib.pyplot as plt 3 from mpl_toolkits.mplot3d impor ...

  7. Redis --> Redis架构设计

    Redis架构设计 一.前言   Redis 是一个开源(BSD许可)的,内存中的数据结构存储系统,它可以用作数据库.缓存和消息中间件. 它支持多种类型的数据结构,如 字符串(strings), 散列 ...

  8. CSS以及JQuery总是忽略掉的小问题

    1.自动居中一列布局需要设置 margin 左右值设置为 auto,而且一定要设置width为一个定值. 2.css3: 3.修改时间SQL(格式) update table set timeColu ...

  9. 痛吻过YY寻找到真爱的三非渣本春招之路

    写下这篇文章可能就不是大家乐于见闻的面经了,更多是深入一些面试细节. 前言 我猜拿到了BAT等一线互联网公司Offer的小伙伴或者那些老鸟看到这条标题的时候会不屑一顾,认为YY这种级别的公司是属于二线 ...

  10. KVM之十：虚拟机在线添加网卡

    1.查看原有网卡信息 #virsh domiflist snale Interface Type Source Model MAC ---------------------------------- ...