js做个网页(HTML+CSS+JS)

转载https://blog.csdn.net/shiwy_ab/article/details/54967662

        前面两篇文章写了HTML和CSS,接下来这篇我把我学到的JavaScript,做一下简单的总结。如果我把一张网页比作是一幢大楼,那么HTML就是大楼的根基和基本骨架,CSS就是使大楼宏伟的一些装饰物,那么JS就是大楼里面活动的东西。简单的说就是网页上的特效效果都要靠JS来完成,比如一些焦点新闻的轮换、与用户的交互等等。

一.JS的基本知识及窗口交互

1.写js的基本格式:

 <script type="text/javascript”>...</script>

2.有关注释:

 (1)单行注释://

 (2)多行注释:/*.......*/ 

3.定义变量:var 变量名;

4.函数:

  1. function 函数名()
  2. {
  3. 函数代码;
  4. }

5.输出内容:document.write()

   (1)多项内容之间用“+”

   (2)要输出空格的时候,可以在输入时加“&nbsp”,一个“&nbsp”表示一个空格。 

6.窗口交互方法

(1)消息对话框-警告:alert(字符串或变量);

 

(2)消息对话框-确认:confirm(str);

 

(3)消息对话框-提问:prompt(str1,str2);

   需要注意的是str1是显示在文本框中的内容,不可以修改

   而str2是自己要输进去的内容,这是可以修改的 

 

(4)打开新窗口

window.open([URL], [窗口名称], [参数字符串]}

1>URL这是在网页打开的地址或路径。

2>窗口名称:被打开窗口的名称,由字母、数字和下划线组成 

    一些特殊的名称:

_blank:在新窗口显示目标网页

_self:在当前窗口显示目标网页

_top:框架网页中在上部窗口中显示目标网页

(5)关闭新窗口

Window.close();

二.认识事件和内置对象

我把一些常用的事件整理出来:

1.onclick(鼠标单击事件)

2.onmouseover(鼠标经过事件)

3.onmouseout(鼠标移开事件)

4.onfocus(光标聚焦事件)

5.onblur(失焦事件)

6.onselect(内容选中事件)

7.onchange(文本框内容改变事件)

8.onload(加载事件)

9.onunload(卸载事件)

 

接下来的内容是在js中内置对象

1.定义一个时间对象:

var Udate=new Date();

定义初始化:

  1. var d = new Date(2017, 10, 1); //2017年10月1日
  2. var d = new Date('Oct 1, 2017'); //2017年10月1日

2.返回、设置年份,用四位数表示

get/setFullYear() 

3.返回星期,返回的是0-6的数字,0表示星期天。如果要返回相对应“星期”,通过数组完成

getDay()

4.返回/设置时间,单位毫秒数

get/setTime()

5.小写字母转大写字母

  1. var mystr="Hello world!";
  2. var mynum=mystr.toUpperCase();

大写字母转小写字母

toLowerCase()

6.返回指定位置的字符

 字符串中第一个字符的小标是0,最后一个字符的下标为字符串长度减一(string.length-1)

7.返回指定的字符串首次出现的位置

  1. <script type="text/javascript">
  2. var str="I love JavaScript!"
  3. document.write(str.indexOf("I") + "<br />");
  4. document.write(str.indexOf("v") + "<br />");
  5. document.write(str.indexOf("v",8));
  6. </script>

结果:0

           4

           9

在该例子中,str.indexof(“v”,8) 这个的意思是说从该字符串的下标为8的数开始寻找v这个字符,找到它在9这个位置。

如果没有找到该字符,则会输出-1. 

8.字符串的分割split()

var mystr = "www.baidu.com";
  1. document.write(mystr.split(".")+"</br>");
  2. document.write(mystr.split("", 2)+"</br>“);

三.DOM操作

1.在网页中,我们通过id先找到标签,然后进行操作,这是通过ID获取元素。

document.getElementById(“id”)

当然,通过name属性查也未尝不可。

ducument,getElementsByname("name")

需要注意的是,id只能有一个,但是name属性可以不唯一。

2.通过innerHTML我们可以获取甚至改变网页上的内容。

Object.innerHTML

举个例子��:

  1. <html>
  2. <head>
  3. <title>TODO supply a title</title>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. </head>
  7. <body>
  8. <p id="test">hello world!</p>
  9. </body>
  10. <script type="text/javascript">
  11. var mystr = document.getElementById("test")
  12. document.write("p标签修改之前:"+mystr.innerHTML+ "</br>");
  13. mystr.innerHTML="hello DSCN!"
  14. document.write("p标签修改之前:"+mystr.innerHTML + "</br>");
  15. </script>
  16. </html>

显示效果:

3.在js中还能改变HTML的样式

(1)基本语法:

Object.style.property=new style;

(2)基本属性(property)

backgroundColor(元素的背景颜色)

height(元素的高度)

width(元素的宽度)

color(文本的颜色)

font(在一行设置所有的字体属性)

fontFamily(设置元素的字体系列)

fontSize(设置元素的字体大小)
4.显示和隐藏(display)

Object.style.display = value

值为none时,此元素会被隐藏;值为block时,此元素会被显示。

四.实例介绍

我们已经把网页加上了一些图片来修饰,接下来,我在上面两篇的代码基础之上,在加上一些其他的功能。比如检查表单有没有空格项用户没有填写,而这些需要js来完成。

代码如下:

  1. <html>
  2. <head>
  3. <style type="text/css">
  4. div {
  5. font-weight:bold;
  6. font-family: Microsoft Yahei;
  7. width: 400px;
  8. padding-left: 50px;
  9. margin-left: 450px;
  10. }
  11. h1 {
  12. text-align: center;
  13. }
  14. #sub {
  15. background-color: #689;
  16. width: 250px;
  17. height: 30px;
  18. color:white;
  19. font-weight: bold;
  20. }
  21. body {
  22. background-image: url("http://pic.qiantucdn.com/58pic/20/13/88/25r58PICqQa_1024.jpg");
  23. }
  24. </style>
  25. <script type="text/javascript">
  26. function abc()
  27. {
  28. if (document.getElementById("name").value == "")
  29. {
  30. alert("Please write your name!");
  31. form.myname.focus();
  32. return false;
  33. }
  34. if (document.getElementById("passward").value == "")
  35. {
  36. alert("Please write your password!");
  37. form.mypassward.focus();
  38. return false;
  39. }
  40. if (document.getElementById("profile").value == "")
  41. {
  42. alert("please write your profile!");
  43. form.profile.focus();
  44. return false;
  45. }
  46. }
  47. </script>
  48. </head>
  49. <body>
  50. <div id="sign">
  51. <h1>Sigh Up</h1></br>
  52. <h2>Your basic info</h2>
  53. <form>
  54. <strong>Name:</strong>
  55. <input type="text" name="myname" id="name"/></br>
  56. </br>
  57. <strong>Passward:</strong>
  58. <input type="password" name="mypassward" id="passward"/></br>
  59. </br>
  60. <strong>Age:</strong></br>
  61. <input type="radio" name="age" value="1" checked="checked"/>Under 13</br>
  62. <input type="radio" name="age" value="2" />13 or older</br>
  63. </br>
  64. <strong>Your profile:</strong></br>
  65. <textarea cols="50" rows="4" name="profile" id="profile"></textarea></br>
  66. </br>
  67. <strong>Job Role:</strong></br>
  68. <select>
  69. <option value="Front-End Developer" selected="selected" name="job">Front-End Developer</option>
  70. <option value="Back-End Developer" name="job">Back-End Developer</option>
  71. </select></br>
  72. </br>
  73. <strong>Interests:</strong></br>
  74. <input type="checkbox" name="development" value="1" checked="checked">Development</br>
  75. <input type="checkbox" name="design" value="2" >Design</br>
  76. <input type="checkbox" name="business" value="3" >Business</br>
  77. </br>
  78. <input type="submit" name="Sign Up" value="Sign Up" id="sub" οnclick="abc()">
  79. </input>
  80. </form>
  81. </div>
  82. </body>
  83. </html>

显示效果:

当我没填姓名时:

当我没输入密码时,然后以此类推:

 

另外安利一个学习教程:高级工程师手把手带你做企业门户前端(视频+源码)

 

posted @ 2020-01-03 17:51  (至尊宝)  阅读(17693)  评论(0编辑  收藏  举报