javascript MVVM模式做进度条

本文链接：https://blog.csdn.net/cdcdhj/article/details/121058775
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		html,body{
			font-size: 12px;
		}
		.first.ui-slider{
			height: 15px;
			background: white;
			border: 1px solid pink;
			position: relative;
			left: 0px;
			top: 0px;
			width: 1000px;
			text-align: center;
			margin: 0px;
			padding: 0px;
			z-index: -1000;
		}
		.first.ui-slider b,em{
			z-index: 100;
			color: white;
		}
		.first.ui-slider div{
			height: 15px;
			background: pink;
			position: relative;
			left: 0px;
			top: -16px;
			z-index: -100;
		}
		.first.ui-slider span{
			height: 15px;
			width: 20px;
			background: #008000;
			z-index: 9999;
			position: relative;
			top: 15px;
		}
		.second.ui-slider{
			background: white;
			border: 1px solid pink;
			z-index: -1000;
			margin: 0;
			padding: 0;
			height: 15px;
		}
		.second.ui-slider div{
			background: pink;
			height: 15px;
			z-index: 1;

		}
		.second.ui-slider span{
			height: 15px;
			width: 20px;
			background: pink;
			line-height: 20px;
			z-index: 9999;
			position: relative;
			top: -18px;
			color: white;
		}
		.third{
			width: 200px;
			height: 15px;
			border: 1px solid pink;
		}
		.ui-progressbar{
			background: pink;
			height: 15px;
		}
		</style>
	</head>
	<body>
		<div class="first" data-bind="type: 'slider',data: demo1"></div><br/>
		<div class="second" data-bind="type: 'slider',data: demo2"></div><br/>
		<div class="third" data-bind="type: 'progressbar',data: demo3"></div>
		<script language="javascript">
		~(function(){
			//在闭包中获取全局变量
			var window=this||(0,eval)('this');
			//获取页面字体大小，作为创建页面UI尺寸参照物
			var FONTSIZE=function(){
				//获取页面body元素字体大小并转化成整数
				return parseInt(document.body.currentStyle?document.body.currentStyle['fontSize']:getComputedStyle(document.body,false)['fontSize']);
			}();
		
			//视图模型对象
			var VM=function(){
				
				//组件创建策略对象
				var Method={
					/***
					* 进度条组件创建方法
					* dom 进度条容器
					* data 进度条数据模型
					* */
					progressbar:function(dom,data){
						//进度条进度完成容器
						var progress=document.createElement('div'),
						//数据模型数据，结构：{position:50}
						param=data.data;
						//设置进度容器尺寸
						progress.style.width=(param.position||100)+'%';
						//为进度条组件添加UI样式
						progress.className='ui-progressbar';
						//进度完成容器元素插入进度条容器中
						dom.appendChild(progress);
					},
					/***
					* 滑动条组件创建方法
					* dom 滑动条容器
					* data 滑动条数据模型
					* */
					slider:function(dom,data){
						//滑动条拨片
						var bar=document.createElement('span'),
						//滑动条进度容器
						progress=document.createElement('div'),
						//滑动条容量提示信息
						totleText=null,
						//滑动条拨片提示信息
						progressText=null,
						//数据模型数据，结构：{position:60,totle:200}
						param=data.data,
						//容器元素宽度
						width=dom.clientWidth,
						//容器元素横坐标值
						left=dom.offsetLeft,
						//拨片位置（以模型数据中position数据计算）
						realWidth=(param.position||100)*width/100;
						//清空滑动条容器，为创建滑动条做准备
						dom.innerHTML='';
						//如果模型数据中提供容器总量信息(param.totle),则创建滚动条提示文案
						if(param.totle){
							//容器问题提示文案
							text=document.createElement('b');
							//拨片位置提示文案
							progressText=document.createElement('em');
							//设置容器总量提示文案
							text.innerHTML=param.totle;
							//将容器总量提示文案元素添加到滑动条组件中
							dom.appendChild(text);
							//将拨片位置提示文案元素添加到滑动条组件中
							dom.appendChild(progressText);
						}
						//设置滑动条
						setStyle(realWidth);
						//为滑动条组件添加UI样式
						dom.className+=' ui-slider';
						//将进度容器添加到滑动条组件中
						dom.appendChild(progress);
						//将拨片添加到滑动条组件中
						dom.appendChild(bar);
						//设置滑动条
						function setStyle(w){
							//设置进度容器宽度
							progress.style.width=w+'px';
							//设置拨片横坐标
							bar.style.left=w-FONTSIZE/2+'px';
							bar.innerText='||';
							if(progressText){
								//设置拨片提示文案横坐标
								progressText.style.left=w-FONTSIZE/2 *2.4 +'px';
								//设置拨片提示文案内容
								progressText.innerHTML=parseFloat(w/width*100).toFixed(2)+'%';
							}
						}
						//按下鼠标拨片
						bar.onmousedown=function(){
							//移动拨片(鼠标光标在页面中滑动，事件绑定给document是为优化交互体验，使光标可以在页面 中自由滑动)
							document.onmousemove=function(event){
								//获取事件源
								var e =event||window.event;
								var w=e.clinetX-left;
								setStyle(w<width?(w>0?w:0):width);
							}
							//阻止页面滑动选取事件
							document.onselectstart=function(){
								return false;
							};
						};
						document.onmouseup=function(){
							document.onmousemove=null;
							document.onselectstart=null;
						}
					}
				}
				/***
				* 获取视图层组件渲染数据的映射信息
				* dom 组件元素
				* */
				function getBindData(dom){
					//获取组件自定义属性data-bind值
					var data=dom.getAttribute('data-bind');
					//将自定义属性data-bind值转化为对象
					return !!data && (new Function("return ({"+ data +"})"))();
					
				}
				//组件实例方法
				return function(){
					//获取页面中所有元素
					var doms=document.body.getElementsByTagName('*'),
					//元素自定义数据句柄
					ctx=null;
					//ui处理是会向页面中插入元素，此时doms.length会改变，此时动态获取dom.length
					for(var i=0;i<doms.length;i++){
						ctx=getBindData(doms[i]);
						//如果元素是UI组件，则根据自定义属性组件类型，渲染该组件
						ctx.type &&Method[ctx.type]&&Method[ctx.type](doms[i],ctx);
					}
				}
			}();
			//将视图模型对象绑定在window上，供外部获取
			
			window.VM=VM;
		})();
		var demo1={position:60,totle:200},demo2={position:30},demo3={position:80};
		window.onload=function(){
			VM();
		};
css样式写得丑
在这里插入图片描述最后做出来的样子