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 相关文章推荐
Kibo 用于处理键盘事件的Javascript工具库
Oct 28 Javascript
深入理解javascript学习笔记(一) 编写高质量代码
Aug 09 Javascript
用JS在浏览器中创建下载文件
Mar 05 Javascript
jQuery实现html元素拖拽
Jul 21 Javascript
需要牢记的JavaScript基础知识
Sep 25 Javascript
详解js产生对象的3种基本方式(工厂模式,构造函数模式,原型模式)
Jan 09 Javascript
JavaScript ES6中const、let与var的对比详解
Jun 18 Javascript
说说AngularJS中的$parse和$eval的用法
Sep 14 Javascript
vue2.x 通过后端接口代理,获取qq音乐api的数据示例
Oct 30 Javascript
JS插入排序简单理解与实现方法分析
Nov 25 Javascript
vuex实现购物车功能
Jun 28 Javascript
JS实现4位随机验证码
Oct 19 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
帅气的琦玉老师
2020/03/02 日漫
php 用sock技术发送邮件的函数
2007/07/21 PHP
PHP持久连接mysql_pconnect()函数使用介绍
2012/02/05 PHP
Yii框架中jquery表单验证插件用法示例
2016/10/18 PHP
PHP缩略图生成和图片水印制作
2017/01/07 PHP
php将字符串转换为数组实例讲解
2020/05/05 PHP
HR vs ForZe BO3 第二场 2.13
2021/03/10 DOTA
javascript div 弹出可拖动窗口
2009/02/26 Javascript
在服务端(Page.Write)调用自定义的JS方法详解
2013/08/09 Javascript
解决css和js的{}与smarty定界符冲突问题的两种方法
2013/09/10 Javascript
jquery ready函数、css函数及text()使用示例
2013/09/27 Javascript
如何获取网站icon有哪些可行的方法
2014/06/05 Javascript
谷歌浏览器不支持showModalDialog模态对话框的解决方法
2014/09/22 Javascript
jQuery实现多按钮单击变色
2014/11/27 Javascript
javascript实现类似java中getClass()得到对象类名的方法
2015/07/27 Javascript
原生js的数组除重复简单实例
2016/05/24 Javascript
基于JavaScript实现在新的tab页打开url
2016/08/04 Javascript
利用Bootstrap实现表格复选框checkbox全选
2016/12/21 Javascript
微信小程序 两种滑动方式(横向滑动,竖向滑动)详细及实例代码
2017/01/13 Javascript
原生js实现中奖信息无间隙滚动效果
2017/01/18 Javascript
使用vue.js编写蓝色拼图小游戏
2017/03/17 Javascript
angularjs1.5 组件内用函数向外传值的实例
2018/09/30 Javascript
bootstrap-closable-tab可实现关闭的tab标签页插件
2020/08/09 Javascript
python使用自定义user-agent抓取网页的方法
2015/04/15 Python
查看django执行的sql语句及消耗时间的两种方法
2018/05/29 Python
pytorch对可变长度序列的处理方法详解
2018/12/08 Python
Python threading.local代码实例及原理解析
2020/03/16 Python
python 6行代码制作月历生成器
2020/09/18 Python
css3截图_动力节点Java学院整理
2017/07/11 HTML / CSS
纯css3显示隐藏一个div特效的具体实现
2014/02/10 HTML / CSS
英国50岁以上人群的交友网站:Ourtime
2018/03/28 全球购物
指针和引用有什么区别
2013/01/13 面试题
工商学院毕业生个人自我评价
2013/09/19 职场文书
酒会邀请函
2015/01/31 职场文书
运动会新闻稿
2015/07/17 职场文书
Oracle锁表解决方法的详细记录
2022/06/05 Oracle