实现悦轩饼家立即购买动态页面

（1）主题（目标）：完成项目内容

用JS实现悦轩饼家立即购买动态页面

（2）完成页面所需要的知识点（重难点）

input的onblur属性：在对象失去输入焦点时触发。

input的onfocus属性：当对象获得焦点时触发。

innerHTML：显示文本提示信息

value:获取输入的内容

（3）完成页面的步骤

         首先分别给收货人，收货人的电话后的文本框的onblur属性自定义名字，再给下面配送至后的姓名和电话号码的span标签起一个id名字，然后在Body外写script标签，在里面写入function函数，再用if判断收货人和收货人电话的文本框内是否为空，如果不为空就让信息同步到span标签。

        点击详细地址文本框，提示信息消失效果：首先给文本框的onfocus和onblur属性自定义名字，然后在script内写入onfocus的function函数，再在function函数内if判断onfocus的value和defaultvalue是否相同，如果相同就让value为空，再写入onblur的function函数并判断onblur的value是否为空，如果为空就让onblur的value=defaultvalue。

<input type="text" value="河南省郑州市金水区 请输入收货人详细地址" onfocus="add1(this)" onblur="add2(this)" >
<script>
function add1(thisObj) {
			if (thisObj.value == thisObj.defaultValue) {
				thisObj.value = "";
			}
		}

		function add2(thisObj) {
			if (thisObj.value == "") {
				thisObj.value = thisObj.defaultValue
			}
		}
</script>
<input type="text" placeholder="请输入收货人姓名" onblur="getname(this)" />
<input type="text" placeholder="请输入收货人手机号码" onblur="getnum(this)" />
<script>
function getname(thisObj) {
			if (thisObj.value != "") {
				document.getElementById("usename").innerHTML = thisObj.value;
			}
		}

		function getnum(thisObj) {
			if (thisObj.value != "") {
				document.getElementById("usetel").innerHTML = thisObj.value;
			}
		}
</script>

送达日期需要引入时间插件，按照插件要求引入即可

（4）写页面的过程中碰到的问题，怎么解决的？

问题：onblur和onfocus、defaultValue有什么作用？

答案：通过查询浏览器得出：

defaultValue 设置或获取对象的初始内容。
onblur 在对象失去输入焦点时触发。
onfocus 当对象获得焦点时触发。