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 相关文章推荐
麦鸡的TAB切换功能结合了javascript和css
Dec 17 Javascript
网页开发中的容易忽略的问题 javascript HTML中的table
Apr 15 Javascript
AJAX使用了UpdatePanel后无法使用alert弹出脚本
Apr 02 Javascript
JavaScipt中的Math.ceil() 、Math.floor() 、Math.round() 三个函数的理解
Apr 29 Javascript
无缝滚动改进版支持上下左右滚动(封装成函数)
Dec 04 Javascript
关闭浏览器时提示onbeforeunload事件
Dec 25 Javascript
jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法
Nov 25 Javascript
vue组件文档(.md)中如何自动导入示例(.vue)详解
Jan 25 Javascript
vue自定义指令directive的使用方法
Apr 07 Javascript
webpack.DefinePlugin与cross-env区别详解
Feb 23 Javascript
在实例中重学JavaScript事件循环
Dec 03 Javascript
JS监听Esc 键触发事键
Apr 14 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
PHP开发注意事项总结
2015/02/04 PHP
PHP定时执行任务实现方法详解(Timer)
2015/07/30 PHP
thinkphp修改配置进入默认首页的方法
2017/02/07 PHP
PHP 7.4 新语法之箭头函数实例详解
2019/05/09 PHP
小议Function.apply() 之一------(函数的劫持与对象的复制)
2006/11/30 Javascript
JavaScript在IE和Firefox浏览器下的7个差异兼容写法小结
2010/06/18 Javascript
拖动布局之保存布局页面cookies篇
2010/10/29 Javascript
js实现收缩菜单效果实例代码
2013/10/30 Javascript
js获取指定的cookie的具体实现
2014/02/20 Javascript
JavaScript将数组转换成CSV格式的方法
2015/03/19 Javascript
JavaScript简单修改窗口大小的方法
2015/08/03 Javascript
js命名空间写法示例
2015/12/18 Javascript
AngularJS在IE8的不支持的解决方法
2016/05/13 Javascript
JS笛卡尔积算法与多重数组笛卡尔积实现方法示例
2017/12/01 Javascript
vue 使某个组件不被 keep-alive 缓存的方法
2018/09/21 Javascript
nuxt.js中间件实现拦截权限判断的方法
2018/11/21 Javascript
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
2019/01/09 jQuery
解决layui表格的表头不滚动的问题
2019/09/04 Javascript
JS实现放大镜效果
2020/09/21 Javascript
python 实现自动远程登陆scp文件实例代码
2017/03/13 Python
Python3.6中Twisted模块安装的问题与解决
2019/04/15 Python
Giglio俄罗斯奢侈品购物网:男士、女士、儿童高级时装
2018/07/27 全球购物
英国和世界各地预订便宜的酒店:LateRooms.com
2019/05/05 全球购物
Javascript如何发送一个Ajax请求
2015/01/26 面试题
大学生入党自我鉴定
2013/10/31 职场文书
医院护士的求职信
2014/01/03 职场文书
大学生职业生涯规划书范文
2014/01/04 职场文书
安全生产标语
2014/06/06 职场文书
“九一八事变纪念日”国旗下讲话稿
2014/09/14 职场文书
2014年后备干部工作总结
2014/12/08 职场文书
精神文明建设先进个人事迹材料
2014/12/24 职场文书
运动会班级口号霸气押韵
2015/12/24 职场文书
干部作风纪律整顿心得体会
2016/01/23 职场文书
Nginx中break与last的区别详析
2021/03/31 Servers
解决vue自定义组件@click点击失效问题
2022/04/30 Vue.js
Win11远程连接不上怎么办?Win11远程桌面用不了的解决方法
2022/08/05 数码科技