1. 程式人生 > >js常用小功能示例

js常用小功能示例

1.讓文字不停地滾動

  <MARQUEE>滾動文字</MARQUEE>

2.記錄並顯示網頁的最後修改時間

  <script language=Javascript>
  document.write("最後更新時間: " + document.lastModified + "")
  </script>

3.關閉當前視窗

  <a href="/"onClick="javascript:window.close();returnfalse;">關閉視窗</a>

4.5秒後關閉當前頁

  <script language="Javascript">
  <!--
  setTimeout('window.close();',5000);
  -->
  </script>

5.2秒後載入指定網頁

  <head>
  <meta http-equiv="refresh" content="2;URL=http://你的網址">
  </head>

6.新增到收藏夾

  <script Language="Javascript">
  function bookmarkit()
  {
  window.external.addFavorite('http://你的網址','你的網站名稱')
  }
  if (document.all)document.write('<a href="#"onClick="bookmarkit()">加入收藏夾</a>')
  </script>

7.讓超連結不顯示下劃線

  <style type="text/css">
  <!-
  a:link{text-decoration:none}
  a:hover{text-decoration:none}
  a:visited{text-decoration:none}
  ->
  </style>

8.禁止滑鼠右鍵的動作

  <script Language = "Javascript">
  function click() { if (event.button==2||event.button==3)
  {
  alert('禁止滑鼠右鍵');
  }
  document.onmousedown=click // -->
  </script>

9.設定該頁為首頁

  <body bgcolor="#FFFFFF" text="#000000">
  <!-- 網址:http://你的網址-->
  <a class="chlnk" style="cursor:hand" HREF
  onClick="this.style.behavior='url(#default#homepage)';
  this.setHomePage('你的網站名稱);"><font color="000000" size="2"face="宋體">設為首頁</font></a>
  </body>

10.節日倒計時

  <script Language="Javascript">
  var timedate= new Date("December 25,2003");
  var times="聖誕節";
  var now = new Date();
  var date = timedate.getTime() - now.getTime();
  var time = Math.floor(date / (1000 * 60 * 60 * 24));
  if (time >= 0)
  document.write("現在離"+times+"還有: "+time +"天")</script>

11.單擊按鈕打印出當前頁

  <script Language="Javascript">
  <!-- Begin
  if (window.print) {
  document.write('<form>'
  + '<input type=button name=print value="列印本頁" '
  + 'onClick="javascript:window.print()"></form>');
  }
  // End -->
  </script>

12.單擊按鈕‘另存為’當前頁

  <input type="button" name="Button" value="儲存本頁"
  onClick="document.all.button.ExecWB(4,1)">
  <object id="button"
  width=0
  height=0
  classid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2">
  <embed width="0" height="0"></embed>
  </object>

13.顯示系統當前日期

  <script language=Javascript>
  today=new Date();
  function date(){
  this.length=date.arguments.length
  for(var i=0;i<this.length;i++)
  this[i+1]=date.arguments }
  var d=new date("星期日","星期一","星期二","星期三","星期四","星期五","星期六");
  document.write(
  "<font color=##000000 style='font-size:9pt;font-family: 宋體'>",
  today.getYear(),"年",today.getMonth()+1,"月",today.getDate(),"日",
  d[today.getDay()+1],"</font>" );
  </script>

14.不同時間段顯示不同問候語

  <script Language="Javascript">
  <!--
  var text=""; day = new Date( ); time = day.getHours( );
  if (( time>=0) && (time < 7))
    text="夜貓子,要注意身體哦! "
  if (( time >= 7 ) && (time <12))
    text="今天天氣……哈哈哈,不去玩嗎?"
  if (( time >= 12) && (time <14))
    text="午休時間哦,朋友一定是不習慣午睡的吧?!"
  if (( time >=14) && (time <18))
    text="下午茶的時間到了,休息一下吧! "
  if ((time >= 18) && (time <=22))
    text="您又來了,可別和MM聊太久哦!"
  if ((time >= 22) && (time <24))
    text="很晚了哦,注意休息呀!"
  document.write(text)
  //--->
  </script>

15.水中倒影效果

  <img id="reflect" src="你自己的圖片檔名" width="175"height="59">
  <script language="Javascript">
  function f1()
  {
    setInterval("mdiv.filters.wave.phase+=10",100);
  }
  if (document.all)
  {
    document.write('<img id=mdivsrc="'+document.all.reflect.src+'"
    style="filter:wave(strength=3,freq=3,phase=0,lightstrength=30)blur() flipv()">')
    window.onload=f1
  }
  </script>

16.慢慢變大的視窗

  <script Language="Javascript">
  <!--
  var Windowsheight=100
  var Windowswidth=100
  var numx=5
  function openwindow(thelocation){
  temploc=thelocation
  if
  (!(window.resizeTo&&document.all)&&!(window.resizeTo&&document.getElementByIdx_x))
  {
    window.open(thelocation)
    return
  }
  windowsize=window.open("","","scrollbars")
  windowsize.moveTo(0,0)
  windowsize.resizeTo(100,100)
  tenumxt()
  }
  function tenumxt(){
  if (Windowsheight>=screen.availHeight-3)
    numx=0
  windowsize.resizeBy(5,numx)
  Windowsheight+=5
  Windowswidth+=5
  if (Windowswidth>=screen.width-5)
  {
    windowsize.location=temploc
    Windowsheight=100
    Windowswidth=100
    numx=5
    return
  }
  setTimeout("tenumxt()",50)
  }
  //-->
  </script>
  <p><a href="javascript:openwindow(http://www.3ydesign.com)">進入</a>

17.改變IE位址列的IE圖示

  我們要先做一個16*16的icon(圖示檔案),儲存為index.ico。把這個圖示檔案上傳到根目錄下並在首頁<head></head>之間加上如下程式碼:

  <link REL = "Shortcut Icon" href="index.ico">

18.在視窗的狀態列顯示滾動資訊  
(1) 在BODY中加入程式碼 
<scriptlanguage="javascript">  
varmsg="歡迎訪問建站資源網,在這裡有你會有所收穫的!";  
var i=1  
function scroll()  
{  
mess=msg.substring(i,msg.length)+""+msg.substring(0,i)  
window.status=mess  
i++;  
if (i>=msg.length) i=1;//設定不停滾動 
setTimeout("scroll()",200); //設定滾動速度 
}  
</script>  
(2)在BODY標籤中:  
<bodyonload="scroll()">  

19、在頁面加入當前時間  

<scriptlanguage="javascript">  
tdy=new Date();  
document.write("當前時間:",tdy.getHours());  
document.write(":",tdy.getMinutes());  
document.write(":",tdy.getSeconds());  
</script>  

20、前進、後退按鈕 
<input type="button" value="<-"onclick="history.go(-1)">  
<input type="button" value="->"onclick="history.go(1)">  


21、加入頁面最後修改日期  
<scriptlanguage="javascript">  
document.write("本頁最後編輯日期:");  
document.write(document.lastModified)  
</script>  


22、前進、後退按鈕 
<font onclick="history.go(-1)">前一頁</font>  
<font onclick="history.go(-2)">前兩頁</font>  
<font onclick="history.go(-3)">前三頁</font>  
<font onclick="history.go(1)">後一頁</font>  
<font onclick="history.go(2)">後兩頁</font>  
<font onclick="history.go(3)">後三頁</font>  
也可設定退後、前進多步 

23、滑鼠事件 
<A HREF="MAILTO:[email protected]"onmouseover="alert("給我寫信"); returntrue">信箱</A> 
滑鼠放上去顯示警告資訊 


24、獲得瀏覽器的屬性 
navigator.appCodename=undefinednavigator.appName=Microsoft InternetExplorernavigator.appVersion=4.0 (compatible; MSIE 5.0; Windows 98;DigExt)navigator.appAgent=undefined  

25、列印整個頁面 
<fontonClick="javascript:window.print()">列印本頁</font> 

26、檢視原始碼 
<input TYPE="button" NAME="view" value="檢視本頁的原始碼"onClick="window.location="view-source:" +window.location.href"class="pt9"> 

27、重新整理頁面 
<fontonClick="history.go(0)">重新整理本頁</font> 

28、背景色變換 
<input TYPE="button" value="背景色變換"onClick="BgButton()"> 
<script>functionBgButton() 

if(document.bgColor==#00ffff)  

document.bgColor=#ffffff; 

else{document.bgColor=#00ffff; 


</script> 

29、Title上顯示資訊 
<scriptlanguage="javascript1.2"> 
<!--hide 
document.title="今天是星期天" 
//--hide--> 
</script> 

相關推薦

js常用功能示例

1.讓文字不停地滾動   <MARQUEE>滾動文字</MARQUEE> 2.記錄並顯示網頁的最後修改時間   <script language=Javascript>   document.write("最後更新時間: " + document.lastModified + "")   </script>

js常用方法

cond fonts 5.5 向上 簡單 適配 one 字符 overflow 1.時間格式化 a.需要熟悉Date對象的方法; b.使用 getFullYear(),getMonth(),getDate()等方法獲取年份,月份等時間數據,然後根據所需要的時間格式可以自行

js倒計時功能

PHP交流群:294088839, Python交流群:652376983 function timeD(){ var num=$(".goTel").text()-0; console.log(num); num--; if(num==0 || isNaN(

js常用方法,浮點數的計算等

var trimNumber = function(number) {         // 按實際的小數位顯示, 最多兩位小數.         // 1.23=1.23, 1.20=1.2, 1.00=1         if (number.toFixed(1)*1 != number.to

JavaScript 常用功能集合

false button navigator pre string ret per int() 鼠標右鍵 1. 得到當前用戶使用的瀏覽器的內核版本 function getExplorer(){    var browser = ""; var explo

js - 常用功能方法匯總(updating...)

output 方法 col tar purpose object 常用 匯總 pda 一、查值的類型(可用於拷貝) 1 /* 2 * @Author: guojufeng@ 3 * @Date: 2017-12-20 15:07:06

clipboard.js實現複製功能示例程式碼

<div  class="coupon-text-wrap"> <span class="coupon-text" id="coupon-text"  > 123456 </span>   <span class="coupon

Tkinter-Text控制元件常用功能示例

簡介及簡例 Text 控制元件用來顯示多行文字. Tkinter 的 Text 控制元件很強大, 很靈活, 可以實現很多功能. 雖然這個控制元件的主要用途是顯示多行文字, 但其還可以被用作簡單的文字編輯器, 甚至是網頁瀏覽器.  Text 控制元件可以顯示網頁連結, 圖片, HTML頁

Python3 進行讀取、修改和寫Excel表格(.xlsx檔案)的常用功能示例

讀取我一般用xlrd(僅支援讀),修改用openpyxl(支援讀寫改),寫用xlsxwriter(僅支援寫 ) xlrd安裝命令 pip install xlrd openpyxl安裝命令 pip install openpyxl xlsxwriter安裝命令 pip install

積累的一個js公共庫,常用功能封裝,base64和md5,toast等

- 對常用函式的封裝,有助於綜合運用和認時介面和程式碼層次; 一部分功能基於jQ,但是如果html中沒有引入jQ的話,該公共js會自動檢測並自動引入。 - 程式碼思路和用法再程式碼註釋和註釋呼叫中已經說明。 - /* * create: 2018-06-00 u

微信程式實現slideUp、slideDown滑動效果及點選空白隱藏功能示例

本文例項講述了微信小程式實現slideUp、slideDown滑動效果及點選空白隱藏功能。分享給大家供大家參考,具體如下: 怎樣實現jq中的slideUp或者slideDown這種動畫效果呢,我的思路是用css3的transform: translateY() 屬性,給需要動畫的元素新增上一個動畫

JS 常用功能函式封裝,繼承、陣列去重、判斷資料型別

繼承方法封裝: var inherit =(function(){ var F = function(){}; return function(a,b){ F.prototype = b.prototype; a.prototype = new

js常用程式碼片段,常用功能

1. PC - js 返回指定範圍的隨機數(m-n之間)的公式 Math.random()*(n-m)+m return false return false // event.preventDefault()會阻擋預設要發生的事件. // ev

js實現Excel檔案匯入匯出、利用 js-xlsx 實現 Excel 檔案匯入匯出-功能示例

1.匯入功能實現 下載js-xlsx到dist複製出xlsx.full.min.js引入到頁面中 然後通過FileReader物件讀取檔案利用js-xlsx轉成json資料 <!DOCTYPE html> <html> <head>

使用clipboard.js實現複製功能示例程式碼

<td>電話號碼</td> <td> <span class="screenTel" id="callNumber"></span> &nbsp;<span class="tel

純前端利用 js-xlsx 實現 Excel 檔案匯入匯出功能示例

1.匯入功能實現 下載js-xlsx到dist複製出xlsx.full.min.js引入到頁面中 然後通過FileReader物件讀取檔案利用js-xlsx轉成json資料 程式碼實現(==>示例<==) <!DOCTYPE html> <html> <he

【轉載】vue.js實現格式化時間並每秒更新顯示功能示例

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user

js排他功能示例

inpu this tro put ctype .get tel value btn <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <

js功能:定時器之滑動的ul

<!DOCTYPEhtml> <html> <head>     <meta charset="utf-8">     <title></title>     <style>        

常用的ps功能

      去除背景:一般工具欄第四行魔法棒,如果沒看到可以右鍵,應該會顯示出全部型別,必然有魔法棒。用魔法棒選中影象,直接按delete便可。有時候你發現去掉的圖片太多了,那是因為容差太大了,重新設定容差,弄小一點,就能做到去除背景了。有時候你發現按delete會叫你填充