留坑-改变Image属性,javascript keydown

留坑自用，非全部代码！

说明：这段代码节选自我的一个PHP项目中，中间有使用第三方插件，需要使用的请自行baidu。

Javascript代码：

<script> var editor; KindEditor.ready(function(K) {
     editor = K.create('textarea[name="content"]', {uploadJson : '/editor/php/upload_json.php',fileManagerJson : '/editor/php/file_manager_json.php',allowFileManager : true});/* 点击按钮时打开上传图像的对话框 */K('#image01').click(function() {
     editor.loadPlugin('image', function() {
     editor.plugin.imageDialog({imageUrl : K('#picPath01').val(),//点击确定按钮时返回图像路径clickFn : function(url, title, width, height, border, align) {
     K('#picPath01').val(url);//还可以在这里加更多的操作editor.hideDialog();changeImage('image01');}});});});K('#image02').click(function() {
     editor.loadPlugin('image', function() {
     editor.plugin.imageDialog({imageUrl : K('#picPath02').val(),clickFn : function(url, title, width, height, border, align) {
     K('#picPath02').val(url);editor.hideDialog();changeImage('image02');}});});});K('#image03').click(function() {
     editor.loadPlugin('image', function() {
     editor.plugin.imageDialog({imageUrl : K('#picPath03').val(),clickFn : function(url, title, width, height, border, align) {
     K('#picPath03').val(url);editor.hideDialog();changeImage('image03');}});});});K('#image04').click(function() {
     editor.loadPlugin('image', function() {
     editor.plugin.imageDialog({imageUrl : K('#picPath04').val(),clickFn : function(url, title, width, height, border, align) {
     K('#picPath04').val(url);editor.hideDialog();changeImage('image04');}});});});K('#image05').click(function() {
     editor.loadPlugin('image', function() {
     editor.plugin.imageDialog({imageUrl : K('#picPath05').val(),clickFn : function(url, title, width, height, border, align) {
     K('#picPath05').val(url);editor.hideDialog();changeImage('image05');}});});});K('#image06').click(function() {
     editor.loadPlugin('image', function() {
     editor.plugin.imageDialog({imageUrl : K('#picPath06').val(),clickFn : function(url, title, width, height, border, align) {
     K('#picPath06').val(url);editor.hideDialog();changeImage('image06');}});});});});function changeImage($picName) {
     switch($picName){case "image01":var element = document.getElementById('image01');if (document.getElementById("picPath01").value!=""){element.src = document.getElementById("picPath01").value;//document.getElementById("picPath01").value="";break;}case "image02":var element = document.getElementById('image02');if (document.getElementById("picPath02").value!=""){element.src = document.getElementById("picPath02").value;break;}case "image03":var element = document.getElementById('image03');if (document.getElementById("picPath03").value!=""){element.src = document.getElementById("picPath03").value;break;}case "image04":var element = document.getElementById('image04');if (document.getElementById("picPath04").value!=""){element.src = document.getElementById("picPath04").value;break;}case "image05":var element = document.getElementById('image05');if (document.getElementById("picPath05").value!=""){element.src = document.getElementById("picPath05").value;break;}case "image06":var element = document.getElementById('image06');if (document.getElementById("picPath06").value!=""){element.src = document.getElementById("picPath06").value;break;}} }function deleteImage($picName) {
     switch($picName){case "image01":var element = document.getElementById('image01');document.getElementById("picPath01").value="";element.src = "/images/NOPIC_JPG.jpg";break;case "image02":var element = document.getElementById('image02');document.getElementById("picPath02").value="";element.src = "/images/NOPIC_JPG.jpg";break;case "image03":var element = document.getElementById('image03');document.getElementById("picPath03").value="";element.src = "/images/NOPIC_JPG.jpg";break;case "image04":var element = document.getElementById('image04');document.getElementById("picPath04").value="";element.src = "/images/NOPIC_JPG.jpg";break;case "image05":var element = document.getElementById('image05');document.getElementById("picPath05").value="";element.src = "/images/NOPIC_JPG.jpg";break;case "image06":var element = document.getElementById('image06');document.getElementById("picPath06").value="";element.src = "/images/NOPIC_JPG.jpg";break;} }function keydown(){
      document.getElementById("productTJ").value=Number(document.getElementById("productC").value)*Number(document.getElementById("productK").value)*Number(document.getElementById("productG").value);} </script>

前台代码：

  <form name="addform" id="addform" action="?act=ok" method="post"><table cellpadding=0 cellspacing=0 class="table_form" width="100%"><tr><td ><font color="red">*</font>产品类别：</td><td id="box_catid"><select id="catid" name="catid" class="input_select"><option value="请选择">请选择</option><?php echo get_str(0,$catid);?></select></td></tr><tr><td ><font color="red">*</font>商品名称：</td><td><input type="text" class="input-text" name="title" id="title" size="55" value="<?php echo $e_rs['商品名称'];?>" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;副标题：<input type="text" class="xy_input" name="Subtitle" id="Subtitle" size="54" value="<?php echo $e_rs['副标题'];?>"/><input type="hidden" name="id" value="<?php echo $sxid;?>" /></td></tr><tr><td ><font color="red">*</font>品牌：</td><td><input type="text" class="input-text" name="brand" id="brand" size="55" value="<?php echo $e_rs['品牌'];?>" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;商品条码：<input type="text" class="input-text" name="pBarCode" id="pBarCode" size="14" value="<?php if($e_rs['商品条码']!=''){echo $e_rs['商品条码'];} else { echo "请输入商品条码";}?>" onfocus="javascript:if(this.value=='请输入商品条码')this.value='';" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;商品编码：<input type="text" class="input-text" name="pNumCode" id="pNumCode" size="14" value="<?php if($e_rs['商品编码']!=''){echo $e_rs['商品编码'];} else { echo "请输入商品编码";}?>" onfocus="javascript:if(this.value=='请输入商品编码')this.value='';" /></td></tr><tr><td ><font color="red">*</font>销售规格：</td><td><input type="text" class="input-text" name="brand" id="brand" size="55" value="<?php echo $e_rs['销售规格'];?>" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;商品条码：<input type="text" class="input-text" name="pBarCode" id="pBarCode" size="14" value="<?php if($e_rs['商品条码']!=''){echo $e_rs['商品条码'];} else { echo "请输入商品条码";}?>" onfocus="javascript:if(this.value=='请输入商品条码')this.value='';" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;商品编码：<input type="text" class="input-text" name="pNumCode" id="pNumCode" size="14" value="<?php if($e_rs['商品编码']!=''){echo $e_rs['商品编码'];} else { echo "请输入商品编码";}?>" onfocus="javascript:if(this.value=='请输入商品编码')this.value='';" /></td></tr><tr><td >正常售价：</td><td><input type="text" class="xy_input90" name="priceZC" id="priceZC" size="30" value="<?php echo $e_rs['正常售价'];?>"/>&nbsp;&nbsp;<span class="remarks">【填写数字,默认单位￥】</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;促销价：<input type="text" class="xy_input90" name="priceCX" id="priceCX" size="30" value="<?php echo $e_rs['促销价'];?>"/>&nbsp;&nbsp;<span class="remarks">【填写数字,默认单位￥】</span></td></tr><tr><td >原产地：</td><td><input type="text" class="xy_input90" name="productCD" id="productCD" size="30" value="<?php echo $e_rs['原产地'];?>"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;生产厂家：<input type="text" class="xy_input" name="productCJ" id="productCJ" size="54" value="<?php echo $e_rs['生产厂家'];?>"/></td></tr><tr><td >保质期：</td><td><input type="text" class="xy_input90" name="EXP" id="EXP" size="30" value="<?php echo $e_rs['保质期'];?>"/>&nbsp;&nbsp;<span class="remarks">【质保天数】</span></td></tr><tr><td >产品信息：</td><td>长：<input type="text" class="xy_input" name="productC" id="productC" size="5" value="<?php echo $e_rs['长度'];?>" onkeyup="keydown()"/>&nbsp;&nbsp;&nbsp;&nbsp;宽：<input type="text" class="xy_input" name="productK" id="productK" size="5" value="<?php echo $e_rs['宽度'];?>" onkeyup="keydown()"/>&nbsp;&nbsp;&nbsp;&nbsp;高：<input type="text" class="xy_input" name="productG" id="productG" size="5" value="<?php echo $e_rs['高度'];?>" onkeyup="keydown()"/>&nbsp;&nbsp;【单位：cm】&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;体积：<input type="text" class="xy_input" name="productTJ" id="productTJ" size="5" readonly value="<?php echo $e_rs['体积'];?>" style="background:#CCC"/>&nbsp;&nbsp;&nbsp;&nbsp;重量：<input type="text" class="xy_input" name="productZL" id="productZL" size="5" value="<?php echo $e_rs['重量'];?>"/>【单位：g】</td></tr><tr><td >SEO关键字：</td><td><textarea name="SEOKeyword" rows="4" cols="60" style="font-size:13px;font-family:Tahoma;" id="description" /><?php echo $e_rs['SEO关键字'];?></textarea>&nbsp;&nbsp;&nbsp;&nbsp;SEO简介<textarea name="description" rows="4" cols="60" style="font-size:13px;font-family:Tahoma;" id="description" /><?php echo $e_rs['description'];?></textarea></td></tr><tr><td >图片：</td><td id="box_pics" align="left"><table width="880px" border="0" cellspacing="0" cellpadding="0" style=" margin-left:-8px"><tr><td align="center"><strong>主图1</strong></td><td align="center"><strong>主图2</strong></td><td align="center"><strong>主图3</strong></td><td align="center"><strong>主图4</strong></td><td align="center"><strong>主图5</strong></td><td align="center"><strong>主图6</strong></td></tr><tr><td align="left"><img name="image01" id="image01" src="<?php if ($e_rs['主图1']=="") {echo "/images/NOPIC_JPG.jpg";} else echo $e_rs['主图1'];?>" width="125" height="125" onClick="changeImage('image01')" style="border:1px #CCC solid;"><input name="picPath01" id="picPath01" size="55" type="hidden" value="<?php echo $e_rs['主图1'];?>" /></td><td align="left"><img name="image02" id="image02" src="<?php if ($e_rs['主图2']=="") {echo "/images/NOPIC_JPG.jpg";} else echo $e_rs['主图2'];?>" width="125" height="125" onClick="changeImage('image02')" style="border:1px #CCC solid;"><input name="picPath02" id="picPath02" size="55" type="hidden" value="<?php echo $e_rs['主图2'];?>" /></td><td align="left"><img name="image03" id="image03" src="<?php if ($e_rs['主图3']=="") {echo "/images/NOPIC_JPG.jpg";} else echo $e_rs['主图3'];?>" width="125" height="125" onClick="changeImage('image03')" style="border:1px #CCC solid;"><input name="picPath03" id="picPath03" size="55" type="hidden" value="<?php echo $e_rs['主图3'];?>" /></td><td align="left"><img name="image04" id="image04" src="<?php if ($e_rs['主图4']=="") {echo "/images/NOPIC_JPG.jpg";} else echo $e_rs['主图4'];?>" width="125" height="125" onClick="changeImage('image04')" style="border:1px #CCC solid;"><input name="picPath04" id="picPath04" size="55" type="hidden" value="<?php echo $e_rs['主图4'];?>" /></td><td align="left"><img name="image05" id="image05" src="<?php if ($e_rs['主图5']=="") {echo "/images/NOPIC_JPG.jpg";} else echo $e_rs['主图5'];?>" width="125" height="125" onClick="changeImage('image05')" style="border:1px #CCC solid;"><input name="picPath05" id="picPath05" size="55" type="hidden" value="<?php echo $e_rs['主图5'];?>" /></td><td align="left"><img name="image06" id="image06" src="<?php if ($e_rs['主图6']=="") {echo "/images/NOPIC_JPG.jpg";} else echo $e_rs['主图6'];?>" width="125" height="125" onClick="changeImage('image06')" style="border:1px #CCC solid;"><input name="picPath06" id="picPath06" size="55" type="hidden" value="<?php echo $e_rs['主图6'];?>" /></td></tr><tr><td align="center"><a onClick="deleteImage('image01')" style="cursor:pointer;">删除</a></td><td align="center"><a onClick="deleteImage('image02')" style="cursor:pointer;">删除</a></td><td align="center"><a onClick="deleteImage('image03')" style="cursor:pointer;">删除</a></td><td align="center"><a onClick="deleteImage('image04')" style="cursor:pointer;">删除</a></td><td align="center"><a onClick="deleteImage('image05')" style="cursor:pointer;">删除</a></td><td align="center"><a onClick="deleteImage('image06')" style="cursor:pointer;">删除</a></td></tr></table></td></tr><tr><td >内容：</td><td id="box_content"><textarea name="content" style="width:860px;height:400px;visibility:hidden;"><?php echo $e_rs['文描内容'];?></textarea></td></tr><tr><td ><font color="red">*</font>发布时间：</td><td id="box_createtime"><input name="c_date" type='text' class="laydate-icon" id="c_date" value="<?php echo date("Y-m-d h:i:s",$e_rs['发布时间']);?>" /></td></tr><tr><td ><font color="red">*</font>产品发布人：</td><td id="box_createtime"><input name="a_author" type='text' id="a_author" class="input-text" size="19" value="<?php echo $e_rs['发布人'];?>" /></td></tr><tr><td >是否推荐商品：</td><td id="box_posid"><select id="is_hot" name="is_hot" class="input_select" ><option value="0" <?php if($is_hot==0){
     ?> selected="selected"<?php }?>>否</option><option value="1" <?php if($is_hot==1){
     ?> selected="selected"<?php }?>>是</option></select></td></tr></table><div id="bootline"></div><div id="btnbox" class="btn"><INPUT TYPE="submit" value="提交" class="button" ><input TYPE="reset" value="取消" class="button"></div></form>

用到的NOPIC：



效果图如下：