JS与HTML结合实现流程进度展示条思路详解


Posted in Javascript onSeptember 03, 2017

效果如下:

JS与HTML结合实现流程进度展示条思路详解

一、设计思路

分为以下几步(仅供参考)

【竖线线】

这个采用ul的list标签制作,保证了可随时添加,以及纵向排布

【小圆圈】

html标签好像没有提供小圆圈标签,此处采用,div添加弧度角完成,,正方形的div添加弧度等于div的长(或者宽),就能够实现小圆圈。带子就更简单了,,div里直接添加文字即可

【文字】

文字要求紧跟小圆圈,,且与小圆圈保持同一水平高度,此处采用,position: absolute;设置top完成同一水平高度的布局

【动态效果】

前端的动态效果,不用说肯定由Javascript完成,,此处主要需要设置两个事件即,

鼠标移入事件onmouseover=”on_mous_move(‘info_name_1')”

鼠标移出事件onmouseout=”on_mous_out(‘info_name_1')”

主要逻辑就是给文字前加入❤和前后的两个空格,以及删除加入内容

【注意】

一个空格对于js来说其实是6个字符“ ;”,所以在切割的时候需要注意

。。。。就这么多,下面是实现的源码

--------------------------------------------------------------------------------

二、实现源码

源码如下,仅供参考:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>一个好看的进度页面</title>
</head>
<body>
<style type="text/css">
  * {
    margin: 0;
    padding: 0;
    list-style-type: none;
  }
  a, img {
    border: 0;
  }
  body {
    background: #f2f2f2;
    font: 12px/180% Arial, Helvetica, sans-serif, "新宋体";
  }
  /* stepInfo */
  .stepInfo {
    position: relative;
    background: #f2f2f2;
    margin: 80px auto auto 100px;
    height: 240px;
  }
  .stepInfo ul {
    /*float: left;*/
    height: 100%;
    width: 0.6em;
    background: #45a0f3;
  }
  .stepIco {
    /*圆形显示*/
    border-radius: 1.4em;
    padding: 0.2em;
    background: #45a0f3;
    text-align: center;
    line-height: 1.4em;
    color: #fff;
    position: absolute;
    width: 1.4em;
    height: 1.4em;
  }
  .stepIco1 {
    left: -0.7em;
    top: -1%;
  }
  .stepIco2 {
    left: -0.7em;
    top: 50%;
  }
  .stepIco3 {
    left: -0.7em;
    top: 95%;
  }
  .stepText {
    color: #666;
    margin-top: 0.2em;
    width: 4em;
    text-align: center;
    margin-left: -1.4em;
  }
  .info {
    /*信息布局及颜色*/
    position: absolute;
    font-size: large;
    color: black;
    margin: 0 0 0 25px;
    width: 200px;
    color: #45a0f3;
  }
  .info_1 {
    top: -1%;
  }
  .info_2 {
    top: 50%;
  }
  .info_3 {
    top: 95%;
  }
</style>
<script type="text/javascript">
  function on_mous_move(name) {
    var info = document.getElementsByName(name)[1];
    var value = info.innerHTML;
    info.innerHTML = " ❤ " + value;
    var div_info = document.getElementsByName(name)[0];
    div_info.style.backgroundColor = "#47009b";
  }
  function on_mous_out(name) {
    var info = document.getElementsByName(name)[1];
    var value = info.innerHTML;
    info.innerHTML = value.substr(13, value.length);
    var div_info = document.getElementsByName(name)[0];
    div_info.style.backgroundColor = "#45a0f3";
  }
</script>
<div class="stepInfo">
  <ul>
    <li></li>
    <li></li>
  </ul>
  <div class="stepIco stepIco1" name="info_name_1">1</div>
  <div class="info info_1" onmouseover="on_mous_move('info_name_1')" onmouseout="on_mous_out('info_name_1')">
    <strong name="info_name_1">打开冰箱</strong>
  </div>
  <div class="stepIco stepIco2" name="info_name_2">2</div>
  <div class="info info_2" onmouseover="on_mous_move('info_name_2')" onmouseout="on_mous_out('info_name_2')">
    <strong name="info_name_2">把大象放进去</strong>
  </div>
  <div class="stepIco stepIco3" name="info_name_3">3</div>
  <div class="info info_3" onmouseover="on_mous_move('info_name_3')" onmouseout="on_mous_out('info_name_3')">
    <strong name="info_name_3">关上冰箱</strong>
  </div>
</div>
</body>
</html>

总结

以上所述是小编给大家介绍的JS与HTML结合实现流程进度展示条,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
js获取提交的字符串的字节数
Feb 09 Javascript
基于gulp合并压缩Seajs模块的方式说明
Jun 14 Javascript
Web打印解决方案之证件套打的实现思路
Aug 29 Javascript
vue bootstrap小例子一枚
Jun 09 Javascript
AngularJS实现表单元素值绑定操作示例
Oct 11 Javascript
vue 多入口文件搭建 vue多页面搭建的实例讲解
Mar 12 Javascript
vue 实现全选全不选的示例代码
Mar 29 Javascript
微信小程序用户位置权限的获取方法(拒绝后提醒)
Nov 15 Javascript
koa大型web项目中使用路由装饰器的方法示例
Apr 02 Javascript
node 文件上传接口的转发的实现
Sep 23 Javascript
解决vue axios跨域 Request Method: OPTIONS问题(预检请求)
Aug 14 Javascript
解决nuxt 自定义全局方法,全局属性,全局变量的问题
Nov 05 Javascript
JS实现简单的选择题测评系统代码思路详解(demo)
Sep 03 #Javascript
JS实现页面内跳转的简单代码
Sep 03 #Javascript
初探JavaScript 面向对象(推荐)
Sep 03 #Javascript
jquery+css实现下拉列表功能
Sep 03 #jQuery
使用JavaScript实现点击循环切换图片效果
Sep 03 #Javascript
jQuery中.attr()和.data()的区别分析
Sep 03 #jQuery
Angular4表单验证代码详解
Sep 03 #Javascript
You might like
UCenter中的一个可逆加密函数authcode函数代码
2010/07/20 PHP
ThinkPHP3.1新特性之动态设置自动完成和自动验证示例
2014/06/19 PHP
php+ajax实现无刷新分页的方法
2014/11/04 PHP
php getcwd与dirname(__FILE__)区别详解
2016/09/24 PHP
php抛出异常与捕捉特定类型的异常详解
2016/10/26 PHP
Laravel框架验证码类用法实例分析
2019/09/11 PHP
javascript 写类方式之二
2009/07/05 Javascript
ExtJs GridPanel简单的增删改实现代码
2010/08/26 Javascript
jQuery Mobile页面跳转后未加载外部JS原因分析及解决
2013/03/18 Javascript
javascript中对Attr(dom中属性)的操作示例讲解
2013/12/02 Javascript
针对初学者的jQuery入门指南
2015/08/15 Javascript
javascript日期处理函数,性能优化批处理
2015/09/06 Javascript
jQuery中的ajax async同步和异步详解
2015/09/29 Javascript
textarea 在浏览器中固定大小和禁止拖动的实现方法
2016/12/03 Javascript
JS图片压缩(pc端和移动端都适用)
2017/01/12 Javascript
微信小程序 增、删、改、查操作实例详解
2017/01/13 Javascript
Node.js调试技术总结分享
2017/03/12 Javascript
angular实现IM聊天图片发送实例
2017/05/08 Javascript
webpack 1.x升级过程中的踩坑总结大全
2017/08/09 Javascript
JS实现二维数组横纵列转置的方法
2018/04/17 Javascript
Vue-不允许嵌套式的渲染方法
2018/09/13 Javascript
Vue使用mixin分发组件的可复用功能
2019/09/01 Javascript
Python爬虫实例扒取2345天气预报
2018/03/04 Python
在Python中Dataframe通过print输出多行时显示省略号的实例
2018/12/22 Python
使用python实现名片管理系统
2020/06/18 Python
keras 指定程序在某块卡上训练实例
2020/06/22 Python
Django-imagekit的使用详解
2020/07/06 Python
python3.5的包存放的具体路径
2020/08/16 Python
Python爬取网站图片并保存的实现示例
2021/02/26 Python
新大陆软件面试题
2016/11/24 面试题
本科毕业生求职自荐信
2014/02/03 职场文书
大学竞选班长演讲稿
2014/04/24 职场文书
2014年预备党员学习新党章思想汇报
2014/09/15 职场文书
2014年妇幼卫生工作总结
2014/12/09 职场文书
Django基础CBV装饰器和中间件
2022/03/22 Python
Java基础——Map集合
2022/04/01 Java/Android