Web简单小结
一.HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应：
<h1 onclick="this.innerHTML='你点我干啥'">请点击这里</h1>
---------------------------------------------------------
<p onclick="changeText(this)"> 请点击这里</p>
<script type="text/javascript">
function changeText(id){
id.innerHTML='你点我干嘛123456！';
}
</script>
--------------------------------------------------------
2.使用 HTML DOM 来分配事件
<p>点击按钮就可以执行 <em>displayDate()</em> 函数。</p>
<button id="myBtn">点击这里</button>
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
3.onchange 事件常结合对输入字段的验证来使用。
<input type="text" id="demo" onchange="myFunction()" placeholder="请输入小写英文字母"/>
<p>当鼠标离开输入框时候，输入的字符串会变大写</p>
<script>
function myFunction(){
var text=document.getElementById('demo');
text.value=text.value.toUpperCase();
}
</script>
4.onmouseover 和 onmouseout 事件
<h1 onmousemove="over(this)" onmouseout="out(this)"
style="background-color:green;width:120px;height:20px;padding:40px;color:#ffffff;">
</h1>
<script>
function over(id) {
id.innerHTML = "谢谢!";
}
function out(id) {
id.innerHTML = "回来";
}
</script>
5.onmousedown 和 onmouseup
当用户按下鼠标按钮时，更换一幅图像。
<script>
function lighton()
{
document.getElementById('myimage').src="/i/eg_bulbon.gif";
}
function lightoff()
{
document.getElementById('myimage').src="/i/eg_bulboff.gif";
}
</script>
</head>
<body>
<img id="myimage" onmousedown="lighton()" onmouseup="lightoff()" src="/i/eg_bulboff.gif" />
<p>按住鼠标不放可以点亮这盏灯！</p>
6.onfocus
当输入字段获得焦点时，改变其背景色。
<script>
function myFunction(x)
{
x.style.background="yellow";
}
</script>
</head>
<body>
请输入英文字符：<input type="text" onfocus="myFunction(this)">
<p>当输入字段获得焦点时，会触发改变背景颜色的函数。</p>
二.DOM节点操作：
1.如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。
<body>
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var para=document.createElement("p");
//设置节点属性
para.setAttribute("id", "new");
para.setAttribute("class", "pl");
para.setAttribute("src",'./img/1.jpg');
para.setAttribute("width","200");
para.setAttribute("height","200");
var node=document.createTextNode("这是新段落。");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
</script>
</body>
2.删除已有的 HTML 元素
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>
提示：如果能够在不引用父元素的情况下删除某个元素，就太好了。
不过很遗憾。DOM 需要清楚您需要删除的元素，以及它的父元素。
这是常用的解决方案：找到您希望删除的子元素，然后使用其 parentNode 属性来找到父元素：
var child=document.getElementById("p1");
child.parentNode.removeChild(child);
三.JavaScript循环：
使用 For...In 声明来遍历数组内的元素
var x
var mycars = new Array()
mycars[0] = "宝马"
mycars[1] = "奔驰"
mycars[2] = "宾利"
for (x in mycars)
{
document.write(mycars[x] + "<br />")
}
四.高级JavaScript:
1.检测浏览器及版本
var browser=navigator.appName
var b_version=navigator.appVersion
var version=parseFloat(b_version)
document.write("浏览器名称："+ browser)
document.write("<br />")
document.write("浏览器版本："+ version)
2.简单的计时：
<input type="button" value="2秒计时" onclick="setTime()"/>
<p>请点击上面按钮，几秒后会发生弹出框</p>
<script type="text/javascript">
function setTime(){
var t=setTimeout("alert('2 秒！')",2000)
}
</script>
3.无线循环计时：
<input type="button" value="开始计时" onclick="setTime()"/>
<input type="text" id="txt"/>
<p>请点击上面按钮，就开始计时了</p>
<script type="text/javascript">
var s=0;
var t;
function setTime(){
document.getElementById('txt').value=s;
s=s+1;
t=setTimeout("setTime()",1000);
}
</script>
4.带有停止的时间计时：
<input type="button" value="开始计时" onclick="setTime()"/>
<input type="text" id="txt"/>
<input type="button" value="停止计时！" onClick="stopCount()">
<p>请点击上面按钮，就开始计时了</p>
<script type="text/javascript">
var s=0;
var t;
function setTime(){
document.getElementById('txt').value=s;
s=s+1;
t=setTimeout("setTime()",1000);
}
function stopCount(){
// c=0;
setTimeout("document.getElementById('txt').value=c",0);
clearTimeout(t);
}
</script>
5.使用计时事件制作的钟表:
<div id="txt"></div>
<script type="text/javascript">
function startTime(){
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
m=checkTime(m);
s=checkTime(s);
document.getElementById('txt').innerHTML=h+":"+m+":"+s;
t=setTimeout("startTime()",50)
}
function checkTime(i){
if (i<10) {
i="0" + i
}
return i
}
</script>
6.显示今天是星期几：
<script type="text/javascript">
var s=new Date();
var week=new Array;
week[0]='周日';
week[1]='周一';
week[2]='周二';
week[3]='周三';
week[4]='周四';
week[5]='周五';
week[6]='周六';
document.write("今天是："+week[s.getDay()]+"<br />");
document.write("今天是："+s.getDay());
</script>
Web简单小结的更多相关文章
- 前台vue的使用简单小结
前台vue的使用简单小结 本项目要求:安装有node.js 6.0以及以上安装npm使用vue.js官方安装方法初始化项目npm install安装VueResurce:npm install vue ...
- springboot微服务的简单小结
springboot微服务的简单小结 近来公司用springboot微服务,所以小结一下. 基础: 什么是SpingBoot微服务? 如何创建SpringBoot微服务? 如何管理和完善SpringB ...
- web测试小结
今年5月份开始接触web测试,经过大半年的测试及学习,简单总结下 测试过程: 1.需求理解 2.测试策略.方案.用例编写及评审 3.测试环境搭建 4.测试执行 5.bug提单.问题跟踪 6.回归测试 ...
- SpringMVC_简单小结
SpringMVC是一个简单的.优秀的框架.应了那句话简单就是美,而且他强大不失灵活,性能也很优秀. 机制:spring mvc的入口是servlet,而struts2是filter(这里要指出,fi ...
- 一. DotNet MVC4.0+EasyUI Web简单框架-前言
之所以说它简单,是因为仅仅用了大家最熟悉的三层架构,简单明了 1.先新建一个MVC4.0 Web项目 2.添加EasyUI的引用,放到Script底下 http://files.cnblogs.com ...
- web magic 小结
缘起 写了多年的程序,鲜有产出物,于是最近打算做个不可说的东西来祭奠逝去的青春.数据,是一个程序的起点,我们没有数以亿计的用户,无法让活跃用户给我们产生数据,那就只能去别人的站点上借点数据了.这个功能 ...
- WEB简单数据操作练习
主要学习代码: Login.aspx: <!--第一种方式--> <%-- <script type="text/javascript"> funct ...
- ASP.NET MVC ViewData/ViewBag 简单小结
近期在项目中遇到一个问题,就是用ViewBag.Model存储匿名对象传递给View,但是需要根据条件给匿名对象添加属性,这个可真心不易,Google了一下发现很多方案都是动态编译神马的,感觉好高大上 ...
- 移动web问题小结
Meta标签: <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalab ...
随机推荐
- Linux的那些事-系统启动（增加开机启动项）
1 /etc/init.d 2 /etc/inittab 3 /etc/rc.d/init.d 1. /etc/init.d 是一般开机的启动服务存放在这个目录下,至于实现机制,其实 ...
- 怎么用wait、notify巧妙的设计一个Future模式？
我们知道多线程可以实现同时执行多个任务(只是看起来是同时,其实是CPU的时间片切换特别快我们没感觉而已). 现在假设一个做饭的场景,你没有厨具也没有食材.你可以去网上买一个厨具,但是这段时间,你不需要 ...
- .NET面试题整理（持续更新）
1.已知值类型保存在线程栈中,引用类型保存在堆中 struct Point{ public int x,y; } public sealed class program{ public static ...
- Mac启动MongoDB报错：exception in initAndListen: NonExistentPath: Data directory /data/db not found., terminating
这是主要错误: initAndListen中的异常:NonExistentPath:找不到数据目录/ data / db. 最新版的Mac系统Catalina发生了令人惊讶的更改:它不允许更改根目录( ...
- 关于macos升级到catalina之后cisco无法使用的问题
最近升级macos到最新的catalina系统,发现cisco的anyconnect用不了了,google了下,发现不是个例,mac提示联系软件开发者更新软件以兼容catalina,这就呵呵了. 于是 ...
- 五分钟了解抽象语法树（AST）babel是如何转换的？
抽象语法树 什么是抽象语法树? It is a hierarchical program representation that presents source code structure acco ...
- C#上位机之—WinForm实现Socket异步通讯示例
工作中常用到的一些知识点,总是用完就忘,第一次尝试用博客记录下来,以备后用: Socket通讯,Socket(套接字)是基于TCP/IP通讯方式的封装好的类,调用时需要添加下面的服务引用: using ...
- LoaderTest加载测试用例的方法总结
加载用例,可以用suite.addTest(测试类名("测试函数名"))实现,也可用过suit.addTest(loader.Loader....)实现,一下针对Loader的三个 ...
- 【daily】sql分组，每组取N条
数据准备 -- mysql语法 DROP TABLE IF EXISTS `test_group_type`; CREATE TABLE `test_group_type` ( `id` int(11 ...
- P2918 [USACO08NOV]买干草Buying Hay
链接:Miku ---------------- 这就是一个完全背包的板子题 ---------------- 我们把重量当作重量,开销当作价值,那么这个题就是个求价值最小的完全背包 然而题目上说了是 ...