请尝试以下html/css/js示例代码，用于Google翻译，在我的网站上运行良好。事实上，任何网站设计师/程序员都可以使用这些代码，通过翻译使他们的网站完全支持多种语言。
用法：只需复制并保存此代码，例如，将其保存到test.html文件中，然后在Internet浏览器上查看。就这样

<style>

.center_ii {
  display: flex;
  justify-content: center;
  align-items: center;
  // height: 200px;
  background: #086cdf;
  color: #fcfbfc;
  border: 3px solid white; 
  padding: 10px;
  margin-top: 40px;
  margin-bottom: 40px;  
}

.google-translate {
    display: inline-block;
    vertical-align: top;
    padding-top: 15px;
}

.goog-logo-link {
    display: none !important;
}

.goog-te-gadget {
    color: transparent !important;
}

#google_translate_element {
    display: none;
}

.goog-te-banner-frame.skiptranslate {
    display: none !important;
}

body {
    top: 0px !important;
}

.goog-tooltip {
    display: none !important;
}
.goog-tooltip:hover {
    display: none !important;
}
.goog-text-highlight {
    background-color: transparent !important;
    border: none !important; 
    box-shadow: none !important;
}

#goog-gt-tt, .goog-te-balloon-frame{display: none !important;} 
.goog-text-highlight { background: none !important; box-shadow: none !important;}

.goog-logo-link{display: none !important;}
.goog-te-gadget{height: 28px !important;  overflow: hidden;}

body{ top: 0 !important;}
.goog-te-banner-frame{display: none !important;}

#google_translate_element {
  display:none;
}

.goog-te-balloon-frame { display: none; }

#google_translate_element{width:300px;float:right;text-align:right;display:block}
.goog-te-banner-frame.skiptranslate { display: none !important;} 
body { top: 0px !important; }
#goog-gt-tt{display: none !important; top: 0px !important; } 
.goog-tooltip skiptranslate{display: none !important; top: 0px !important; } 
.activity-root { display: hide !important;} 
.status-message { display: hide !important;}
.started-activity-container { display: hide !important;}

.goog-te-combo {
    display: none;
}

</style>

<div id="translation" class="center_ii"></div>  

<p>This is a sample paragraph that needs to be translated.</p>   

<script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=google_translate"></script>
<script>
function google_translate (){ 
    var opt = { 
        layout: google.translate.TranslateElement.InlineLayout.SIMPLE, 
        pageLanguage: "en" 
    }; 
    new google.translate.TranslateElement( opt, "translation" ); 
} 

/*  
Display the scrollable list of languages. 
Related to the size of current browser. 
*/
addEventListener( "load", function(){ 
    if ( document.querySelector(".goog-te-menu-frame") ) { 
    
        document.getElementById( "translation" ).addEventListener( "click", function(){ 
            if ( this.id === "translation" ) scrollableLanguagesList(); 
        }); 
        addEventListener( "resize", function(){ 
            if ( "none" !== document.querySelector(".goog-te-menu-frame").style.display ) scrollableLanguagesList(); 
        }); 
    
    } 
}); 

function scrollableLanguagesList (){ 
    var 
     iframe = document.querySelector( ".goog-te-menu-frame" ), 
     doc = iframe.contentWindow.document, 
     div = doc.body.children[ 0 ], 
     table = div.children[ 0 ], 
     width = div.dataset.width || parseInt( div.style.width ), 
     rect, diff; 
    
    if ( ! div.dataset.width ) div.dataset.width = width; 
    
    if ( innerWidth < width ) { 
        rect = table.getBoundingClientRect(); 
        width = rect.right - rect.left; 
        diff = width - innerWidth; 
        
        div.style.width = ( width - diff - 24 ) + "px"; 
        div.style.padding = "4px 0 1em 4px"; 
        div.style.overflowX = "scroll"; 
    } 
    else { 
        div.style.width = "auto"; 
        div.style.padding = "4px"; 
        div.style.overflowX = "visible"; 
    } 
    
    rect = div.getBoundingClientRect(); 
    iframe.style.width = ( rect.right - rect.left ) + "px"; 
    iframe.style.height = ( rect.bottom - rect.top ) + "px"; 
} 
</script>

<script type="text/javascript">

    $(document).ready(function() 
    {       
        translationTooltipsDisable();
    });

    function translationTooltipsDisable()
    {       
        //Override google's functions
        _tipon = function()  { /*Don't display the tooltip*/ };
        _tipoff = function() { /*Don't hide the tooltip*/ };
    }

</script>

试试这个one：

<div id="google_translate_element"></div>
<script>
    function googleTranslateElementInit() {
        new google.translate.TranslateElement(
            { pageLanguage: 'en' },
            'google_translate_element'
        );
    }
</script>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<script>
    const addText = () => {
        document.getElementById("text").innerHTML += "New text"
    }
</script>

<h1>Hello World</h1>
<div id="text"></div>
<button onclick="addText()">Add text</button>