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 ...
随机推荐
- 将win10激活为专业工作站版并且永久激活(图文详细教程)
简介 win10升级为专业版.教育版.专业工作站版永久激活详细图文教程(注:只要使用相对应的产品密钥,所有的版本都可以激活) win10家庭版其实就是阉割版,越来越多的人想升级为专业版.很多电脑用户选 ...
- qt creator源码全方面分析(2-3)
目录 External Tool Specification Files 文件名 位置 文件格式 主要标签 描述标签 可执行规范标签 示例 External Tool Specification Fi ...
- VFP控制Excel操作集
◆访问EXCEL:ExcelSheet = GetObject('','Excel.Sheet')返回结果为类,则成功.例:ExcelSheet = GetObject('','Excel.Sheet ...
- 基于MR实现ngram语言模型
在大数据的今天,世界上任何一台单机都无法处理大数据,无论cpu的计算能力或者内存的容量.必须采用分布式来实现多台单机的资源整合,来进行任务的处理,包括离线的批处理和在线的实时处理. 鉴于上次开会讲了语 ...
- Pythone是什么鬼?
认识 Python 人生苦短,我用 Python -- Life is short, you need Python 目标 Python 的起源 为什么要用 Python? Python 的特点 Py ...
- .net代码实现上千次ping的实现
先上代码: 多线程实现ping校验: public void PingCameraNew(List<CameraMongoDto> assetlist) { ThreadPool.SetM ...
- Centos 7 使用(Service iptables stop/start)关闭/打开防火墙 Failed to stop iptables.service: Unit iptables.service not loaded.
背景: 测试部署NetCore 项目到linux 系统时,窗口显示项目部署成功:但是本机无法访问(linux 在虚拟机上[ centos 7.6] ); 如下图↓ 能够相互ping 通,(Xshe ...
- 微信小程序组件构建UI界面小练手 —— 表单登录注册微信小程序
通过微信小程序中丰富的表单组件来完成登录界面.手机快速注册界面.企业用户注册界面的微信小程序设计. 将会用到view视图容器组件.button按钮组件.image图片组件.input输入框组件.che ...
- 吴裕雄--天生自然轻量级JAVA EE企业应用开发Struts2Sping4Hibernate整合开发学习笔记:Spring_autowire
<?xml version="1.0" encoding="GBK"?> <beans xmlns:xsi="http://www. ...
- oracle中sql语句的to_date语法
完整日期:TO_DATE('2009-4-28 00:00:00', 'yyyy-mm-dd hh24:mi:ss'); to_date('2008/09/20','yyyy/mm/dd') 创建视图 ...