工作经验总结

本篇为个人工作记录，具体代码涉及本人公司业务不予贴出，但会有小demo与效果图作为参考。

任务

使用技术：
js、jquery、ajax、
前端页面需求：
1、表格。
2、点击按钮弹出弹窗。
3、input表单，一边数字改变，另一边数字响应变化。
4、按百分比显示进度条长度与数值。
5、点击筛选按钮，滑出筛选框。
6、点击input框，弹出日期选择框。

过程

一、 首先做出一个表格。

先用HTML/CSS做静态样式，使用ajax动态传值，使用js追加数据及表格样式。
使用CSS中odd和even对表格奇偶行样式设置。

代码

  1. 表头是静态的，直接写静态HTML即可。
<!--START表头-->
<div class="..." style="padding-top: 0px;margin-top:0px;">
 <div class="...">
     <div style="margin-left: 15px;width: 12.5%;text-align: center;">店鋪情報</div>
     <div style="width: 20.2%;text-align: center;">商品情報</div>
	...
	...
 </div>
 <div class="...">
     <div style="margin-left: 15px;width: 7%;text-align: center;">店鋪コード</div>
     <div style="width: 6%;text-align: center;">店鋪名</div>
     <div style="width: 9%;text-align: center;">商品コード</div>
     <div style="width: 12.7%;text-align: center;">商品名</div>
     <div style="text-align: right;">
         <a style=" width:70px; margin-left: 30px; float:right; cursor: pointer; color: black; position: relative;">
             <p style="float: left;height: 20px;">在庫数</p>
             <img src="..." style="height: 16px;float: left;margin-top: 6px;margin-right: 7px">
             <input type="hidden" value="0">
         </a>
     </div>

     <div style="text-align: right;">
         <a style="float:right;cursor: pointer;color: black;position: relative;">
             <p style="float: left;height: 20px;">在庫金額（上代）</p>
             <img src="..." style="height: 16px;float: left;margin-top: 6px;margin-right: 7px;margin-left: -5px">
             <input type="hidden" value="0">
         </a>
     </div>
   	...
   	...

 </div>
 <!--/END表头-->
  1. 追加数据显示区域及表格样式的JS
function addhtml(data) {
		for(var i = 0; i < data.rows.length; i++) {
			$("#tbody1").append("<tr style = "...">")
			+ "<td style = '...'>" + data.row[i].store_no + "</td>"
			+ ...
			+ "</tr>");
		}
	}
  1. ajax动态获取数据
$.ajax({
	type:'GET', //请求方式为get
	url:"./data/shuju.json", //获取数据
	dataType: "json",
	success: function(data) {
		addhtml1(data)
	}
})

二、点击按钮弹出弹窗

先给弹窗设置默认样式为隐藏，当点击按钮时，样式变为显示。即可展示出弹窗效果。

代码

  1. 弹窗设置隐藏样式
<!--START自定义在庫消化率区间弹窗-->
<div id="storeModal" style="z-index: 999; display: none;position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0,0,0,0.5)">
    <div style="left: 40%;top:30%;position: absolute;">
        ...
        <img src="..." height="20" style="position:absolute;right:10px;top:10px;cursor:pointer" onclick="storePercentModalClose()">
        ...
            ....
            <div style="width: 100%;height: 26px;margin-top: 11px">
                <button type="button" οnclick="storePercentModalClose()" style="...>关闭</button>
                <button type="button" style="..." id="storePercentConfirm">保存</button>
            </div>
        </div>
    </div>
</div>
<!--/END自定义在庫消化率区间弹窗-->
  1. 点击按钮显示弹窗

三、input表单，一边数字改变，另一边数字响应变化。

这是一个比较悲伤的事情，一开始效果做得很丑，后来才改好的。
就是一个窗口有6个input，一边两个一共三行。
把这三行表单数值分配为三个百分比区间，第一行是0-30、第二行是30-70、第三行是70-100
响应式改变，一边变化，另一边就是区间最大值减去这个值。

代码

略。

四、按百分比显示进度条长度与数值。

初始版：

网页自动生成框图 javascript js网页制作_网页自动生成框图 javascript


优化版：


网页自动生成框图 javascript js网页制作_html_02


这个就是很奇妙了，求助了我学习前端的同学和朋友。上面那个真的做得和玩儿一样，下面那个才是最后项目中使用到的。

  • 功能：与上面提到的input对应，如果input中设置的数值改变，这个进度条中的竖线和数字也要对应变化。上方的低、中、高三个数字也要变化，且是可点击的。

代码

略。

五、点击筛选按钮，滑出筛选框。

这个是和点击按钮弹出弹框的逻辑差不多。

代码

略。

六、点击input框，弹出日期选择框。

这个是一个有关日期的插件，直接用关键词调出来就好了。

代码

略。

心得

本人是Java入的IT这个坑，原以为自己从业后就是没有界面的小后端，没想到第一份实习工作就要做对本人来说较为复杂的画面，前端操作起来偶尔会由于自己的笨拙感到烦躁，但也证明了我更加需要多多学习，提高自身水平。本次工作过程使我深刻感到知识获取与自身能力的正比关系，还有每一个It工作者的不易与自我满足的成就感。
在公司锻炼很大，很感谢我的公司。