html5网页中的表格教程,javascript程序设计_达内javascript教程-达内web前端培训

JavaScript基础 — 输出星星

var oT1 = document.getElementById('txt1');

var oT2 = document.getElementById('txt2');

var oBtn = document.getElementById('btn1');

oBtn.οnclick=function(){

oT2.value='';

var value = Number(oT1.value);

for(var i =0;i < value;i++){

//i 0 -> 循环走 1次 生成1个* *

//i 1 -> 循环走 2次 生成2个* **

//i 2 -> 循环走 3次 生成3个* ***

//i 3 -> 循环走 4次 生成4个* ****

//以此类推

for(var j=0;joT2.value+='*';

}

oT2.value+='\n';

}

};

运行代码

了解更多

JavaScript基础 — 拖拽

function SayHello(){

document.getElementById("myMessage").innerHTML =

"Hello, World!";

}

运行代码

在此查看效果：

+

-

*

/

%

了解更多

JavaScript基础 — 键盘控制元素

function SayHello(){

document.getElementById("myMessage").innerHTML =

"Hello, World!";

}

运行代码

在此查看效果：

Hello，World

了解更多

JavaScript基础 — 简易秒表

function toDou(n) {

return n < 10 ? '0' + n : '' + n;

}

window.onload = function() {

var oT = document.getElementById('t1');

var oBtn = document.getElementById('btn1');

var oBtn2 = document.getElementById('btn2');

var timer = null;

var num = parseInt(oT.value);

var bSin = false;

oBtn.onclick = function() {

if (bSin) {

return;

}

bSin = true;

clearInterval(timer);

function m(){

num++;

var iM = parseInt(num / 60);

var iS = num % 60;

oT.value = toDou(iM) + ':' + toDou(iS);

}

m();

timer = setInterval(m,1000);

};

oBtn2.onclick = function() {

clearInterval(timer);

bSin = false;

};

};

运行代码

在此查看效果：

了解更多

JavaScript基础 — 拖拽

var oBox = document.getElementById('box');

oBox.οnmοusedοwn=function(ev){

var oEvent = ev || event;

var disX = oEvent.clientX - oBox.offsetLeft;

var disY = oEvent.clientY - oBox.offsetTop;

document.οnmοusemοve=function(ev){

var oEvent = ev || event;

oBox.style.left = oEvent.clientX-disX+'px';

oBox.style.top = oEvent.clientY-disY+'px';

};

document.οnmοuseup=function(){

document.onmousemove = null;

document.onmouseup = null;

};

return false;

};

运行代码

在此查看效果：用鼠标拖拽小方块

了解更多

JavaScript基础 — 键盘控制元素

var oBox = document.getElementById('box');

document.οnkeydοwn=function(ev){

var oEvent = ev || event;

switch (oEvent.keyCode){

case 37:

oBox.style.left=oBox.offsetLeft-10+'px';

break;

case 39:

oBox.style.left=oBox.offsetLeft+10+'px';

break;

case 40:

oBox.style.top=oBox.offsetTop+10+'px';

break;

}

};

运行代码

在此查看效果：用键盘控制小方块

了解更多

JavaScript基础 — 无限运动

var oBtn = document.getElementsByTagName('input')[0];

var timer=null;

var oBall = document.getElementById('ball');

var arr = [{left:100,top:100},{left:800,top:200},{left:400,top:600}];

var n = 0;

oBtn.οnclick=function(){next();};

function next(){

timer=setInterval(function(){

move(oBall,{left:arr[n%arr.length].left,top:arr[n%arr.length].top},{complete:function(){next();}})n++;},300);}

运行代码

在此查看效果：

了解更多

JavaScript基础 — 文本时钟

function toDou(n) {

return n < 10 ? '0' + n : '' + n;

}

window.onload = function() {

var oDiv = document.getElementById('div1');

function clock(){

var oDate = new Date();

var iH = oDate.getHours();

var iM = oDate.getMinutes();

var iS = oDate.getSeconds();

oDiv.innerHTML = toDou(iH) + ':' + toDou(iM) + ':'+ toDou(iS);

}

clock();

setInterval(clock,1000);

运行代码

在此查看效果：

12:34:56

了解更多

JavaScript基础 — 键盘控制元素

function SayHello(){

document.getElementById("myMessage").innerHTML =

"Hello, World!";

}

运行代码

在此查看效果：

Hello，World

了解更多

JavaScript基础 — 键盘控制元素

function SayHello(){

document.getElementById("myMessage").innerHTML =

"Hello, World!";

}

运行代码

在此查看效果：

Hello，World

了解更多