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) 到了函数体的顶 ...

随机推荐

Linux 本地文件或文件夹上传服务器
Linux 本地文件或文件夹上传服务器一.权限设置本地文件或文件夹上传服务器,你首先需要获取到root权限: 二.上传方式上传方式有两种 : 1.通过 FTP 客户端上传文件或文件夹: 2.通过 ...
手机打开PC端网址自动跳转到手机站代码
<script>function uaredirect(murl){ try { if(document.getElementById("bdmark") != nul ...
Linux 系统常用命令汇总（四）程序和资源管理
程序和资源管理分类命令选项注解背景管理 & command+& 将任务放到后台进行 ctrl+z 暂停任务 fg [%number] 讲后台程序推到前台来,number表示进 ...
ZOJ 2301 / HDU 1199 Color the Ball 离散化+线段树区间连续最大和
题意:给你n个球排成一行,初始都为黑色,现在给一些操作(L,R,color),给[L,R]区间内的求染上颜色color,'w'为白,'b'为黑.问最后最长的白色区间的起点和终点的位置. 解法:先离散化 ...
java9-9 匿名内部类
1. 匿名内部类就是内部类的简化写法. 前提:存在一个类或者接口这里的类可以是具体类也可以是抽象类. 格式: new 类名或者接口名(){ 重写方法; } new Xxx()是创建了一个对象,而抽 ...
[原创] NetBean开发c++程序指南1- 加入c++项目文件夹
利用 NetBean开发c/c++程序,导入原有程序代码. 1. 在菜单栏的 "工具" -> 选项 -> c/c++开发如果彩色就是激活的状态,否则选择激活. 2. ...
c# 扩展方法奇思妙用
# 扩展方法出来已久,介绍扩展方法的文章也很多,但都是笼统的.本人最近一直在思考扩展方法的应用,也悟出了一些,准备将这最近一段时间对扩展方法的思考,写成一个系列文章.每个文章只介绍一个应用方面,篇幅不 ...
未能加载文件或程序集“XXXXX”或它的某一个依赖项。试图加载格式不正确的程序。
未能加载文件或程序集“FastColoredTextBox, Version=2.10.5.0, Culture=neutral, PublicKeyToken=null”或它的某一个依赖项.试图加载 ...
GPS坐标换算为百度坐标
最近在做一个关于手机定位的小应用,需求是这样的,用户通过手机(Wp8)进行二维码扫描操作并且记录用户的当前位置,在PC上可以查看用户所在地图的位置,做法就是在用户扫描条码时,通过手机GPS获取当前在地 ...
1从零开始学习Xamarin.iOS安装篇
安装和配置xamarin.ios 最近.net 开源新闻很火呀,于是想学习xamarin,早1年前就了解过这个东西,但是一直没有时间来学习,我这里装的是MAC上面的版本,废话不多说开始第一步安装. 概 ...

Javascript 使用小案例

Javascript 使用小案例的更多相关文章

随机推荐

热门专题