一个问题提交的实例(js原生动画,原生ajax,js引用加参数)

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;\">");
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>");
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>");
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;\">");
document.writeln("  <div style=\"background:#6cadde; width:236px; height:29px; line-height:29px; float:left; border-radius:3px 3px 0 0;\">");
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>");
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>");
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;\">");
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>");
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>");
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;\">");
document.writeln("        <option value=\"系统异常\">系统异常</option>");
document.writeln("        <option value=\"功能操作\">功能操作</option>");
document.writeln("        <option value=\"功能体验\">功能体验</option>");
document.writeln("      </select>");
document.writeln("    </div>");
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>");
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;\">");
document.writeln("    </div>");
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>");
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;\">");
document.writeln("    </div>");
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();\" />");
document.writeln("  </div>");
document.writeln("</div>");

var url = "XXX";
var par;

var a = document.getElementById("tanchuangwai");
var b = document.getElementById("guanbi");
var p;
var s;
var h;
function goPanel(){
    document.getElementById("tanchuangwai").style.display = "none";
    p = document.getElementById("tanchuang");
    p.style.display = "block";
    p.style.height = "29px";
    s = setInterval(upPanel,1);
}
function goClose(){
    p = document.getElementById("tanchuang");
    h = setInterval(downPanel,1);
}
function upPanel(){
    var height = parseInt(p.style.height.replace("px",""));
    height = height + 3;
    p.style.height = height+"px";
    if(height >= 281){
        clearInterval(s);
    }
}
function downPanel(){
    var height = parseInt(p.style.height.replace("px",""));
    height = height - 3;
    p.style.height = height+"px";
    if(height <= 29){
        clearInterval(h);
        p.style.display = "none";
        document.getElementById("tanchuangwai").style.display = "block";
    }
}
function ajax(){
    var oAjax = null;
    if(window.XMLHttpRequest){
        oAjax = new XMLHttpRequest();
    }else{
        oAjax = new ActiveXObject("Microsoft.XMLHTTP");
    };

    oAjax.open(‘POST‘, url, true);
    oAjax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    var area = document.getElementById("pArea").value;
    var sel = document.getElementById("pSel").value;
    var name = document.getElementById("pName").value;
    var tel = document.getElementById("pTel").value;
    var url1 = window.location.href;
    oAjax.send("area=" + area + "&sel=" + sel + "&name=" + name + "&tel=" + tel + "&par=" + par + "&url=" + url1);

    oAjax.onreadystatechange = function(){
        if(oAjax.readyState == 4){
            if(oAjax.status == 200){
                alert(oAjax.responseText)
            }else{
                alert("请求错误");
            }
        }
    };
}
function sub() {
    var js = document.getElementsByTagName("script");
    for (var i = 0; i < js.length; i++) {
        if (js[i].src.indexOf("panel.min.js") >= 0) {
            var arraytemp = new Array();
            arraytemp = js[i].src.split(‘?‘);
            arraytemp = arraytemp[1].split(‘=‘);
            if (arraytemp[0] == ‘value‘) {
                par = arraytemp[1];
            }
        }
    };
    ajax();
}
时间: 2024-11-10 17:12:57

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

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

html: <!doctype html><html><head><meta charset="utf-8"><title>记录用户的在线时长</title></head> <body></body></html><script type="text/javascript"> var Statistics_Website_logo ={

蓝鸥原生JS:js的引入方式及js的基本数据类型

蓝鸥原生JS:js的引入方式及js的基本数据类型 蓝鸥零基础学习HTML5-html+css基础 http://11824614.blog.51cto.com/11814614/1852769 js的引入方式 在一对 script 标签中引入js代码 通过这种方式引入,可以把js代码和html代码写在同一个文件中,但是注意:最好把js代码写在body之后,文档的加载顺序是从上到下加载的,先把页面内容渲染出来,再加入用户交互,这样用户体验会大大加强. 示例代码: <html lang="en

jquery防止重复提交代码实例

jquery防止重复提交代码实例:在很多应用中,可能有些数据只能够被允许提交一次,也就是提交之后不能够再提交第二次,下面就是一段能够实现此功能的简单代码,需要的可以参考一下,代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/&quo

【第2章第300回】原生JS与jQuery对AJAX的实现

一.定义 W3C里这么解释AJAX: AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).AJAX 不是新的编程语言,而是一种使用现有标准的新方法.AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下. 就是利用JS来无刷新与后端交互,通过get和post方式把数据发送到后端,或者请求后端的数据,然后根据请求的数据进行改变DOM节点等操作,从而取消掉用form的submit方式一提交就会跳转页面的情况

原生js重写《锋利的JS》之 轮播效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

分享一个实用插件(页面滚动触发动画)以及其内部的所有动画属性值

个人不太擅长实用JQuery插件,比较喜欢使用原生JS代码,但是制作网站时的难度很大. 今天推荐一个比较实用的插件 地址为: http://www.htmleaf.com/jQuery/Layout-Interface/201704274479.html         <link rel="stylesheet" href="css/animate.min.css">        <script type="text/javascri

分享JQuery动画插件Velocity.js的六种列表加载特效

分享JQuery动画插件Velocity.js的六种列表加载特效.在这款实例中给中六种不同的列表加载效果.分别为从上飞入.从右侧飞入.从左侧飞入.和渐显.一起看下效果图: 在线预览   源码下载 实现的代码. html代码: <h1> Velocity.js <i>slice + sequence</i></h1> <pre>Only anim X number with FX#1, animate Y number with FX#2 etc

(转)第05节:Fabric.js的动画设置

凡是出色的Canvas库都少不了制作动画的方法,Fabric.js也不例外,它有着编写简单且功能强大的动画助手,这就是animate( )方法. animate主要使用代码如下: rect.animate('angle',360,{ onChange:canvas.renderAll.bind(canvas) }) 意思是设置了rect的动画是旋转到360度,onChange是动画的回调函数,可以绑定事件,那这里就是当canvas渲染完成时自动发生动画. animate接收三个参数: 第一个参数

JS与APP原生控件交互

"热更新"."热部署"相信对于混合式开发的童鞋一定不陌生,那么APP怎么避免每次升级都要在APP应用商店发布呢?这里就用到了混合式开发的概念,对于电商网站尤其显得重要,不可能每次发布一个活动,都要发布一个现版本,当然这样对于Android还算可以,但是对于Ios呢?苹果应用商店每次审核的时间基本都在1~2周,这对于一个促销活动来说审核时间实在太长.而混合式开发正好可以解决这个问题,基本的原理时,通过原生控件实现APP的主体结构,借助H5开发对应的页面,这样每次发布活