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. Codeforces Round #467 (Div. 1). C - Lock Puzzle

    #include <algorithm> #include <cstdio> #include <cstring> #include <iostream> ...

  2. analyzing problems

    If you talking to a friend or talking to a family member ,you can say:what's the metter or What's go ...

  3. 使用python和pygame绘制繁花曲线

    前段时间看了一期<最强大脑>,里面展示了各种繁花曲线组合成的非常美丽的图形,一时心血来潮,想尝试自己用代码绘制繁花曲线,想怎么组合就怎么组合. 真实的繁花曲线使用一种称为繁花曲线规的小玩意 ...

  4. 笔记：Hibernate 持久化类标注说明

    持久化类标注 标注 @Entity:注解声明该类是一个Hibernate的持久化类 标注 @Table:指定该类映射的表 参数 name:指定映射数据库表的名称 参数 uniqueConstraint ...

  5. MyBatis报错：Caused by: java.lang.NumberFormatException: For input string: "XX"

    <select id="sltTreatment" resultType="com.vitaminmd.sunny.core.bo.Treatment"& ...

  6. QQ数据库管理

    1,数据库关系图 ##用例1:查询数据 #01.查询QQ号码为54789625的所有好友信息,包括QQ号码,昵称,年龄 select RelationQQID as QQ号码,NickName as ...

  7. ASP.NET没有魔法——ASP.NET MVC Razor与View渲染

    对于Web应用来说,它的界面是由浏览器根据HTML代码及其引用的相关资源进行渲染后展示给用户的结果,换句话说Web应用的界面呈现工作是由浏览器完成的,Web应用的原理是通过Http协议从服务器上获取到 ...

  8. 【Java EE】从零开始写项目【总结】

    从零开发项目概述 最近这一直在复习数据结构和算法,也就是前面发出去的排序算法八大基础排序总结,Java实现单向链表,栈和队列就是这么简单,十道简单算法题等等... 被虐得不要不要的,即使是非常简单有时 ...

  9. 20145237 《Java程序设计》第三周学习总结

    20145237 <Java程序设计>第3周学习总结 教材学习内容总结 第四章主要讲了Java基本类型中的类类型,如何定义类.构造函数.使用标准类.基本类型打包器.数组复制.字符串等内容查 ...

  10. 《高级软件测试》11.15.全组完成jira安装，开始任务的部分书写

    今日任务完成情况如下: 小段:完成linux环境上jira的安装,并将jira的安装过程录制下来 小费:完成linux环境下jira的安装,开始部分任务的书写 小高:完成了jira的安装,并进一步熟悉 ...