當前位置:首頁 » 網頁前端 » 網頁中用腳本輸出方法有哪些
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

網頁中用腳本輸出方法有哪些

發布時間: 2022-10-04 06:41:33

㈠ html頁面中嵌入腳本的方式有哪三種

最常見是這種:
在任何地方,用<script type="text/javascript">開頭,及</script>結束
javascript 指令寫在其中。

<html>
<body>
<scripttype="text/javascript">
alert("hi")
</script>
網頁內容
</body>
</html>

其次是簡單的一個,或兩三個指令直接寫在物件標簽內。

<html>
<body>
<divstyle="background-color:cyan;width:500px;height:200px;"onmouseover="alert('你好!');alert('歡迎你來!')">
</div>
</body>
</html>

較少見是這種,一連串指令寫在物件標簽內。

<html>
<body>
<divstyle="background-color:cyan;width:500px;height:200px;"onmouseover="
vard=newDate()
d='日一二三四五六'.charAt(d.getDay())
alert('今天是星期'+d)

">
Hi
</div>
</body>
</html>

你將以上三種存成獨立的 x.htm 文件,用ie或firefox試試,後二種用mouseover 就會觸發 javascript 程式。

還有一種常用方式就是引用JS文件,如下:

<scripttype="text/javascript"src="https://gss0.bdstatic.com/7051cy792sgCpNKfpU_Y_D3/static/common/pkg/framework_af469f5.js"></script>

㈡ 網頁設計中常用的javascript腳本有哪些

  • $(「a[href=』#top』]」).click(function(){

  • $(「html,body」).animate({scrollTop:0},「slow」);

  • returnfalse;

  • });

  • 復制以上代碼放在網頁的JavaScript標簽中,然後在底部添加一個id為「top」的鏈接就會自動返回到頂部了。

    2、復製表單頂部標題到底部:

  • var$tfoot=$(『<tfoot></tfoot>』);

  • $($(『thead』).clone(true,true).children().get().reverse()).each(function(){

  • $tfoot.append($(this));

  • });

  • $tfoot.insertAfter(『tablethead』);

  • 3、載入額外的內容:

  • $(「#content」).load(「somefile.html」,function(response,status,xhr){

  • //errorhandling

  • if(status==「error」){

  • $(「#content」).html(「Anerroroccured:「+xhr.status+」「+xhr.statusText);

  • }

  • });

  • 有時候需要為單獨的一個div層從外部載入一些額外的數據內容,下面這段短碼將會非常有用。

    4、設置多列層等高:

  • varmaxheight=0;

  • $(「div.col」).each(function(){

  • if($(this).height()>maxheight){maxheight=$(this).height();}

  • });

  • $(「div.col」).height(maxheight);

  • 在一些布局設計中,有時候需要讓兩個div層高度相當,下面是採用js方法實現的原理(需要等高的div層設置class為」col」)。

    5、定時刷新部分頁面的內容:

  • setInterval(function(){

  • $(「#refresh」).load(location.href+」#refresh>*」,「」);

  • },10000);//millisecondstowait

  • 如果在你的網頁上需要定時的刷新一些內容,例如微博消息或者實況轉播,為了不讓用戶繁瑣的刷新整個頁面,可以採用下面這段代碼來定時刷新部分頁面內容。

    6、預載入圖像:

  • $.preloadImages=function(){

  • for(vari=0;i<arguments.length;i++){

  • $(「<img/>」).attr(「src」,arguments[i]);

  • }

  • }

  • $(document).ready(function(){

  • $.preloadImages(「hoverimage1.jpg」,「hoverimage2.jpg」);

  • });

  • 有些網站頁面打開圖像都未載入完畢,還要苦苦等待。下面這段代碼實現圖像都載入完畢後再打開整個網頁。

    7、測試密碼強度:
    這個比較給力,現在很多網站注冊的時候都加入了密碼強度測試功能,以下代碼也簡單提供了密碼強度測試功能。

    HTML代碼部分:

  • <inputtype=「password」name=「pass」id=「pass」/>

  • <spanid=「passstrength」></span>

  • JavaScript腳本代碼:

  • $(『#pass』).keyup(function(e){

  • varstrongRegex=newRegExp(「^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\W).*$」,「g」);

  • varmediumRegex=newRegExp(「^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$」,「g」);

  • varenoughRegex=newRegExp(「(?=.{6,}).*」,「g」);

  • if(false==enoughRegex.test($(this).val())){

  • $(『#passstrength』).html(『MoreCharacters』);

  • }elseif(strongRegex.test($(this).val())){

  • $(『#passstrength』).className=『ok』;

  • $(『#passstrength』).html(『Strong!』);

  • }elseif(mediumRegex.test($(this).val())){

  • $(『#passstrength』).className=『alert』;

  • $(『#passstrength』).html(『Medium!』);

  • }else{

  • $(『#passstrength』).className=『error』;

  • $(『#passstrength』).html(『Weak!』);

  • }

  • returntrue;

  • });

  • 8、自適應縮放圖像:
    有時候網站上傳的圖像需要填充整個指定區域,但是有時候圖像比例並不恰好合適,縮放後效果不好。一下代碼就實現了檢測圖像比例然後做適當的縮放功能。

  • $(window).bind(「load」,function(){

  • //IMAGERESIZE

  • $(『#proct_cat_listimg』).each(function(){

  • varmaxWidth=120;

  • varmaxHeight=120;

  • varratio=0;

  • varwidth=$(this).width();

  • varheight=$(this).height();

  • if(width>maxWidth){

  • ratio=maxWidth/width;

  • $(this).css(「width」,maxWidth);

  • $(this).css(「height」,height*ratio);

  • height=height*ratio;

  • }

  • varwidth=$(this).width();

  • varheight=$(this).height();

  • if(height>maxHeight){

  • ratio=maxHeight/height;

  • $(this).css(「height」,maxHeight);

  • $(this).css(「width」,width*ratio);

  • width=width*ratio;

  • }

  • });

  • //$(「#contentpageimg」).show();

  • //IMAGERESIZE

  • });

  • 9、自動載入內容:
    現在很多網站,特別是微博,都不需要翻頁的按鈕了,直接下拉後會自動載入內容。下面的腳本就是簡單實現了個這種效果。

  • varloading=false;

  • $(window).scroll(function(){

  • if((($(window).scrollTop()+$(window).height())+250)>=$(document).height()){

  • if(loading==false){

  • loading=true;

  • $(『#loadingbar』).css(「display」,「block」);

  • $.get(「load.php?start=」+$(『#loaded_max』).val(),function(loaded){

  • $(『body』).append(loaded);

  • $(『#loaded_max』).val(parseInt($(『#loaded_max』).val())+50);

  • $(『#loadingbar』).css(「display」,「none」);

  • loading=false;

  • });

  • }

  • }

  • });

  • $(document).ready(function(){

  • $(『#loaded_max』).val(50);

  • });

㈢ 在html文檔中使用javascript腳本有哪3種方法

最常見是這種:
在任何地方,用<script type="text/javascript">開頭,及</script>結束
javascript 指令寫在其中。

<html>

<body>

<script type="text/javascript">
alert("hi")
</script>

網頁內容
</body>
</html>

~~~~~~~~~~~~~~~~~~~~~~~~

其次是簡單的一個,或兩三個指令直接寫在物件標簽內。

<html>
<body>

<div style="background-color:cyan; width:500px; height:200px;" onmouseover="alert('你好!'); alert('歡迎你來!')">
</div>

</body>
</html>

~~~~~~~~~~~~~~~~~~~~~~~

較少見是這種,一連串指令寫在物件標簽內。

<html>
<body>

<div style="background-color:cyan; width:500px; height:200px;" onmouseover="

var d = new Date()
d= '日一二三四五六'.charAt(d.getDay())
alert( '今天是星期' + d)

">
Hi
</div>

</body>
</html>

~~~~~~~~~~~~~~~~~~

你將以上三種存成獨立的 x.htm 文件,用ie或firefox試試,後二種用mouseover 就會觸發 javascript 程式。

㈣ 請列舉出JS語言中輸出數據的幾種方式

1。使用 window.alert() 彈出警告框。

2。使用 document.write() 方法將內容寫到 HTML 文檔中。

3。使用 innerHTML 寫入到 HTML 元素。

4。使用 console.log() 寫入到瀏覽器的控制台。

㈤ 在網頁中,怎麼用腳本

腳本通常可以由應用程序臨時調用並執行。各類腳本被廣泛地應用於網頁設計中,因為腳本不僅可以減小網頁的規模和提高網頁瀏覽速度,而且可以豐富網頁的表現,如動畫、聲音等。

當點擊網頁上的Email地址時能自動調用Outlook Express或Foxmail這類郵箱軟體,就是通過腳本功能來實現的。也正因為腳本的這些特點,往往被一些別有用心的人所利用。

例如在腳本中加入一些破壞計算機系統的命令,這樣當用戶瀏覽網頁時,一旦調用這類腳本,便會使用戶的系統受到攻擊。所以用戶應根據對所訪問網頁的信任程度選擇安全等級,特別是對於那些本身內容就非法的網頁,更不要輕易允許使用腳本。

通過「安全設置」對話框,選擇「腳本」選項下的各種設置就可以輕松實現對腳本的禁用和啟用。



(5)網頁中用腳本輸出方法有哪些擴展閱讀

網頁中的嵌入式腳本語言。熟知的HTML(Hyper Text Mark-up Language)即超文本標記語言,就是一種腳本語言,它的解釋器就是瀏覽器。

JavaScript直到現在仍然是網頁瀏覽器內的主要編程語言,它的ECMAScript標准化保證了它成為流行的通用嵌入式腳本語言。

另外,隨著動態網頁技術發展,ASP、JSP、PHP等嵌入網頁的腳本語言正被廣泛使用,不過這些腳本要通過Web Server解釋,而Html則被瀏覽器執行。

㈥ 簡述在網頁中插入javascript腳本程序的三種形式

1、html元素事件中;

2、<script>元素中;

3、外部腳本文件;

javascript:是表示在觸發默認動作時,執行一段JavaScript代碼,而 javascript:; 表示什麼都不執行,這樣點擊時就沒有任何反應。

href:URL 規定鏈接的目標 URL。

<a href="www..com"></a> 這個a標簽的話就是指點擊後跳轉到網路首頁

<a href="javascript:;"></a> 點擊後是不會跳轉的,一般用於開發時頁面還未完成。

(6)網頁中用腳本輸出方法有哪些擴展閱讀:

JavaScript語言中採用的是弱類型的變數類型,對使用的數據類型未做出嚴格的要求,是基於Java基本語句和控制的腳本語言,其設計簡單緊湊。

JavaScript是一種採用事件驅動的腳本語言,它不需要經過Web伺服器就可以對用戶的輸入做出響應。在訪問一個網頁時,滑鼠在網頁中進行滑鼠點擊或上下移、窗口移動等操作JavaScript都可直接對這些事件給出相應的響應。

JavaScript腳本語言不依賴於操作系統,僅需要瀏覽器的支持。因此一個JavaScript腳本在編寫後可以帶到任意機器上使用,前提上機器上的瀏覽器支 持JavaScript腳本語言,JavaScript已被大多數的瀏覽器所支持。

㈦ 如何在網頁中輸出大段代碼

方法一:用Replace方法替換
<

>。
<%
Function
HTMLEncode(Str)
Str=Replace(Str,"<","<")
Str=Replace(Str,">",">")
HTMLEncode=Str
End
Function
%>
<%=
HTMLEncode("
http://www.flash8.net>
閃吧")%>
方法二:用
Server
對象的
HTMLEncode
方法。
<%=
Server.HTMLEncode("
http://www.flash8.net>
閃吧")
%>
將輸出為(源碼):
<a
href=
http://www.flash8.net>
閃吧</a>
在瀏覽器中顯示結果為
http://www.flash8.net>
閃吧
特別提示
兩種方法輸出的代碼均為
<a
href=
http://www.flash8.net>
閃吧</a>
特別說明
Replace方法和Server對象的HTMLEncode方法來實現對HTML代碼的屏蔽。
Replace(string,substr,restr)

string中的substr替換為restr。
Server.HTMLEncode(string)
方法將string中的
HTML編碼為特殊字元串

㈧ 在網頁中有幾種嵌入JavaScript腳本的方式

1.
<script type="text/javascript">
document.write("Hello World!");
</script>

2.使用外部 JavaScript
<script src="xxx.js"></script>

㈨ 網頁製作的各種腳本有哪些

網頁中要加一些特效的話,一般都是用js或者是jq