<!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">
下面是一个调用bing的自动翻译的页面。完全正常,但如何将<p class="tdemo" style="border: 1px solid #000;">中国科学家</p>改成输入框形式?当用户输入需要翻译的文字时,点击按纽,能够进行翻译?
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body><!--done--><p>  <a href="#translate" onclick="translate()">中文 - 英文</a>  <a href="#translate2" onclick="translate2()">英文 - 中文</a></p>
<p class="tdemo" style="border: 1px solid #000;">中国科学家</p>
<script type="text/javascript">// <![CDATA[
document.write('<scr'+'ipt src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></scr'+'ipt>');
        function translate() {
            window.mycallback = function(response) { $("p.tdemo").html(response); }
            var s = document.createElement("script");
            s.src = "http://api.microsofttranslator.com/V2/Ajax.svc/Translate?oncomplete=mycallback&appId= 1DB63605AA940795F916BF5D5B128D103BEDA956&from=zh-cn&to=en&text=" + $("p.tdemo").html();
            document.getElementsByTagName("head")[0].appendChild(s);
        }
        function translate2() {
            window.mycallback = function(response) { $("p.tdemo").html(response); }
            var s = document.createElement("script");
            s.src = "http://api.microsofttranslator.com/V2/Ajax.svc/Translate?oncomplete=mycallback&appId= 1DB63605AA940795F916BF5D5B128D103BEDA956&from=en&to=zh-cn&text=" + $("p.tdemo").html();
            document.getElementsByTagName("head")[0].appendChild(s);
        }
// ]]></script>

解决方案 »

  1.   


    <!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-Type" content="text/html; charset=utf-8"/>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    </head>
    <body>
    <input id="txt" /><input type="button"  onclick="translate()" value="中文 - 英文"><input type="button"  onclick="translate2()" value="英文 - 中文">
    <p class="tdemo" style="border: 1px solid #000;"></p><script type="text/javascript">// <![CDATA[
      function translate() {
      window.mycallback = function(response) { $("p.tdemo").html(response); }
      var s = document.createElement("script");
      s.src = "http://api.microsofttranslator.com/V2/Ajax.svc/Translate?oncomplete=mycallback&appId=1DB63605AA940795F916BF5D5B128D103BEDA956&from=zh-cn&to=en&text=" + escape($("#txt").val());
      document.getElementsByTagName("head")[0].appendChild(s);
      }
      function translate2() {
      window.mycallback = function(response) { $("p.tdemo").html(response); }
      var s = document.createElement("script");
      s.src = "http://api.microsofttranslator.com/V2/Ajax.svc/Translate?oncomplete=mycallback&appId=1DB63605AA940795F916BF5D5B128D103BEDA956&from=en&to=zh-cn&text=" + escape($("#txt").val());
      document.getElementsByTagName("head")[0].appendChild(s);
      }
    // ]]></script>