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 相关文章推荐
javascript静态的url如何传递
May 03 Javascript
Prototype Number对象 学习
Jul 19 Javascript
IE6 fixed的完美解决方案
Mar 31 Javascript
在chrome浏览器中,防止input[text]和textarea在聚焦时出现黄色边框的解决方法
May 24 Javascript
js实现表单多按钮提交action的处理方法
Oct 24 Javascript
javascript中eval解析JSON字符串
Feb 27 Javascript
JavaScript中三种异步上传文件方式
Mar 06 Javascript
JavaScript队列、优先队列与循环队列
Nov 14 Javascript
通过cordova将vue项目打包为webapp的方法
Feb 02 Javascript
Vue中qs插件的使用详解
Feb 07 Javascript
JavaScript实现横版菜单栏
Mar 17 Javascript
vue 导航守卫和axios拦截器有哪些区别
Dec 19 Vue.js
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
CodeIgniter php mvc框架 中国网站
2008/05/26 PHP
php 上传功能实例代码
2010/04/13 PHP
注意:php5.4删除了session_unregister函数
2013/08/05 PHP
PHP异常Parse error: syntax error, unexpected T_VAR错误解决方法
2014/05/06 PHP
php中http与https跨域共享session的解决方法
2014/12/20 PHP
WordPress自定义时间显示格式
2015/03/27 PHP
PHP中余数、取余的妙用
2015/06/29 PHP
解决thinkphp5未定义变量会抛出异常,页面错误,请稍后再试的问题
2019/10/16 PHP
js异步加载的三种解决方案
2013/03/04 Javascript
js字符串截取函数substr substring slice使用对比
2013/11/27 Javascript
在JS方法中返回多个值的方法汇总
2015/05/20 Javascript
基于JavaScript实现网页倒计时自动跳转代码
2015/12/28 Javascript
基于jQuery实现歌词滚动版音乐播放器的代码
2016/09/17 Javascript
Angular排序实例详解
2017/06/28 Javascript
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
2017/07/12 jQuery
js实现带进度条提示的多视频上传功能
2020/12/13 Javascript
Vue+elementui 实现复杂表头和动态增加列的二维表格功能
2019/09/23 Javascript
webpack4 配置 ssr 环境遇到“document is not defined”
2019/10/24 Javascript
浅谈vant组件Picker 选择器选单选问题
2020/11/04 Javascript
[35:43]2018DOTA2亚洲邀请赛 4.1 小组赛B组 paiN vs Effect
2018/04/03 DOTA
用实例分析Python中method的参数传递过程
2015/04/02 Python
Python实现把回车符\r\n转换成\n
2015/04/23 Python
python创建列表和向列表添加元素的实现方法
2017/12/25 Python
Python实现获取汉字偏旁部首的方法示例【测试可用】
2018/12/18 Python
Pycharm以root权限运行脚本的方法
2019/01/19 Python
Python文件操作中进行字符串替换的方法(保存到新文件/当前文件)
2019/06/28 Python
python requests抓取one推送文字和图片代码实例
2019/11/04 Python
日本7net购物网:书籍、漫画、杂志、DVD、游戏邮购
2017/02/17 全球购物
理肤泉加拿大官网:La Roche-Posay加拿大
2018/07/06 全球购物
医药类个人求职的自我评价
2014/02/12 职场文书
网站推广策划方案
2014/06/04 职场文书
大学专科自荐信
2014/06/17 职场文书
元旦趣味活动方案
2014/08/22 职场文书
小学生运动会通讯稿
2014/09/23 职场文书
投标承诺函范文
2015/01/21 职场文书
win11如何查看端口是否被占用? Win11查看端口是否占用的技巧
2022/04/05 数码科技