1. document.writeln("<div id=\"tanchuangwai\" class=\"tanchuangwai\" style=\"z-index:999;overflow:hidden;font-family:微软雅黑; background:#6cadde; width:236px; height:29px; line-height:29px; float:left; border-radius:3px 3px 0 0; position:fixed; bottom:0; right:0;\">");
  2. document.writeln("  <h3 style=\" height:29px; width:100px; color:#ffffff; font-size:12px; float:left; padding:0 0 0 10px; font-weight:normal; margin:0;\">请您留言</h3>");
  3. document.writeln("  <span id=\"dakai\" class=\"guanbi\" style=\" color:#ffffff; font-size:11px; height:29px; float:right; margin:0 5px 0 0; cursor:pointer;\" id=\"guanbi\" onclick=\"goPanel();\">打开</span></div>");
  4. document.writeln("<div id=\"tanchuang\" class=\"tanchuang\" style=\"z-index:999;overflow:hidden;font-family:微软雅黑; position:fixed; width:236px; background:#ffffff; right:0; bottom:0px; display:none;\">");
  5. document.writeln("  <div style=\"background:#6cadde; width:236px; height:29px; line-height:29px; float:left; border-radius:3px 3px 0 0;\">");
  6. document.writeln("    <h3 style=\" height:29px; width:100px; color:#ffffff; font-size:12px; float:left; padding:0 0 0 10px; font-weight:normal; margin:0;\">请您留言</h3>");
  7. document.writeln("    <span id=\"guanbi\" class=\"guanbi\" style=\" color:#ffffff; font-size:11px; height:29px; float:right; margin:0 5px 0 0; cursor:pointer;\" onclick=\"goClose();\">关闭</span></div>");
  8. document.writeln("  <div style=\" width:194px; float:left; padding:0 20px; border-left:1px solid #6cadde; border-right:1px solid #6cadde; border-bottom:1px solid #6cadde; background:#f5f5f5;\">");
  9. document.writeln("    <textarea id=\"pArea\" style=\" font-family:微软雅黑; width:182px; height:80px; border:1px solid #cccccc; background:#ffffff; padding:5px; color:#a9a9a9; font-size:12px; line-height:20px; float:left; margin:10px 0 10px 0;\" placeholder=\"请输入问题描述\"></textarea>");
  10. document.writeln("    <div style=\"width:192px; border:1px solid #cccccc; height:20px; line-height:20px; float:left; margin:0 0 10px 0;\"><span style=\" width:32px; height:20px; font-size:12px; color:#666666; text-align:center; float:left; background:#f2f2f2; border-right: 1px solid #cccccc;\">类型</span>");
  11. document.writeln("      <select id=\"pSel\" name=\"select\" style=\" font-family:微软雅黑; background:#ffffff; float:left; border:none; color:#a9a9a9; padding:0 0 0 7px; width:159px;\">");
  12. document.writeln("        <option value=\"系统异常\">系统异常</option>");
  13. document.writeln("        <option value=\"功能操作\">功能操作</option>");
  14. document.writeln("        <option value=\"功能体验\">功能体验</option>");
  15. document.writeln("      </select>");
  16. document.writeln("    </div>");
  17. document.writeln("    <div style=\"width:192px; border:1px solid #cccccc; height:20px; line-height:20px; float:left; margin:0 0 10px 0;\"><span style=\" width:32px; height:20px; font-size:12px; color:#666666; text-align:center; float:left; background:#f2f2f2; border-right: 1px solid #cccccc;\">姓名</span>");
  18. document.writeln("      <input id=\"pName\" type=\"text\"/ placeholder=\"请输入您的姓名\" style=\" font-family:微软雅黑; background:#ffffff; float:left; border:none; color:#a9a9a9; padding:0 0 0 10px; width:149px;\">");
  19. document.writeln("    </div>");
  20. document.writeln("    <div style=\"width:192px; border:1px solid #cccccc; height:20px; line-height:20px; float:left; margin:0 0 10px 0;\"><span style=\" width:32px; height:20px; font-size:12px; color:#666666; text-align:center; float:left; background:#f2f2f2; border-right: 1px solid #cccccc;\">电话</span>");
  21. document.writeln("      <input id=\"pTel\" type=\"text\"/ placeholder=\"请输入您的电话\" style=\" font-family:微软雅黑; background:#ffffff; float:left; border:none; color:#a9a9a9; padding:0 0 0 10px; width:149px;\">");
  22. document.writeln("    </div>");
  23. document.writeln("    <input style=\" font-family:微软雅黑; background:#6cadde; border-radius:5px; width:91px; height:23px; text-align:center; color:#000000; line-height:23px; margin:10px 51px; border:none; cursor:pointer;\" type=\"button\" value=\"提交\" onclick=\"sub();\" />");
  24. document.writeln("  </div>");
  25. document.writeln("</div>");
  26.  
  27. var url = "XXX";
  28. var par;
  29.  
  30. var a = document.getElementById("tanchuangwai");
  31. var b = document.getElementById("guanbi");
  32. var p;
  33. var s;
  34. var h;
  35. function goPanel(){
  36.     document.getElementById("tanchuangwai").style.display = "none";
  37.     p = document.getElementById("tanchuang");
  38.     p.style.display = "block";
  39.     p.style.height = "29px";
  40.     s = setInterval(upPanel,1);
  41. }
  42. function goClose(){
  43.     p = document.getElementById("tanchuang");
  44.     h = setInterval(downPanel,1);
  45. }
  46. function upPanel(){
  47.     var height = parseInt(p.style.height.replace("px",""));
  48.     height = height + 3;
  49.     p.style.height = height+"px";
  50.     if(height >= 281){
  51.         clearInterval(s);
  52.     }
  53. }
  54. function downPanel(){
  55.     var height = parseInt(p.style.height.replace("px",""));
  56.     height = height - 3;
  57.     p.style.height = height+"px";
  58.     if(height <= 29){
  59.         clearInterval(h);
  60.         p.style.display = "none";
  61.         document.getElementById("tanchuangwai").style.display = "block";
  62.     }
  63. }
  64. function ajax(){
  65.     var oAjax = null;
  66.     if(window.XMLHttpRequest){
  67.         oAjax = new XMLHttpRequest();
  68.     }else{
  69.         oAjax = new ActiveXObject("Microsoft.XMLHTTP");
  70.     };
  71.  
  72.     oAjax.open('POST', url, true);
  73.     oAjax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  74.     var area = document.getElementById("pArea").value;
  75.     var sel = document.getElementById("pSel").value;
  76.     var name = document.getElementById("pName").value;
  77.     var tel = document.getElementById("pTel").value;
  78.     var url1 = window.location.href;
  79.     oAjax.send("area=" + area + "&sel=" + sel + "&name=" + name + "&tel=" + tel + "&par=" + par + "&url=" + url1);
  80.  
  81.     oAjax.onreadystatechange = function(){
  82.         if(oAjax.readyState == 4){
  83.             if(oAjax.status == 200){
  84.                 alert(oAjax.responseText)
  85.             }else{
  86.                 alert("请求错误");
  87.             }
  88.         }
  89.     };
  90. }
  91. function sub() {
  92.     var js = document.getElementsByTagName("script");
  93.     for (var i = 0; i < js.length; i++) {
  94.         if (js[i].src.indexOf("panel.min.js") >= 0) {
  95.             var arraytemp = new Array();
  96.             arraytemp = js[i].src.split('?');
  97.             arraytemp = arraytemp[1].split('=');
  98.             if (arraytemp[0] == 'value') {
  99.                 par = arraytemp[1];
  100.             }
  101.         }
  102.     };
  103.     ajax();
  104. }

同样的代码，这是修改后的使用ajax上传图片的代码：

  1. var url = "http://XXX";
  2. document.writeln("<div id=\"tanchuangwai\" class=\"tanchuangwai\" style=\"z-index:999;overflow:hidden;font-family:微软雅黑; background:#6cadde; width:236px; height:29px; line-height:29px; float:left; border-radius:3px 3px 0 0; position:fixed; bottom:0; right:0;\">");
  3. document.writeln("  <h3 style=\" height:29px; width:100px; color:#ffffff; font-size:12px; float:left; padding:0 0 0 10px; font-weight:normal; margin:0;\">请您留言</h3>");
  4. document.writeln("  <span id=\"dakai\" class=\"guanbi\" style=\" color:#ffffff; font-size:11px; height:29px; float:right; margin:0 5px 0 0; cursor:pointer;\" id=\"guanbi\" onclick=\"goPanel();\">打开</span></div>");
  5. document.writeln("<div id=\"tanchuang\" class=\"tanchuang\" style=\"z-index:999;overflow:hidden;font-family:微软雅黑; position:fixed; width:236px; background:#ffffff; right:0; bottom:0px; display:none;\">");
  6. document.writeln("  <div style=\"background:#6cadde; width:236px; height:29px; line-height:29px; float:left; border-radius:3px 3px 0 0;\">");
  7. document.writeln("    <h3 style=\" height:29px; width:100px; color:#ffffff; font-size:12px; float:left; padding:0 0 0 10px; font-weight:normal; margin:0;\">请您留言</h3>");
  8. document.writeln("    <span id=\"guanbi\" class=\"guanbi\" style=\" color:#ffffff; font-size:11px; height:29px; float:right; margin:0 5px 0 0; cursor:pointer;\" onclick=\"goClose();\">关闭</span></div>");
  9. document.writeln("  <div style=\" width:194px; float:left; padding:0 20px; border-left:1px solid #6cadde; border-right:1px solid #6cadde; border-bottom:1px solid #6cadde; background:#f5f5f5;\">");
  10. document.writeln("    <textarea id=\"pArea\" name='area' style=\" font-family:微软雅黑; width:182px; height:80px; border:1px solid #cccccc; background:#ffffff; padding:5px; color:#a9a9a9; font-size:12px; line-height:20px; float:left; margin:10px 0 10px 0;\" placeholder=\"请输入问题描述(少于200字)\"></textarea>");
  11. document.writeln("    <div style=\"width:192px; border:1px solid #cccccc; height:20px; line-height:20px; float:left; margin:0 0 10px 0;\"><span style=\" width:32px; height:20px; font-size:12px; color:#666666; text-align:center; float:left; background:#f2f2f2; border-right: 1px solid #cccccc;\">类型</span>");
  12. document.writeln("      <select id=\"pSel\" name=\"sel\" style=\" font-family:微软雅黑; background:#ffffff; float:left; border:none; color:#a9a9a9; padding:0 0 0 7px; width:159px;\">");
  13. document.writeln("        <option value=\"系统异常\">系统异常</option>");
  14. document.writeln("        <option value=\"功能操作\">功能操作</option>");
  15. document.writeln("        <option value=\"功能体验\">功能体验</option>");
  16. document.writeln("      </select>");
  17. document.writeln("    </div>");
  18. document.writeln("    <div style=\"width:192px; border:1px solid #cccccc; height:20px; line-height:20px; float:left; margin:0 0 10px 0;\"><span style=\" width:32px; height:20px; font-size:12px; color:#666666; text-align:center; float:left; background:#f2f2f2; border-right: 1px solid #cccccc;\">姓名</span>");
  19. document.writeln("      <input id=\"pName\" name='name' type=\"text\"/ placeholder=\"请输入您的姓名\" style=\" font-family:微软雅黑; background:#ffffff; float:left; border:none; color:#a9a9a9; padding:0 0 0 10px; width:149px;\">");
  20. document.writeln("    </div>");
  21. document.writeln("    <div style=\"width:192px; border:1px solid #cccccc; height:20px; line-height:20px; float:left; margin:0 0 10px 0;\"><span style=\" width:32px; height:20px; font-size:12px; color:#666666; text-align:center; float:left; background:#f2f2f2; border-right: 1px solid #cccccc;\">电话</span>");
  22. document.writeln("      <input id=\"pTel\" name='tel' type=\"text\"/ placeholder=\"请输入您的电话\" style=\" font-family:微软雅黑; background:#ffffff; float:left; border:none; color:#a9a9a9; padding:0 0 0 10px; width:149px;\">");
  23. document.writeln("    </div>");
  24. document.writeln("    <div style=\"width:192px; border:1px solid #cccccc; height:20px; line-height:20px; float:left; margin:0 0 10px 0;\"><span style=\" width:32px; height:20px; font-size:12px; color:#666666; text-align:center; float:left; background:#f2f2f2; border-right: 1px solid #cccccc;\">上传</span>");
  25. document.writeln("      <input type='file' id='img' name='img' value='' style='width:150px;height:20px;' accept='.jpg,.bmp'/>");
  26. document.writeln("    </div>");
  27. document.writeln("    <input style=\" font-family:微软雅黑; background:#6cadde; border-radius:5px; width:91px; height:23px; text-align:center; color:#000000; line-height:23px; margin:10px 51px; border:none; cursor:pointer;\" type=\"button\" value=\"提交\" onclick=\"sub();\" />");
  28. document.writeln("  </div>");
  29. document.writeln("</div>");
  30. document.writeln("<input type='hidden' name='par' id='par' value=''/>");
  31.  
  32. var par;
  33. var upload = "WebForm3.aspx";
  34.  
  35. var a = document.getElementById("tanchuangwai");
  36. var b = document.getElementById("guanbi");
  37. var p;
  38. var s;
  39. var h;
  40. var scs;
  41. function goPanel(){
  42.     document.getElementById("tanchuangwai").style.display = "none";
  43.     p = document.getElementById("tanchuang");
  44.     p.style.display = "block";
  45.     p.style.height = "28px";
  46.     s = setInterval(upPanel,1);
  47. }
  48. function goClose(){
  49.     p = document.getElementById("tanchuang");
  50.     h = setInterval(downPanel,1);
  51. }
  52. function upPanel(){
  53.     var height = parseInt(p.style.height.replace("px",""));
  54.     height = height + 3;
  55.     p.style.height = height+"px";
  56.     if(height >= 313){
  57.         clearInterval(s);
  58.     }
  59. }
  60. function downPanel(){
  61.     var height = parseInt(p.style.height.replace("px",""));
  62.     height = height - 3;
  63.     p.style.height = height+"px";
  64.     if(height <= 29){
  65.         clearInterval(h);
  66.         p.style.display = "none";
  67.         document.getElementById("tanchuangwai").style.display = "block";
  68.     }
  69. }
  70. function ajax(){
  71.     var oAjax = null;
  72.     if(window.XMLHttpRequest){
  73.         oAjax = new XMLHttpRequest();
  74.     }else{
  75.         oAjax = new ActiveXObject("Microsoft.XMLHTTP");
  76.     };
  77.  
  78.     oAjax.open('POST', url, true);
  79.     var area = document.getElementById("pArea").value;
  80.     var sel = document.getElementById("pSel").value;
  81.     var name = document.getElementById("pName").value;
  82.     var tel = document.getElementById("pTel").value;
  83.     var url1 = window.location.href;
  84.     var fd = new FormData();
  85.     fd.append('area', area);
  86.     fd.append('sel', sel);
  87.     fd.append('name', name);
  88.     fd.append('tel', tel);
  89.     fd.append('par', par);
  90.     fd.append('url', url1);
  91.     fd.append("img", document.getElementById("img").files[0]);
  92.     oAjax.send(fd);
  93.  
  94.     oAjax.onreadystatechange = function(){
  95.         if(oAjax.readyState == 4){
  96.             if(oAjax.status == 200){
  97.                 alert(oAjax.responseText)
  98.             }else{
  99.                 alert("请求错误");
  100.             }
  101.         }
  102.     };
  103. }
  104. function sub() {
  105.     var js = document.getElementsByTagName("script");
  106.     for (var i = 0; i < js.length; i++) {
  107.         if (js[i].src.indexOf("panel.js") >= 0) {
  108.             var arraytemp = new Array();
  109.             arraytemp = js[i].src.split('?');
  110.             arraytemp = arraytemp[1].split('=');
  111.             if (arraytemp[0] == 'value') {
  112.                 par = arraytemp[1];
  113.             }
  114.         }
  115.     };
  116.     document.getElementById("par").value = par;
  117.     ajax();
  118. }

一个问题提交的实例(js原生动画，原生ajax，js引用加参数)的更多相关文章

  1. js用img代替ajax js心跳 向服务器定时传送参数 主要计算用户在线时长

    html: <!doctype html><html><head><meta charset="utf-8"><title&g ...

  2. 如何查看一个网页特定效果的js代码（动画效果可js和css）（页面可以看到js的源代码）

    如何查看一个网页特定效果的js代码(动画效果可js和css)(页面可以看到js的源代码) 一.总结 1.动画效果可能是 CSS 实现的,也可能是 JS 实现的. 2.直接Chrome的F12调试即可, ...

  3. vue.js之动画篇

    本文引入类库的方式均采用CND的方式,可直接复制代码到编辑器中学习和测试 不使用动画切换元素 <div id="app"> <input type="b ...

  4. Ajax_简介： 异步的 JS 和 XML_原生写 ajax 分析其原理_jquery_ajax_art-template

    AJAX Asynchronous JavaScript And XML 通过 AJAX 可以在 浏览器中向 服务器 发送异步请求 一种 使用现有标准的 新方法,而非新语言 XML  可扩展标记语言 ...

  5. 关于购物车添加按钮的动画（vue.js）

    来自:https://segmentfault.com/a/1190000009294321 (侵删) git 源码地址  https://github.com/ustbhuangyi/vue-sel ...

  6. Bodymovin：Bodymovin和Lottie：把AE动画转换成HTML5/Android/iOS原生动画

    转自:https://www.cnblogs.com/zamhown/p/6688369.html 大杀器Bodymovin和Lottie:把AE动画转换成HTML5/Android/iOS原生动画 ...

  7. 大杀器Bodymovin和Lottie：把AE动画转换成HTML5/Android/iOS原生动画

    前段时间听部门老大说,Airbnb出了个移动端的动画库Lottie,可以和一个名叫Bodymovin的AE插件结合起来,把在AE上做好的动画导出为json文件,然后以Android/iOS原生动画的形 ...

  8. JS与APP原生控件交互

    "热更新"."热部署"相信对于混合式开发的童鞋一定不陌生,那么APP怎么避免每次升级都要在APP应用商店发布呢?这里就用到了混合式开发的概念,对于电商网站尤其显 ...

  9. 用js实现动画效果核心方式

    为了做好导航菜单,有时候需要在菜单下拉的时候实现动画效果,所以这几天就研究了研究如何用js实现动画效果,实现动画核心要用到两个函数,一个是setTimeOut,另一个是setInterval. 下边我 ...

随机推荐

  1. 如何使用SnpEff 对SNP结果进行分析

    SnpEff is a variant annotation and effect prediction tool. It annotates and predicts the effects of ...

  2. android WebView交互优化

    安卓的WebView一般是嵌套在activity或者fragment中的,但是如果在这种activity页面上点击返回按钮,一般会finish掉当前activity.其实是应该关闭当前的WebView ...

  3. sencha 环境配置

    sencha generate app MyApp MyApp 首先需要注意的是安装 sencha 并执行相关命令. 搞了老半天才知道 想要创建空项目首先 必须的在sdk 目录下才可以.好像据说第二次 ...

  4. C++之STL之string

    /*C 语言中字符数组一般会采用char str[]来存放,但是显得会比较麻烦,C++在stl中加入了string类型,对字符串常用的功能进行了封装,操作起来比较方便*/#include<cst ...

  5. 学习chrome 插件 DHC ,http请求传参方法

    DHC的简介 DHC是一款可以帮助用户使用chrome插件模拟HTTP客户端发送测试数据到服务器的谷歌浏览器插件,在chrome中安装了DHC插件以后,就可在服务器端代码初步完成的时候,使用DHC进行 ...

  6. tools/version.c

    /* *  linux/version.c * *  Copyright (C) 1992  Theodore Ts'o * *  May be freely distributed as part ...

  7. makefile--目标搜索（八）

    原创博文,转载请标明出处--周学伟http://www.cnblogs.com/zxouxuewei/ 在一个较大的工程中,一般会将源代码和二进制文件(.o 文件和可执行文件)安排在不同的目录来进行区 ...

  8. php MySQL数据库操作类源代码

    php MySQL数据库操作类源代码: <?php class MySQL{ private $host; //服务器地址 private $name; //登录账号 private $pwd; ...

  9. Unity3d纹理压缩格式表

  10. 黑马程序员——JAVA基础之构造函数，构造代码块

    ------- android培训.java培训.期待与您交流! ---------- 构造函数特点: 1.  函数名与类名相同 2.  不用定义返回值类型 3.  不可以写return语句 构造函数 ...