js簡單效果代碼（js案例特效大全）

本文目錄一覽：

• 1、簡單的js代碼編程
• 2、JS效果代碼
• 3、js網頁打字機效果代碼？
• 4、急！急！急！求一段簡單的JS代碼
• 5、關於Javascript 特效代碼
• 6、求一個簡單的點擊圖片放大縮小的JS代碼

簡單的js代碼編程

!DOCTYPE html

html

head

title/title

meta charset=”utf-8″

style type=”text/css”

div {

min-height: 30px;

line-height: 30px;

border: 1px dashed #ccc;

margin-bottom: 5px;

width: 400px;

padding: 0px 20px;

}

#showInfo {

color: green;

}

/style

/head

body

div

label昵稱：/label

input type=”text” name=”name” id=”name”

/div

div

label郵箱：/label

input type=”text” name=”email” id=”email”

/div

div

button確定/button

/div

div id=”showInfo”/div

script type=”text/javascript”

var nameInput = document.getElementById(‘name’);

var emailInput = document.getElementById(’email’);

var btn = document.getElementsByTagName(‘button’)[0];

var wrap = document.getElementById(‘showInfo’);

btn.onclick= function () {

wrap.innerHTML = ”;

var p1 = document.createElement(‘p’);

p1.textContent = ‘昵稱：’ + nameInput.value;

var p2 = document.createElement(‘p’);

p2.textContent = ‘郵箱：’ + emailInput.value;

wrap.appendChild(p1);

wrap.appendChild(p2);

}

/script

/body

/html

//jq

var nameInput = $(‘#name’);

var emailInput = $(‘#email’);

var btn = $(‘button’).get(0);

var wrap = $(‘#showInfo’);

btn.on(‘click’, function () {

wrap.html(”);

var p1 = $(‘p’);

p1.text(‘昵稱：’ + nameInput.value);

var p2 = $(‘p’);

p2.text(‘郵箱：’ + emailInput.value);

wrap.append(p1);

wrap.append(p2);

});

上班好無聊。這要是看不懂我也就沒辦法了

JS效果代碼

把這句輸出：document.write(“今天是”+year+”年”+montharray[month]+”月”+daym+”日”+”，”+dayarray[day])

改為：

document.write(“今天是”+daym+”日”)

js網頁打字機效果代碼？

打字機效果很簡單的啦，我這裡有一段代碼，你參考參考，至於你所說的顏色，字體，你可以根據你的需求做一些修改，背景音樂的話，你只要放一個播放器，然後設定高度寬度為0，指定音樂路徑即可：

腳本說明:

第一步:把如下代碼加入head區域中

SCRIPT language=”JavaScript”

!–

var layers = document.layers, style = document.all, both = layers || style, idme=908601;

if (layers) { layerRef = ‘document.layers’; styleRef = ”; } if (style) { layerRef = ‘document.all’; styleRef = ‘.style’; }

function writeOnText(obj, str) {

if (layers) with (document[obj]) { document.open(); document.write(str); document.close(); }

if (style) eval(obj+’.innerHTML= str’);

}

//以下是輸出的內容，自己修改即可。

var dispStr = new Array(

“font color=red size=3歡迎光臨精彩JavaScript世界…/fontbrfont color=green size=3你知道怎樣在你的網頁中做一個很酷的網頁菜單嗎?/fontbrfont color=red size=3你知道怎樣讓你的網頁背景向上或向下移動嗎?/fontbrfont color=blue size=3你知道怎樣在你的主頁中任意位置顯示一個時鐘嗎?/fontbrfont color=red size=3你知道怎樣在主頁中做特效文字嗎?/fontbrfont color=black size=3你知道怎樣做一個很cool的日曆嗎?/font”

);

var overMe=0;

function txtTyper(str, idx, idObj, spObj, clr1, clr2, delay, plysnd) {

var tmp0 = tmp1 = ”, skip = 0;

if (both idx = str.length) {

if (str.charAt(idx) == ”) { while (str.charAt(idx) != ”) idx++; idx++; }

if (str.charAt(idx) == ” str.charAt(idx+1) != ‘ ‘) { while (str.charAt(idx) != ‘;’) idx++; idx++; }

tmp0 = str.slice(0,idx);

tmp1 = str.charAt(idx++);

if (overMe==0 plysnd==1) {

if (navigator.plugins[0]) {

if (navigator.plugins[“LiveAudio”][0].type==”audio/basic” navigator.javaEnabled()) {

document.embeds[0].stop();

setTimeout(“document.embeds[0].play(false)”,100); }

} else if (document.all) {

ding.Stop();

setTimeout(“ding.Run()”,100);

}

overMe=1;

} else overMe=0;

writeOnText(idObj, “span class=”+spObj+”font color='”+clr1+”‘”+tmp0+”/fontfont color='”+clr2+”‘”+tmp1+”/font/span”);

setTimeout(“txtTyper(‘”+str+”‘, “+idx+”, ‘”+idObj+”‘, ‘”+spObj+”‘, ‘”+clr1+”‘, ‘”+clr2+”‘, “+delay+” ,”+plysnd+”)”,delay);

}

}

function init() {

txtTyper(dispStr[0], 0, ‘ttl0’, ‘ttl1’, ‘#339933’, ‘#99FF33’, 50, 0);

}

// —

/SCRIPT

第二步:把如下代碼加入body區域中

DIV class=ttl1 id=ttl0SPAN class=ttl1/SPAN/DIV

第三步:把body改為

body bgcolor=”#fef4d9″ onload=”onload=init()”

背景音樂

OBJECT id=”Player” CLASSID=”CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6″ style=”display:none”

param name=”URL” value=”你的路徑”

PARAM name=”autoStart” value=”False”

PARAM name=”uiMode” value=”invisible”

/OBJECT

急！急！急！求一段簡單的JS代碼

不知道你說的是不是將div顯示隱藏。

如果是的話，你可以將div給個style=”display:none;”的屬性把兩個div隱藏起來。

然後在某個控件上給個觸發事件如：onclick=”show()”調用js。

js里的function show()就寫

docuement.getElementById(“g1″).style.display=”block”;就能實現了。

關於Javascript 特效代碼

script language=”JavaScript”

!– Hide the script from old browsers —

function compute(obj) //定義一個函數 名字叫compute 他接收了一個參數 obj

{obj.expr.value = eval(obj.expr.value)} //當前的參數的值和下文參數值所用的方法相同

var one = ‘1’ //定義一個字符型的1

var two = ‘2’ //定義一個字符型的2

var three = ‘3’ //定義一個字符型的3

var four = ‘4’ //定義一個字符型的4

var five = ‘5’ //定義一個字符型的5

var six = ‘6’ //定義一個字符型的6

var seven = ‘7’ //定義一個字符型的7

var eight = ‘8’ //定義一個字符型的8

var nine = ‘9’ //定義一個字符型的9

var zero = ‘0’ //定義一個字符型的0

var plus = ‘+’ //定義一個字符型的+

var minus = ‘-‘ //定義一個字符型的*

var multiply = ‘*’ //定義一個字符型的*

var divide = ‘/’ //定義一個字符型的/

var decimal = ‘.’ //定義一個字符型的.

function enter(obj, string) //定義一個函數 名字叫enter 他接收了一個參數 obj

{obj.expr.value += string} //讓 obj的值加上 ‘+’後面的值

function clear(obj) //定義一個函數 名字叫clear 他接收了一個參數 obj

{obj.expr.value = ”} //讓obj的值等於空

// –End Hiding Here —

/script

form name=”calc”

table border=1

td colspan=4input type=”text” name=”expr” size=30 action=”compute(this.form)” tr

!–提交表單–

tdinput type=”button” value=” 7 ” onClick=”enter(this.form, seven)”!–當鼠標點擊

按鈕的時候提交給函數按鈕中的值–

tdinput type=”button” value=” 8 ” onClick=”enter(this.form, eight)”!–當鼠標點擊

按鈕的時候提交給函數按鈕中的值–

tdinput type=”button” value=” 9 ” onClick=”enter(this.form, nine)”!–當鼠標點擊

按鈕的時候提交給函數按鈕中的值–

tdinput type=”button” value=” / ” onClick=”enter(this.form, divide)”!–當鼠標點

擊按鈕的時候提交給函數按鈕中的值–

trtdinput type=”button” value=” 4 ” onClick=”enter(this.form, four)”!–當鼠標

點擊按鈕的時候提交給函數按鈕中的值–

tdinput type=”button” value=” 5 ” onClick=”enter(this.form, five)”!–當鼠標點擊

按鈕的時候提交給函數按鈕中的值–

tdinput type=”button” value=” 6 ” onClick=”enter(this.form, six)”!–當鼠標點擊按

鈕的時候提交給函數按鈕中的值–

tdinput type=”button” value=” * ” onClick=”enter(this.form, multiply)”!–當鼠標

點擊按鈕的時候提交給函數按鈕中的值–

trtdinput type=”button” value=” 1 ” onClick=”enter(this.form, one)”!–當鼠標點

擊按鈕的時候提交給函數按鈕中的值–

tdinput type=”button” value=” 2 ” onClick=”enter(this.form, two)”!–當鼠標點擊按

鈕的時候提交給函數按鈕中的值–

tdinput type=”button” value=” 3 ” onClick=”enter(this.form, three)”!–當鼠標點擊

按鈕的時候提交給函數按鈕中的值–

tdinput type=”button” value=” – ” onClick=”enter(this.form, minus)”!–當鼠標點

擊按鈕的時候提交給函數按鈕中的值–

trtd colspan=2input type=”button” value=” 0 ” onClick=”enter

(this.form, zero)”!–當鼠標點擊按鈕的時候提交給函數按鈕中的值–

tdinput type=”button” value=” . ” onClick=”enter(this.form, decimal)”!–當鼠標

點擊按鈕的時候提交給函數按鈕中的值–

tdinput type=”button” value=” + ” onClick=”enter(this.form, plus)”!–當鼠標點擊

按鈕的時候提交給函數按鈕中的值–

trtd colspan=2input type=”button” value=” = ” onClick=”compute(this.form)”!

–提交表單在javascript中進行運算–

td colspan=2input type=”button” value=”AC” size= 3 onClick=”clear(this.form)” !–

點擊此按鈕調用此函數–

/table

/form

求一個簡單的點擊圖片放大縮小的JS代碼

1、準備好需要用到的圖標。

2、新建html文檔。

3、書寫hmtl代碼。div id=allbox    div id=boxhome        img style=”WIDTH: 107px; BOTTOM: 5px; HEIGHT: 176px; LEFT: 10px” id=imgSmallLeft class=imgBorder onClick=”clearInterval(autoplay);moveD(‘l’);”    。

4、書寫並添加js代碼。script src=”js/ntes_jslib_1.x.js”/scriptscript src=”js/zzsc.js”/script。

5、代碼整體結構。

6、查看效果。