html5定时自动关闭页面浮沉,纯Javascript设计页面

纯Javascript设计页面

源码下载

《尝试制作一个简单的页面》的案例是使用HTML元素完成一个页面效果，本节课使用Javascript操作浏览器支持的方法和属性创建元素添加样式。

具体点说就是创建h1、p、img元素，然后分别添加样式。

代码比较简单，大家自行阅读即可，只说一下第24行到第27行代码，编程的时候，如果字符串太长写成一行不方便显示和阅读，直接换行的时候，上下行字符串之间有空格，会产生多余的空格字符，可以利用Javascript的字符串连接符“+”，

消除空格的影响，一般使用WebStorm软件比较方便，鼠标在一行字符串的任意位置直接单击，然后单击键盘回车键，软件会自动添加引号和加号，无需手动处理。

cssText()

上面的代码使用点符号一个一个添加style样式属性比较麻烦，可以借助style对象的方法cssText()批量添加，类似CSS中书写格式。

// body里面插入div元素10 let div = document.createElement("div");11 div.style.cssText ="width: 260px;margin: 100px auto;background:#00B7FF;padding: 20px;";12 document.body.appendChild(div);// div元素插入h1元素14 let h1 = document.createElement("h1");15 h1.style.cssText ="width: 140px;margin: 0px auto";16 h1.innerHTML ="过零丁洋";17 div.appendChild(h1);

div和h1两个元素的样式都实现了批量添加，注意这里针对的是style对象的属性。

SEO

使用上面代码创建界面的缺点是不利于SEO，目前百度、360、搜狗的搜索引擎针对的都是HTML标签，而不是Javascript代码。

angular.js

只要你了解document对象选择元素的方法，就知道JQuery大致的特点，一般就是先用HTML完成网页内容，再利用JQuery库选择、操作元素。而使用angular.js的时候往往是通过Javascript代码创建元素再插入到body元素里面，常常用于Web应用。