从头记录——JS与HTML页面的制作过程

工作经验总结

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

任务

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

过程

一、 首先做出一个表格。

像这样
先用HTML/CSS做静态样式，使用ajax动态传值，使用js追加数据及表格样式。

使用CSS中odd和even对表格奇偶行样式设置。

代码

1. 表头是静态的，直接写静态HTML即可。

   
   <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>
    
   

2. 追加数据显示区域及表格样式的JS

	function addhtml(data) {
		for(var i = 0; i < data.rows.length; i++) {
			$("#tbody1").append("...">")
			+ "" + data.row[i].store_no + ""
			+ ...
			+ "");
		}
	}

3. ajax动态获取数据

$.ajax({
	type:'GET', //请求方式为get
	url:"./data/shuju.json", //获取数据
	dataType: "json",
	success: function(data) {
		addhtml1(data)
	}
})

二、点击按钮弹出弹窗

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

代码

1. 弹窗设置隐藏样式

<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>
                <button type="button" style="..." id="storePercentConfirm">保存button>
            div>
        div>
    div>
div>

2. 点击按钮显示弹窗

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

代码

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

初始版：

优化版：

代码

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

代码

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

代码

写在最后

刚上手前端时，基本上只懂得HTML和CSS的基础知识，JS不了解。13日下午指定的任务，我说14日下班前完成。

1. 表格的制作：使用ajax动态获取数据不会操作，问了峰峰、星星哥，查找许多资料最后将数据获取到了，但是表格样式又不会用js输出，又查了很多，13日做了一下午才做好表格显示和动态获取数据，还有点击按钮弹出弹窗、弹窗数值响应改变、点击按钮滑出筛选框的显示和效果、页面显示代表百分比的进度条没做。
2. 14日弹窗和窗口滑出效果又不会做，弹窗里的数值需要响应改变，问同学，问大佬，扒拉出来别人的代码东改改西改改，赶下班把画面都做出来了，晚上去参加了部门团建，团建比较开心，但心里总压着点事儿，完了给安排任务的同事姐姐发了个消息，说在学校主要学的是Java，前端了解不深，做得不好希望她见谅，她告诉我没关系，慢慢来。
3. 15日交任务被驳回，因为风格问题和部分显示问题，需要修改。静态进度条又需要做成动态按百分比拨动的样式，点头接受任务，但是实际上手却不会做，内心焦灼。于是在公司非常焦躁地边查资料边做，到了下班时间，才做了一点，感到深深的无助与弱小，半夜越想越难受，哭了出来，然后就好受了点，明白哭也没用只能提升自己的能力。
4. 16日加快进度，理清楚了逻辑，还是查资料，但是更大部分是向他人学习。在查阅大量资料与通过他人的指点，最后做好了所有功能与显示。松了一口气。但是去交任务的时候有个颜色需要调整，页面一个部位的内容需要做成居中显示，又多加了一个日期弹窗的功能，还得接着做。但内容居中后，进度条显示又有问题，当晚我下班后回家在自己电脑上琢磨，太困了就睡着了。
5. 17日今天，进度条我大哥三下五除二做了一个demo让我参考，专业前端和我这个半吊子根本没法比，两三行代码就可以搞定的事情，我却很复杂又费时地去做。日期筛选功能，老系统有日期插件，但是不知道为什么我调用起来有问题，问了下开发这个系统的同事，帮我处理好了。

心得

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