Javascript 使用小案例
十四、cookie相关 1 <!DOCTYPE html>
<html>
<head>
<script> function setCookie(cname,cvalue,exdays)
{
var d = new Date();
d.setTime(d.getTime()+(exdays*24*60*60*1000));
var expires = "expires="+d.toGMTString();
document.cookie = cname+"="+cvalue+"; "+expires;
} function getCookie(cname)
{
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++)
{
var c = ca[i].trim();
if (c.indexOf(name)==0) return c.substring(name.length,c.length);
}
return "";
} function checkCookie()
{
var user=getCookie("username");
if (user!="")
{
alert("Welcome again " + user);
}
else
{
user = prompt("Please enter your name:","");
if (user!="" && user!=null)
{
setCookie("username",user,30);
}
}
} </script>
</head>
<body onload="checkCookie()">
</body>
</html>
一、创建新的HTML元素 1 <div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div> <script>
<!--创建新的<p>元素-->
var para=document.createElement("p");
<!--如果需要向p元素添加文本,必须先创建文本节点-->
var node=document.createTextNode("这是一个新段落。");
<!--向<p>元素之后追加这个文本节点-->
para.appendChild(node);
<!--查找添加这个元素的已有元素-->
var element=document.getElementById("div1");
<!--在已存在的元素后添加新元素-->
element.appendChild(para);
</script>
五、在字符串中查找字符串 1 <!DOCTYPE html>
<html>
<body> <p id="p1">Click the button to locate where "locate" first occurs.</p>
<p id="p2">0</p>
<button onclick="myFunction()">Try it</button> <script>
function myFunction()
{
var str=document.getElementById("p1").innerHTML;
var n=str.indexOf("locate");
document.getElementById("p2").innerHTML=n+1;
}
</script> </body>
</html>
二、删除已有的HTML元素
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
<!--查找要删除元素的父元素-->
var parent=document.getElementById("div1");
<!--查找要删除的元素-->
var child=document.getElementById("p1");
<!--调用removeChild方法移除子元素-->
parent.removeChild(child);
</script> 或者使用
var child=document.getElementById("p1");
child.parentNode.removeChild(child);
先找到要删除的元素然后调用其parentNode属性来找到父元素
三、使用对象构造器创建对象 1 <!DOCTYPE html>
<html>
<body> <script>
function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
} myFather=new person("John","Doe",50,"blue"); document.write(myFather.firstname + " is " + myFather.age + " years old.");
</script> </body>
</html>
四、JavaScript中的for...in循环 1 <!DOCTYPE html>
<html>
<body>
<p>点击下面的按钮,循环遍历对象 "person" 的属性。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p> <script>
function myFunction()
{
var x;
var txt="";
var person={fname:"Bill",lname:"Gates",age:56}; for (x in person)
{
txt=txt + person[x];
} document.getElementById("demo").innerHTML=txt;
}
</script>
</body>
</html>
六、字符串匹配 1 <!DOCTYPE html>
<html>
<body> <script> var str="Hello world!";
document.write(str.match("world") + "<br>");
document.write(str.match("World") + "<br>");
document.write(str.match("world!")); </script> </body>
</html>
七、字符串替换 1 <!DOCTYPE html>
<html>
<body> <p>替换 "Microsoft" 为 "W3cSchool" :</p> <button onclick="myFunction()">点我</button> <p id="demo">Please visit Microsoft!</p> <script>
function myFunction() {
var str = document.getElementById("demo").innerHTML;
var txt = str.replace("Microsoft","W3cSchool");
document.getElementById("demo").innerHTML = txt;
}
</script> </body>
</html>
八、正则表达式 1 <!DOCTYPE html>
<html>
<body> <script>
var str = "Visit W3CSchool";
var patt1 = /w3cschool/i;
document.write(str.match(patt1));
</script> </body>
</html>
九、正则表达式2 1 <!DOCTYPE html>
<html>
<body> <script>
var patt1=new RegExp("e"); document.write(patt1.test("The best things in life are free"));
</script> </body>
</html> ====》true
十、正则表达式3 1 <!DOCTYPE html>
<html>
<body> <script>
var patt1=new RegExp("e"); document.write(patt1.exec("The best things in life are free"));
</script> </body>
</html> =====> e
十一、confirm确认框 1 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body> <p>点击按钮,显示确认框。</p> <button onclick="myFunction()">点我</button> <p id="demo"></p> <script>
function myFunction()
{
var x;
var r=confirm("按下按钮!");
if (r==true)
{
x="你按下了\"确定\"按钮!";
}
else
{
x="你按下了\"取消\"按钮!";
}
document.getElementById("demo").innerHTML=x;
}
</script> </body>
</html>
十二、prompt提示框 1 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body> <p>点击按钮查看输入的对话框。</p> <button onclick="myFunction()">点我</button> <p id="demo"></p> <script>
function myFunction()
{
var x; var person=prompt("请输入你的名字","Harry Potter");
if (person!=null && person!="")
{
x="你好 " + person + "! 今天感觉如何?";
document.getElementById("demo").innerHTML=x;
}
}
</script> </body>
</html>
十三、计时器定时计划 1 <!DOCTYPE html>
<html>
<body> <p>A script on this page starts this clock:</p>
<p id="demo"></p> <script>
var myVar=setInterval(function(){myTimer()},1000); function myTimer()
{
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("demo").innerHTML=t;
}
</script> </body>
</html>
十五、JavaScript和jQuery使用方式对比 1 <!--javascript方式-->
function myFunction()
{
var obj=document.getElementById("h01");
obj.innerHTML="Hello jQuery";
}
onload=myFunction;
<!--jQuery方式-->
function myFunction()
{
$("#h01").html("Hello jQuery");
}
$(document).ready(myFunction);
Javascript 使用小案例的更多相关文章
- 【JavaScript定时器小案例】常见的几种定时器实现的案例
[JavaScript定时器小案例]常见的几种定时器实现的案例 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 说明 在日常开发 ...
- javascript综合小案例,校验用户注册信息提交
完成这个综合小案例,对于html.css.javascript的大部分内容复习快结束了. 这里做一个小案例--要实现的功能,以一张图片的形式给出: 首先,写出提交数据之后进入的页面代码: <!D ...
- javascript常用小案例
常用javascript小案例 样式调节 //注: 这个可以控制td中的字段成行显示 #modelInfos td,th { white-space: nowrap; } //文本输入框随着内容尺寸往 ...
- JavaScript基础--小案例:在网页指定位置弹出错误信息(十二)
案例分析:点击按钮后,在网页上指定区域,提示错误信息!5秒后,错误信息提示自动消失! <script languag="javascript" type="text ...
- JavaScript入门小案例
笔记: <!-- JavaScript的特点: 1.基于对象和事件驱动 JavaScript把HTML页面中的每一个元素都当做一个对象来处理,并且这些对象都具有层次关系, 像一颗倒立的树,这种关 ...
- JavaScript apply函数小案例
//回调函数1 function callback(a,b,c) { alert(a+b+c); } //回调函数2 function callback2(a,b) { alert(a+b); } / ...
- javascript之JSON小案例,实现添加数据与清楚数据
对json应用给出一个小案例,加深一些理解: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" & ...
- JavaScript小案例-阶乘!
JavaScript小案例-阶乘! 阶乘:就是像台阶一样一阶一阶的,从高阶到低阶,依次乘下来!代码超少!容易理解! // factorial 阶乘 // 如果 function factorial(n ...
- JavaScript变量提升(Hoisting)的小案例
变量提升(Hoisting)的小案例 执行以下代码的结果是什么?为什么? 答案 这段代码的执行结果是undefined 和 2. 这个结果的原因是,变量和函数都被提升(hoisted) 到了函数体的顶 ...
随机推荐
- 【Android 我的博客APP】1.抓取博客首页文章列表内容——网页数据抓取
打算做个自己在博客园的博客APP,首先要能访问首页获取数据获取首页的文章列表,第一步抓取博客首页文章列表内容的功能已实现,在小米2S上的效果图如下: 思路是:通过编写的工具类访问网页,获取页面源代码, ...
- 匈牙利算法 codevs 2776 寻找代表元
codevs 2776 寻找代表元 时间限制: 1 s 空间限制: 256000 KB 题目等级 : 黄金 Gold 题目描述 Description 广州二中苏元实验学校一共有n个社团,分别用 ...
- 怎样获取优酷站内视频的MP4格式地址,嵌入到手机页面播放
最近的有关项目需要使用video标签播放视频,并且视频的路径src是优酷里面的视频,所以需要得到优酷里面的mp4路径才能播放. 但是在网上查了下资料,看到优酷的播放格式是一个m3u8文件,如图所示: ...
- HDU 1828 / POJ 1177 Picture --线段树求矩形周长并
题意:给n个矩形,求矩形周长并 解法:跟求矩形面积并差不多,不过线段树节点记录的为: len: 此区间线段长度 cover: 此区间是否被整个覆盖 lmark,rmark: 此区间左右端点是否被覆盖 ...
- 解决linux部署项目后,第一次访问初始化数据源的时候很慢的问题
先说一下场景 测试环境是linux - centos6.5,项目是分布式的,分别搭建到linux上 数据货使用的是阿里巴巴数据源 每次重启后的第一次访问会比较慢,查看日志发现 卡在这个地方 ...{d ...
- [转] Linux下防火墙iptables用法规则详及其防火墙配置
from: http://www.cnblogs.com/yi-meng/p/3213925.html 备注: 排版还不错,建议看以上的链接. iptables规则 规则--顾名思义就是规矩和原则,和 ...
- mysql视图的创建
视图内容的变化跟它所依赖的表的变化是同步的也是一致的. create or replace view viewname as select a.id.,a.name,a.sex,b.aid,b.sco ...
- php报错日志:PHP Deprecated:Automatically populating $HTTP_RAW_POST_DATA is deprecated
前几天将线上php服务升级到5.6.x版本后,php-error.log报出错误:PHP Deprecated: Automatically populating $HTTP_RAW_POST_DAT ...
- 一个简单的python爬虫,以豆瓣妹子“http://www.dbmeizi.com/category/2?p= ”为例
本想抓取网易摄影上的图,但发现查看html源代码时找不到图片的url,但firebug却能定位得到.(不知道为什么???) 目标是抓取前50页的爆乳图,代码如下: import urllib2,url ...
- Android动画原理分析
最近在Android上做了一些动画效果,网上查了一些资料,有各种各样的使用方式,于是乘热打铁,想具体分析一下动画是如何实现的,Animation, Animator都有哪些区别等等. 首先说Anima ...