onreadystatechange 事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。
每当 readyState 改变时，就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。

  翻  牌  子

responseText 属性

  翻  牌  子

什么是 AJAX

AJAX 的全称是 Asynchronous JavaScript And XML.
AJAX 不是新的编程语言，它是一个使用已有标准的新的编程技术，是一种创建交互式网页应用的网页开发技术。
AJAX 是以异步方式与服务器交换数据，在不重新加载整个页面的情况下更新部分网页的元素。
使用 AJAX 可以创建更好，更快，更用户界面友好的Web应用。

  翻  牌  子

  翻  牌  子

html 代码

<script src="路径/instantclick.js" data-no-instant></script>
<script data-no-instant>InstantClick.init();</script>

  翻  牌  子

[].forEach.call($$("*"), function(a) {
    a.style.outline = "1px solid #" + (~~ (Math.random() * (1 << 24))).toString(16)
})

  翻  牌  子

在每篇文章的末尾加了个小狗的图片，然后为鼠标设置事件。
当鼠标触屏到小狗时，播放一段音效。
整体代码

<img onmousemove="zhwa()" src="http://omuy6viz3.bkt.clouddn.com/2017/04/2465836691.gif">
</img>
<script>
function zhwa() {
    document.getElementById("zhw").play();
}
</script>
<audio id="zhw">
    <source src="http://omuy6viz3.bkt.clouddn.com/2017/04/1925917193.mp3">
</audio>

  翻  牌  子

js 代码

var typingbefore = document.getElementById("typetitle").innerText;//获取标题内容
document.getElementById('typetitle').innerText = "";//将标题内容赋值为空
var i = 0;
function typetitle(){
    var typingafter = document.getElementById('typetitle');//获取标题元素
    if(i <= typingbefore.length){
        typingafter.innerHTML = typingbefore.slice(0,i++)+'|';//将标题内容通过slice()方法返回
        setTimeout('typetitle()',100);//每100毫秒执行一次
    }else{
        typingafter.innerHTML = typingbefore;//当标题内容全部返回后，去掉最后的‘|’
    }
}
typetitle();

  翻  牌  子

box-shadow 为元素块添加阴影。

  翻  牌  子