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
了解更多
html5网页中的表格教程,javascript程序设计_达内javascript教程-达内web前端培训相关推荐
- HTML期末大作业课程设计动漫主题html5网页~奇恩动漫首页html模板(HTML+CSS)~个人设计web前端大作业...
HTML期末大作业课程设计动漫主题html5网页~奇恩动漫首页html模板(HTML+CSS) ~个人设计web前端大作业 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTM ...
- HTML期末大作业课程设计动漫主题html5网页~奇恩动漫首页html模板(HTML+CSS)~个人设计web前端大作业
HTML期末大作业课程设计动漫主题html5网页~奇恩动漫首页html模板(HTML+CSS) ~个人设计web前端大作业 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTM ...
- 怎么把html的网页做成视频,html5网页中怎么加入视频?怎么为网页添加视频?
相信很多小伙伴会在各种网页和 app 中观看各种视频,那么今天我们就来说说怎么在html5网页中怎么加入视频?和怎么为网页添加视频吧! 1.首先,我们在开发工具中新建一个 .html 文件,输入下面代 ...
- html怎么弄到excel里,html里导入excel表格数据-如何将网页中的表格快速复制到EXCEL中...
怎么把html文件转成excel 1.首先,我们打开要转换成THML表格文件.(是我用的WPS2019版本的截图,EXCEL软件操作上差不多.) 2.接下来,点击左上角的[文件] 3.在[文件]菜单里 ...
- 极速系列04—python批量获取word/PDF/网页中的表格
这里写目录标题 1 python批量获取word中的表格 目的: 1.1 简介 1.2 读取word文档内容 方法一 方法二 2 python批量获取PDF中的表格 目的: 2.1 简介 2.2 读取 ...
- 网页中的表格保存为EXCEL表格,打印网页中的表格
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- html怎么复制到Excel表格里,html表格转excel【如何将网页中的表格快速复制到EXCEL中】...
在HTML5中如何读取Excel中的数据并且在火狐浏览器中显示啊 js 调用winAPI html5 没这 具体能容自己修 Untitled Page function importXLS(file ...
- html批量导入excel表格,html 导入excel表格数据格式-如何将网页中的表格快速复制到EXCEL中...
html读取本地excel文件并展示 我们打开上的一个包含表格内容的页点击菜单栏-文件-另存为. 弹出选择保存路径,将保存类型选为"htm 或Html格式". 在计算机上新建一个E ...
- 复制网页中的表格格式后导入到excel、markdown、数据库、json中,并转换表格格式
复制网页中的表格 (先从第二步开始,如果第二步不行再用这一步)首先在桌面新建一个文本文件(以.txt结尾的文本文件),选中网页的表格后复制,然后粘贴在新建的文本文件中,显示为: S.No. CQL数据 ...
最新文章
- 关联查询的resultMap写法示例
- docker run redis
- 【组合数学】生成函数 简要介绍 ( 生成函数定义 | 牛顿二项式系数 | 常用的生成函数 | 与常数相关 | 与二项式系数相关 | 与多项式系数相关 )
- Java学习笔记-包装类
- 我拿什么融化你,冰冷的电子图书馆?
- 单例设计模式-容器单例
- spring读取properties配置文件_Spring-1
- 将整数m的各位数字保存到数组A中
- iPhone 11系列低至4599元,40亿消费券开抢!618正式开启了
- 跟着辛星用PHP的反射机制来实现插件
- 学车是学手动档好,还是学自动档好呢?另外建议自驾游选哪个档比较好呢?
- [x-means] 1.x-means简介
- 情侣c语言程序,C/C++编程笔记:C语言制作情侣必备《爱情电子相册》,源码解析!...
- DirectX修复工具全部文件修复失败或下载失败的解决方法
- 【历史上的今天】2 月 1 日:网景浏览器停止支持;id Software 成立;Intel 80286 芯片问世
- WinDriver Kernel Plugin开发
- oracle学习之oracle基础
- Android开发者如何删除手机自带应用
- 研究生研一学习机器学习ML、深度学习DL的规划
- 虚拟机之Jvm、dalvik、art联系和区别