彩世界开奖app官网-彩世界平台官方网址(彩票平台)
做最好的网站
来自 彩世界平台官方网址 2019-12-06 23:54 的文章
当前位置: 彩世界开奖app官网 > 彩世界平台官方网址 > 正文

【前端】:Dom彩世界平台官方网址

效果图:

八、特殊效能

前多个可在浏览器Console分界面下运转,第4、5个以前已经用过了,懂的,上面讲下confirm.

1 window.location.href    //返回当前的url
2 window.location.reload()  //刷新
3 window.location.href = "http://www.cnblogs.com/0zcl/"  //跳转到我的博客网址
4 console.log()
5 alert()
6 confirm()  //会弹出一个框,可点击确定或取消

confirm实例代码:

彩世界平台官方网址 1彩世界平台官方网址 2

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>特殊</title>
 6 </head>
 7 <body>
 8     <input type="button" value="over me" onmouseover="Myconfirm();" />
 9     <script>
10         function Myconfirm() {
11             var ret = confirm("SB");
12             console.log(ret);   //返回true(当按确定时)或false(当按取消时);
13         }
14     </script>
15 </body>
16 </html>

View Code

 

鼠标朝气蓬勃接触按键就能够弹出上面包车型大巴框(注意Console分界面包车型客车true,false卡塔尔:

彩世界平台官方网址 3

 

此间再为我们横扫千军另一个Javascript的小才干-----JS达成点击文本框消亡表单内部暗许文字,有的时候我们在填写表单内容时,表单里会产出有的暗许提醒文字,大家又不想八个个刨除,有哪些艺术能够兑现快速消亡?上面正是自个儿为大家筹算的小代码:

七、提交表单

付给表单有三种情势:

  1. 通过submit
  2. 因而JS也得以提交

1. 经过submit提交表单,一点交由,将输入的内容链接到sogou实行搜寻(说实话,第一遍运维现身寻找的源委时,小编的天呐!!神奇啊!!!):

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>s7</title>
 6 </head>
 7 <body>
 8     <form id="form" action="https://www.sogou.com/web" method="get">
 9         <input name="query" type="text" />
10         <input type="submit" value="提交" />
11     </form>
12 
13 </body>
14 </html>

2. 经过JS提交表单:

彩世界平台官方网址 4彩世界平台官方网址 5

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>s7</title>
 6 </head>
 7 <body>
 8     <form id="form" action="https://www.sogou.com/web" method="get">
 9         <input name="query" type="text" />
10         <!--<input type="submit" value="提交" />-->
11         <div onclick="Sumbit();">提交</div>
12     </form>
13 
14     <script>
15         function Sumbit() {
16             document.getElementById("form").submit();
17         }
18     </script>
19 </body>
20 </html>

View Code

 

实例三: 接下来做个高逼格的搜索框(为实例二的进级版卡塔尔(قطر‎:

彩世界平台官方网址 6彩世界平台官方网址 7

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>form</title>
 6 </head>
 7 <body>
 8     <form action="https://www.sogou.com/web" method="get">
 9         <input type="text" name="query" />
10         <!--当输入为空时,不提交-->
11         <input id="submit" type="submit" onclick="return MySubmit();" value="提交" />
12     </form>
13     <script>
14         function MySubmit() {
15             var q = document.getElementsByName("query")[0];
16             var value = q.value;
17             if(value.trim()){    //有值时
18                 return true;
19             }else {
20                 alert("请输入内容");
21                 return false;   //不执行submit
22             }
23         }
24     </script>
25 </body>
26 </html>

View Code

当提交表单为空时,后生可畏提交会弹出下边包车型客车提醒框:

彩世界平台官方网址 8

 

.c{ width:40px; height:25px; line-height:25px; text-align:left; margin:2px; float:left; font-size:12px; cursor:pointer }市级,省级,国家级var x=["&#24066;&#32423;","&#30465;&#32423;","&#22269;&#23478;&#32423;"];var y=[];function ${ return document.getElementById};for(var i=0,m=x.length;i&lt;m;i  ){$.onclick={return function.indexOf{for{if{y.splice}}}else{y.push.value=y.join}效果图:第二种方法:当点击“脚本之家”标签的时候,此标签就出现在了文本框里,再点击SQL标签后,“SQL”标签就会替换掉“脚本之家”标签出现在文本框中。.label {cursor:pointer}JS特效C  SQL脚本之家spans=document.getElementsByTagName;for(i=0;i&lt;spans.length;i  ){if(spans[i].className=="label"){ spans[i].onclick=function(){ document.getElementById.value=this.innerHTML; }}} 

五、创立标签

  1. 在讲创制标签前,先说三个点:

    添加

地点的代码是二个a标签,你或多或少它按理会跳转到www.cnblogs.com/0zcl,可是a标签又有二个onclick事件,一点击就会进行;真是狼狈的境界,是先跳转?依然先实践onclick事件??你能够团结测验下~~

上面给出结论:

  • 先实施自定义事件onclik,再进行暗许事件href
  • 要想进行完onclick事件(自定义卡塔尔(قطر‎后不实行href(暗中认可卡塔尔(قطر‎,只需在onclick内回到false(必需深深记住,后边会用到!)

2. 创办标签有三种办法

  • 由此友好写字符串的秘诀来创造标签(eg:创制input标签: var tag = "<inputtype='text'/>";卡塔尔(英语:State of Qatar)
  • 经过对象来创建(推荐卡塔尔(قطر‎(eg:创立a标签: var createObj = document.createElement("a"卡塔尔(英语:State of Qatar);卡塔尔(قطر‎

代码实例:

彩世界平台官方网址 9彩世界平台官方网址 10

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>s6</title>
 6 </head>
 7 <body>
 8     <div id="container"></div>
 9     <!--先执行自定义事件onclik,再执行默认事件href-->
10     <!--要想执行完onclick事件后不执行href,只需在onclick内返回False-->
11     <a href="http://www.cnblogs.com/0zcl/" target="_blank" onclick="return AddElement();">添加</a>
12 
13     <script>
14 
15         function AddElement() {
16             /*
17             var nid = document.getElementById("container");
18             var tag = "<input type='text'/>";
19 //            nid.innerHTML = tag;   //能创建input标签,但只能创建一个。
20             //每点击一次,将新添加标签到后面
21             container.insertAdjacentHTML("beforeBegin", tag);
22             */
23 
24             //创建a标签并拿到其对象
25             var createObj = document.createElement("a");
26             createObj.href = "http://www.cnblogs.com/0zcl/";
27             createObj.innerText = "前程明亮博客";
28             console.log(createObj);
29             //对于一个标签对象,能否通过innerText往里添加
30             //发现不行,添加的只是href
31             var nid = document.getElementById("container");
32 //            nid.innerText = createObj;
33             nid.appendChild(createObj);
34 
35             return false;
36         }
37     </script>
38 
39 </body>
40 </html>

View Code

对于第蓬蓬勃勃种:点击3次,创设3个input标签.

彩世界平台官方网址 11

再点击一回,则再次创下制一个标签,加在原来就有标签的背后。

彩世界平台官方网址 12

对此第三种:不能由此innerText往里增进(nid.innerText = createObj;卡塔尔国,增加的只是href, 如下图:

彩世界平台官方网址 13

能够用:nid.appendChild(createObj卡塔尔(英语:State of Qatar);一点击增加,就增加七个a标签。

彩世界平台官方网址 14

 

js完成点击标签文字,文字出以往文本框里,上面2种艺术完结的效能略有不一致,总体来讲方法豆蔻梢头效率更刚劲。

六、操作标签属性

  1. 对于默许属性可直接用 .(点卡塔尔(英语:State of Qatar)来操作;
  2. 对此自定义的习性可通过setAttribute(卡塔尔(英语:State of Qatar), getAttribute(卡塔尔(قطر‎ [也能够设置暗许的性质,约等于万能]
  3. 对此class属性,可以因而obj.className = "xx" 来安装;也足以通过setAttribute("class", "xx"卡塔尔国;
  4. 对于style里面包车型大巴font-size属性,通过obj.style.fontSize = "xx“ (注意S是大写的,同理obj.style.backgroundColor="xx";横杆去除,横杆后先是个假名大写卡塔尔国来安装;

操作实例见下图:

彩世界平台官方网址 15

 

效果图:

九、电火花计时器与跑马灯实例:

什么是跑马灯?依照自己在网络找到的某部定义:跑马灯在编程中,平时指一时必要用风华正茂矩形条突显少些客户特别关爱的信息,那条音信串首尾相连,向二个趋向循环滚动。股票(stock卡塔尔国业中常用“跑马灯”来体现不断变化的债市价格;实际利用中也常通过“跑马灯”来监视是或不是死机。(感觉很宏大上!)

难点风度翩翩: 怎么着使字体向三个方向循环滚动?

我得以设置一个主旋律Func,每实践壹遍Func,便使首个字符移动到最终叁个; 接下来只要每间距一小段日子来调用Func(卡塔尔(قطر‎便OK了!

难点二: 怎样每隔一小段时光便调用Func(卡塔尔国?那就需求电火花计时器的知识了。

obj = setInterval("Func()", 500);  //设置定时器(每0.5s执行一次Func方法)并获取句柄(全局变量); 创建一个定时器时默认会返回一个句柄;

标题三: 如何解除计时器,使字体不继续滚动??

能够写个按键,生机勃勃按button就调用有些方法扫除反应计时器:

1         function StopInterval() {
2             //清除定时器
3             clearInterval(obj);
4         }

标题四: 你未来指谪到反常了,只想字符串移动三遍后甘休,怎么着让放大计时器奉行贰次后去掉。如何落到实处呢??(应用处景:删除QQ邮箱邮件时,上方会产出删除成功字样,一小段日子后会消失。卡塔尔国

obj = setTimeout("Func()", 5000);   //5s后执行一次后停止,想要停止的话可用clearTimeout(obj);

 

跑马灯代码:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>【欢迎访问前程明亮博客】</title>
 6 </head>
 7 <body>
 8     <input type="button" onclick="return StopInterval();">
 9     <script>
10         /*
11         setInterval("操作", "间隔(默认为毫秒)");
12         其实是每隔一段时间创建一个线程
13         */
14 //        创建一个定时器时默认会返回一个句柄;设置定时器并获取句柄(全局变量)
15         obj = setInterval("Func()", 500);
16 //        obj = setTimeout("Func()", 5000);   //5s后执行一次后停止,想要停止的话可用clearTimeout();
17 
18         function StopInterval() {
19             //清除定时器
20             clearInterval(obj);
21         }
22 
23         function Func() {
24             var text = document.title;  //获取title的内容
25             var firstChar = text.charAt(0);  //获取第一个字符的内容
26             var subText = text.substring(1, text.length);
27             var newTitle = subText   firstChar;
28             document.title = newTitle;
29         }
30     </script>
31 </body>
32 </html>

截了两张图:

彩世界平台官方网址 16   彩世界平台官方网址 17

 

写了相当久~~

转折表明出处:http://www.cnblogs.com/0zcl/p/6417506.html 

 

率先种艺术:随便点击任何标签都会产出在文本框中,怎样第一回点击标签,对应的文字就能在文本框中消失。

一、DOM介绍

文书档案对象模型(Document Object Model,DOM)是黄金年代种用于HTML和XML文书档案的编制程序接口。它给文书档案提供了风流倜傥种结构化的表示方法,能够改正文书档案的剧情和表现情势。大家最佳关心的是,DOM把网页和本子以至任何的编制程序语言调换了起来。DOM编程:能够操作html全部的价签,实行找、操作(document 是漫天HTML文书档案的靶子,通过document能够对HTML举行操作卡塔尔国! 它也是javascript的朝气蓬勃部分。
注:常常说的JS让页面动起来泛指JavaScript和Dom

彩世界平台官方网址 18

 

如上便是本文的全体内容,希望对大家的上学抱有助于。

 

前言: 今日写了篇有关JavaScript的,后天写篇Dom的(插入4个实例卡塔尔国,写完事后以为悉识点还非常多~ 内容自然会用到【前端】:JavaScript的学问。下篇博客会写关于jQuery~~

三、操作文本内容

  • 拿到标签中间文本内容: innerText  
  • 赢得标签中间内容: innerHTML   

上边用个例子来注解双方分别:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <div id = "n1">
 9         zcl
10         <h2>alex</h2>
11     </div>
12 
13     <script type="text/javascript">
14         var text = document.getElementById("n1");
15         console.log(text.innerText);  //只取文本内容,取alex而不是<h2>alex</h2>
16         console.log(text.innerHTML);
17     </script>
18 
19 </body>
20 </html>

运作分界面:

彩世界平台官方网址 19

 

对独特的竹签,如: input  select  textarea. 获取与校订标签的文本内容通过value.

上边以textarea为例(input,select测验只需在下边代码改下id便可~卡塔尔(قطر‎,获取文本框原有值zcl, 点击明确后将zcl改过为alex:

彩世界平台官方网址 20彩世界平台官方网址 21

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>s5</title>
 6 </head>
 7 <body>
 8     <h3><input type="button" onclick="GetValue()" value="获取值"></h3>
 9     <input id = "n2" type="text"/>
10     <select id="n3">
11         <option value="1">上海</option>
12         <option value="2">北京</option>
13         <option value="3">广州</option>
14     </select>
15     <textarea id="n4">alex</textarea>
16 
17 
18     <script type="text/javascript">
19         function GetValue() {
20             var obj = document.getElementById("n4");
21             alert(obj.value); //获取值
22             //obj.value = "";  //可对获取的值进行修改 如:清空
23             //obj.value = "2";    //将获取的值修改为2,即北京
24             obj.value = "zcl";
25         }
26 
27 </script>
28 
29 </body>
30 </html>

View Code

运作界面(3张图卡塔尔:

彩世界平台官方网址 22彩世界平台官方网址 23彩世界平台官方网址 24

 

四、事件

眼下谈起了onclick事件,事件确定不仅仅onclick一个啊~~

彩世界平台官方网址 25

 

实例二: 上边以onfocus和onblur事件为例,做三个庞大上的寻找框:

追寻框实例可看做以下文化的归咎:

  1. 事件
  2. 选择器
  3. 标签内容获得/改善

效率讲明:

搜索框暗中同意文字是“请输加入关贸总协定组织键字”,当鼠标一点(即框得到主题卡塔尔(قطر‎,原来的"请输加入关贸总协定协会键字"消失;
若原来框内文字为空(或内容为空格卡塔尔国,当框失去大旨时,恢复生机原先的故事情节"请输加入关贸总协定组织键字"。感到好高大上!!!

彩世界平台官方网址 26彩世界平台官方网址 27

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>s5</title>
 6 </head>
 7 <body>
 8     <input type="text" id="search" value="请输入关键字" onfocus="Focus()" onblur="Blur()"/>
 9 
10     <script type="text/javascript">
11         function Focus() {
12             var nid = document.getElementById("search");
13             var value = nid.value;
14             if(value == "请输入关键字"){
15                 nid.value = "";
16             }
17         }
18         function Blur() {
19             var nid = document.getElementById("search");
20             var value = nid.value;
21             if(value.trim() == ""){
22                 nid.value = "请输入关键字";
23             }
24         }
25 
26     </script>
27 </body>
28 </html>

View Code

 

二、查找标签(接收器卡塔尔

1. 经过以下两种艺术可到HTML文书档案中找找某标签

1 var nid = document.getElementById("aa");          //找到id为aa的标签,因为id是唯一的,所以是element (ID选择器)
2 var lis = document.getElementsByTagName("li");    //找到li标签 (标签选择器)
3 var lis2 = document.getElementsByClassName("bb"); //找到class为bb的标签,可能有多个标签应用bb样式,故用elements (class选择器)

 

2. 找到某标签后若想对其值进行校正,可用innerText(eg: div标签卡塔尔  若value(eg: input标签卡塔尔(英语:State of Qatar)

学会怎么搜索标签后,上边来看超轻巧的例证: 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <div>
 9         <div id="aa">zcl</div>
10     </div>
11     <ul>
12         <li>11</li>
13         <li>22</li>
14         <li>33</li>
15     </ul>
16     <div>
17         <div class="bb">zcl</div>
18         <div class="bb">zcl</div>
19         <div class="bb">zcl</div>
20     </div>
21 
22     <form>
23         <p>用户名:<input name="username" value="zcl"/></p>
24         <p>密码:<input name="pwd" value="123"/></p>
25     </form>
26 
27 <script type="text/javascript">  //<script> 其实默认为<script type="text/javascript">  表示要写JS代码
28     var nid = document.getElementById("aa");
29     nid.innerText = "alex";
30 
31     var lis = document.getElementsByTagName("li");
32     for(var i in lis){
33         var item = lis[i];
34         item.innerText = i;
35     }
36 
37     var lis2 = document.getElementsByClassName("bb");
38     console.log(lis2);    //打印: [div.bb, div.bb, div.bb]
39 
40     var username = document.getElementsByName("username")[0];
41     var pwd = document.getElementsByName("pwd")[0];
42     console.log(username, pwd); //打印: <input name="username" value="zcl"> <input name="pwd" value="123">
43     console.log(username.value, pwd.value);  //打印: zcl 123
44 </script>
45 
46 </body>
47 </html>

运行分界面:

彩世界平台官方网址 28

您恐怕会问:var username = document.getElementsByName("username"卡塔尔(英语:State of Qatar)[0];为啥要在前边加[0]??即便早就找到input标签,可是input标签的name属性恐怕同样(eg:radio标签卡塔尔(英语:State of Qatar),所以只取第三个。(当然在本例中,name属性是见仁见智的,你不加[0]也没事~)

 

实例一: 自增数

接下去做三个妙趣横生的东西,在分界面做三个按纽(不会做出按纽,提议看本身写的【前端】:HTML卡塔尔(英语:State of Qatar),按纽前边是数字1,你意气风发按button,数字变为2,再按变为3.……

实质上思路异常粗略,先写个div标签,内容初叶为1,再写个buttton,button有个onclick属性(里面是Add(卡塔尔函数卡塔尔国,一点击button则调用onclick事件,去调用Add(卡塔尔函数要做吗?当然是将1变为2呀,前提是必需先找到div标签,再改革div标签的内容(通过innerText卡塔尔国.上边请看代码:

彩世界平台官方网址 29彩世界平台官方网址 30

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>s3</title>
 6 </head>
 7 <body>
 8 
 9     <div>
10         <div id="num">1</div>
11         <!--一点击button,就会执行onclick属性里面的值(eg:某个函数)-->
12         <input type="button" value=" 1" onclick="Add()"/>
13     </div>
14 
15     <script>
16         function Add() {
17 //            alert("hello");
18             var nid = document.getElementById("num");
19             var text = nid.innerText;
20             text = parseInt(text);
21             text  = 1;
22             nid.innerText = text;
23         }
24     </script>
25 </body>
26 </html>

View Code

 

本文由彩世界开奖app官网发布于彩世界平台官方网址,转载请注明出处:【前端】:Dom彩世界平台官方网址

关键词: 文字 如何实现 之家 文本框