您的位置：首页 > Web前端 > JavaScript

第一次接触javascript脚本：进度条脚本

2016-03-18 17:11 465 查看

来公司实习半个月了，前天被拉过去做前端，虽然我各个方面都菜，但是前端还真是没碰过。

小任务：写一个封装好的进度条

对于java和c++都只有理论学习过，所以第一次做的时候效果达到了但是没有用面向对象的思想去写，被师兄说了。

那么什么叫做面向对象的思想呢？不太明白，如何用面向对象的思想写一个脚本组件封装？

网上看了许多人的作品和源码，自己模仿着鼓捣出来，有点激动，恩，放上来作为自己的第一篇blog也好。

激励自己日后多学习多记录，温故而知新。

源代码如下：

脚本部分：

function ProcessBar() {

   this.width = 500;

   this.height = 40;

   this.top = 100;

   this.left = 20;

   this.foreImg = "./red.jpg";

   this.backImg = "./back.jpg";

   this.foreDiv = document.createElement("div");

   this.backDiv = document.createElement("div");

   this.nowLength = 0;

    //获取输入框的进度值：

   $(document).ready(function() {

       $("#ipt1").click(function() {

           num = $("#tes1").val();

       });

   });

   ProcessBar.nowObj = this;



   this.init = function() {

       this.foreDiv.style.backgroundImage = "url(" + this.foreImg + ")";

       this.foreDiv.style.position = "absolute";

       this.foreDiv.style.width = this.nowLength;

       this.foreDiv.style.height = this.height;

       this.foreDiv.style.textAlign = "center";

       this.foreDiv.style.fontSize = "20px";

       this.foreDiv.appendChild(document.createTextNode(""));





       this.backDiv.style.backgroundImage = "url(" + this.backImg + ")";

       this.backDiv.style.position = "absolute";

       this.backDiv.style.width = this.width;

       this.backDiv.style.height = this.height;



       document.body.appendChild(this.backDiv);

       document.body.appendChild(this.foreDiv);

   }


9176

   this.changeMode = function() {

       window.setInterval(ProcessBar.nowObj.moving,20);//系统每隔多少时间执行该函数

   }

   this.moving = function() {

       ProcessBar.nowObj.nowLength = num;

       ProcessBar.nowObj.foreDiv.style.width = ProcessBar.nowObj.nowLength*5;

       ProcessBar.nowObj.foreDiv.firstChild.data = num + "%";

   }

}

var num;

var processBar = new ProcessBar();

processBar.init();

html部分：

<html>

<head>

<title>进度条</title>

<link rel="stylesheet" type="text/css" href="./myScript.css">

<script type="text/javascript" src="./jquery.js"></script>

<body>

<input type="button" id="ipt1" value="submit" onclick="processBar.changeMode();">



<p>设置进度值: <input type="text" id="tes1" value="50"></p>

<script type="text/javascript" src="./myScript.js"></script>

</body>

</html>

备注：因为有用到了jQuery，因此需要自己加载jQuery库

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航