Javascript(2)-js进阶

1.JavaScript核心操作——DOM对象

  • window对象
通过window对象，可以操作和浏览器软件相关的信息
        // window.alert();//调用浏览器的对话框操作

        // history对象：项目中几乎不用
        //window.history.back();//后退操作,返回上一个访问历史
        //window.history.forward();//前进操作，访问下一个访问历史
        //window.history.go(2);//跳转到某一个访问历史

        // location对象：项目中的url操作
        /*console.log(location);
        console.log(location.href);// 获取当前网页的url地址
        console.log(location.protocol);//获取当前访问协议
        console.log(location.host);// 获取访问网页的主机地址
        console.log(location.hostname);
        console.log(location.post);// 访问端口*/


        // JS代码控制页面的指向
        /*setTimeout(function() {
            location.href="http://www.baidu.com"
        }, 2000)*/

        /*setTimeout(function() {
            location.reload()// 刷新网页
        }, 5000)*/


        // screen对象
        // screen表示电脑屏幕的意思
        // screen.width/height表示的是电脑屏幕的宽度和高度分辨率
        // screen.availWidth/screen.availHeight:屏幕的宽度和高度【不包含任务栏】
        // console.log(screen.width, screen.height);
        // console.log(screen.availWidth, screen.availHeight);

        // navigator对象：浏览器软件的信息
  • screen对象
  • history对象
  • location对象
  • navigator对象
  • document对象
  • window事件操作
  • onload页面数据加载事件
  • onscroll页面滚动条事件
  • 兼容问题：获取滚动条卷去网页高度

2.DOM基础API操作

  • 获取标签DOM对象

直接通过id属性值使用DOM对象
通过id属性值获取：document.getElementById()
通过标签名称获取：document.getElementsByTagName()
通过class属性值获取：document.getElementsByClassName()
通过name属性值获取：document.getElementsByName()
混合获取，通常是id模式和tagName模式混合获取

代码操作

        // 直接通过标签的id属性，得到标签对象【 不推荐】
        console.log(box);
        box.innerText = "可以通过标签的id属性直接使用标签"

        // 通过getElemnetById("id")函数，来通过id属性值获取标签，【推荐】
        var _box = document.getElementById("box2");
        _box.innerText = "通过ElementById()函数获取标签对象，进行操作"

        // 通过标签名称，可以获取到一组标签
        var _boxes = document.getElementsByTagName("div");
        console.log(_boxes);
        _boxes[2].innerText = "这是通过getElementsByTagName()获取的元素"

        // 通过标签的name属性，也可以获取到一组标签
        var _jerry = document.getElementsByName("jerry");
        console.log(_jerry);
        _jerry.innerText = "通过name属性获取标签"


        // 通过标签的class属性获取标签：IE8.0+
        var _container = document.getElementsByClassName("container");
        console.log(_container);
        _container[0].innerText = "这个是通过class属性获取到的标签对象"

操作标签的DOM对象属性

  • 标准函数操作

获取属性值：var x = getAttribute(name)
设置属性值：setAttribute(name, value)
移除属性：removeAttribute(name);

  • 方括号操作

获取属性值：var x = dom[“name”];
设置属性值：dom[“name”]=value;

  • 连接符.操作

获取属性值：var x = dom.name;
设置属性值：dom.name = value;
备注：dom表示dom对象，name表示属性名称，value表示属性值
操作标签的DOM对象样式

  • 获取DOM对象样式

var x = document.currentStyle[name];兼容IE低版本的获取样式的方式
var x = getComputedStyle(dom)[name];获取样式存在兼容性问题【兼容IE9+ 和其他浏览器】
Window.getComputedStyle() 方法给出应用活动样式表后的元素的所有CSS属性的值，并解析这些值可能包含的任何基本计算。


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>JS代码操作标签的样式</title>
    
    <style>
        #box{height: 200px;background:red;}
    </style>
</head>
<body>
    <div id="box" style="width:100px;"></div>
    <script>
    /*操作标签的样式*/
    /*增删改查*/
    /*获取样式、设置样式*/
    var _box = document.getElementById("box");

    /**************************************************/
    // 获取样式：有两种方式
    // 1. 获取样式的值  100px
    // 2. 获取样式的数值  100

    // 获取标签对象的样式【标签内嵌、页面内嵌、外部样式 都可以获取到】
    // 获取样式存在兼容性问题【兼容IE9+ 和其他浏览器】
    var _h = window.getComputedStyle(_box).height;
    var _w = window.getComputedStyle(_box).width;
    console.log(_w, _h);
    // 兼容IE低版本的获取样式的方式【我们只需要了解即可】
    // var _h1 = _box.currentStyle.height;
    // var _w1 = _box.currentStyle.width;
    // 获取样式的数值
    var _wvalue = _box.offsetWidth;
    var _hvalue = _box.offsetHeight;
    console.log(_wvalue, _hvalue);
    /**************设置样式************************************/
    // 标签对象.style.样式名称  使用这样的语法，是用来操作标签内嵌样式的！
    // 给标签设置样式，统一使用 标签对象.style.样式名称 = 样式值;
    _box.style.width = "300px";
    </script>
</body>
</html>
控制台输出结果
  • 设置DOM对象样式

直接通过style进行行内样式设置。
dom.style.样式名称 = 样式值;
样式名称可能是多个单词组成的 background-color，在JS中进行操作的时候需要将名称转换成驼峰命名法：backgroundColor
注意：尽量不要在JS中进行大量样式的设置。

  • 对于标签内容的操作，有三种方式
  1. innerText：给指定标签的开始标签和结束标签中增加文本内容【非W3C标准】
  1. textContent：dom操作，给标签的开始标签和结束标签中增加文本内容，W3C标准操作
  2. innerHTML：给标签的开始标签和结束标签中，增加一段HTML代码；慎重使用，容易造成代码注入漏洞！
    扩展：所谓代码注入漏洞，是用于可以在客户端通过输入包含代码的字符串的方式，将带入注入到我们的网页中进行执行的过程
    innerHTML的使用规则
    对于数据的来源，完全信任的情况下使用它。其他时候禁止使用！

代码操作：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>JS操作标签属性</title>
    
</head>
<body>
    <!-- value是input标签的属性 -->
    输入年龄：<input type="text" id="uname" value="100">

    <script>
        
        var _name = document.getElementById("uname");
        // 1. 直接通过 [标签对象.属性]来操作标签的属性值
        _name.value = "120";
        _name.id = "age";
        console.log(_name.value, _name.id);
    
        // 2. 通过 标签对象.["属性名称"] 来操作标签的属性值
        _name["value"] = 110;
        _name["id"] = "phone";
        console.log(_name["value"], _name["id"]);

        
        // 3. DOM操作方式，通过getAttribute("属性名称")获取标签的属性值
        _name.setAttribute("value", 119);
        _name.setAttribute("id", "sex");
        // _name.className = "sex";
        _name.removeAttribute("value");
        console.log(_name.getAttribute("value"), _name.getAttribute("id"));

    </script>
</body>
</html>

备注：在使用原生JS操作标签的属性时，规则如下

  • id属性、title属性，建议通过 标签对象.属性名称 的语法进行处理。
  • class属性，建议通过标签对象.className 的语法进行处理。
  • 其他属性，建议使用set/getAttribute()的语法进行处理。

删除value属性。。。。：这样的语法是不能删除属性的
_name.value = null;

3.DOM核心API操作

节点属性API——获取元素定位

  • 元素的尺寸(宽度、高度)、位置(top.left)
属性/函数名称 描述
offsetWidth 获取元素宽度；包含padding值\border值
offsetHeight 获取元素高度；包含padding值\border值
offsetTop 获取元素距离浏览器顶部的距离
offsetLeft 获取元素距离浏览器左边的距离

备注：如果父元素进行了relative/absolute定位，offsetTop/offsetLeft就是相对父元素的顶部和左边的距离，如果父元素默认定位，就是相对浏览器窗口的距离

备注：获取网页可视区域宽度，高度
var clientWidth = 
window.innerWidth||document.documentElement.clientWidth;
var clientHeight = 
      window.innerHeight||document.documentElement.clientHeight;

获取网页文档的宽度、高度
var bodyWidth = document.body.clientWidth;
var bodyHeight = document.body.clientHeight;

实例：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #container{
            position:static;// relative
            width:800px;
            height:400px;
            margin-left:100px;
            margin-top:100px;
            background-color: #069;
            padding:1px;
        }
        #box{
            padding:50px;
            width:100px;
            height:100px;
            /*position:absolute;
            top:50px;
            left:50px;
            margin:50px 0 0 50px;
            background-color: #fff;
        }
    </style>
</head>
<body>
<div id="container">
    <div id="box"></div>
</div>
<script>
    function getStyle(dom, styleName) {
        if(dom.currentStyle) {
            return dom.currentStyle[styleName];
        } else {
            return getComputedStyle(dom)[styleName];
        }
    }

    var box = document.getElementById("box");
    console.log(getStyle(box,"width") + "---" + box.offsetWidth);
    console.log(getStyle(box, "height") + "---" + box.offsetHeight);
    console.log(getStyle(box, "margin-left") + "---" + box.offsetLeft);
    console.log(getStyle(box, "margin-top") + "---" + box.offsetTop);
    // 获取网页可视区域高度、宽度
console.log(window.innerHeight + "--" + window.innerWidth);
console.log(document.documentElement.clientHeight + "--" + document.documentElement.clientWidth);
// 获取网页文档的高度、宽度
console.log(document.body.clientHeight + "--" + document.body.clientWidth);

</script>
</body>
  • 节点查询API
属性/函数名称 描述
hasChildNodes() 判断是否包含子节点，返回一个布尔值
children 获取元素所有的子元素节点集合/数组
childNodes 获取元素所有的子节点集合/数组
firstChild 获取元素第一个子节点
firstElementChild 获取元素第一个子元素节点
lastChild 获取元素最后一个子节点
lastElementChild 获取元素最后一个子元素节点
previousSibling 获取元素前一个兄弟节点
previousElementSibling 获取元素前一个兄弟元素节点
nextSibling 获取元素后一个兄弟节点
nextElementSibling 获取元素后一个兄弟元素节点
parentNode 获取元素的父节点
textContent 操作(获取/设置)元素内容
  • 节点创建/添加API
属性/函数名称 描述
createElement(tagName) 根据名称创建一个元素节点
createTextNode(text) 根据文本创建一个文本节点
insertBefore(new,old) 在指定的节点前面添加节点
appendChild(child) 在子节点的末尾追加节点
replaceChild(new,old) 使用新的节点替换指定的节点
removeChild(child) 移除指定的子节点
className 设置标签class属性样式值

代码操作

<body>
    <div id="container">
        <div id="box">
            原有标签
        </div>
    </div>
    <script>
        var container = document.getElementById("container");
        var box = document.getElementById("box");
        // 创建第一个元素节点
        var d = document.createElement("div");
        // 创建文本节点
        var t = document.createTextNode("这是div文本");

        // 创建第二个元素节点
        var d2 = document.createElement("p");
        var t2 = document.createTextNode("这是p文本");

        // 添加元素节点到指定节点中
        d.appendChild(t);
        // 追加节点到指定节点前面
        container.insertBefore(d, box);

        // 追加节点到子节点末尾
        d2.appendChild(t2);
        d2.className = "test";
        container.appendChild(d2);
    </script>
</body>

4.简单特效开发

  • 抽奖
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>抽奖</title>
    <style type="text/css">
        *{margin: 0px;padding: 0px;}
        .container{
            width: 500px;height: 600px;background: white;border:solid 2px orange;margin: auto;border-radius: 10px;}
        .box,.show,.show_active{width: 450px;height: 450px;border-radius: 50%;}
        .box{border:2px orange solid;padding: 10px;margin: 10px auto;}
        .show{background-color: pink;font-size: 70px;line-height: 450px;text-align: center;}
        .show_active{background-color: #D0D0D0;color:#fff;font-size: 70px;line-height: 450px;text-align: center;}
        #btn{width: 200px;height: 40px;background-color:pink;display: block;margin: auto;font-size: 20px;}
        
    </style>
</head>
<body>
    <div class="container">
        <div class="box">
            <div id="show" class="show">
                等待抽奖
                </div>
        </div>
        <button id="btn" onclick="playGame()">开始抽奖</button>
    </div>

    <script type="text/javascript">
        var _names=["iphone7 plus","iPad Pro","apple watch","iPad mini4","iphone6","apple"]
        //获取页面中要使用的标签对象
        var _btn=document.getElementById("btn");
        var _show=document.getElementById("show");
        var _timer;
        var _flag=false;

        function playGame(){
            if (!_flag){
                _flag=true;
                _timer=setInterval(function(){
                    // 获取随机下标
                    var _no=Math.floor(Math.random(_names)*_names.length);
                    // 获取中奖礼品
                    var _n=_names[_no];
                    // 展示中奖礼品
                    _show.textContent=_n;
                    // 修改按钮的文本
                    _btn.textContent="停止抽奖";
                    // 修改展示的样式
                    _show.className="show_active"   
                },50);
            }else{
                _flag=false;
                clearInterval(_timer);
                // 修改按钮的文本
                _btn.textContent  = "开始抽奖";
                // 修改展示的样式
                _show.className = "show";
            }
        }


    </script>
</body>
</html>

效果展示：

抽奖
  • 飞机飞行进度演示
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>飞机飞行进度演示</title>
    <style type="text/css">
        *{margin: 0px;padding: 0px;}
        #nav{position: relative;
            height: 128px;
            width: 1200px;
            border:solid 1px #8E8E8E; 
        }
        #nav img{
            position: absolute;
            left: 0px;
            top:0px;
        }

        #process{
            height: 128px;
            background:#FFA042;
            width: 0px;
        }
    </style>
</head>
<body>
    <div id="nav">
        <div id="process"></div>
        ![](images/flystart.png)
    </div>
    <button onclick="start()">开始飞行</button>
    <script type="text/javascript">
        // 获取小飞机图片
        var _plane=document.getElementById("plane");
        var _process=document.getElementById("process");
        // 定义一个变量，用来存放计时器
        var _timer;

        // start()函数
        function start(){
            _timer=setInterval(function(){
                // 获取left的样式数值
                var _left=_plane.offsetLeft;
                var _width=_process.offsetWidth;
                // 飞行过程left的值增加
                _left+=10;
                _width+=10;

                // 设置随着飞机的飞行 飞机的图片发生改变
                if (_left>200 && _left<800) {
                    _plane.setAttribute("src","images/flying.png");
                    _process.style.background="#6FB7B7";

                }else if(_left>800){
                    _plane.setAttribute("src","images/flyend.png");
                    _process.style.background="#02DFB2"
                }

                // 边界的判断
                if (_left>=1200){
                    // 停止计时函数
                    clearInterval(_timer);
                }

                // 设置样式
                _plane.style.left=_left+"px";
                _process.style.width=_width+"px";

            },100)
        }

    </script>

</body>
</html>

效果展示：

飞机飞行进度演示

5.JavaScript事件——Event

事件操作：
事件就是一种发生在网页上的行为；鼠标单击、鼠标双击、键盘按下、键盘抬起、获得焦点、失去焦点等等各种行为
常见的事件：

  • 鼠标事件
属性/函数名称 描述
onmouseout 鼠标离开
onmouseenter 鼠标进入
onabort 图像的加载被中断。
onblur 元素失去焦点。
onchange 域的内容被改变。
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
onerror 在加载文档或图像时发生错误。
onfocus 元素获得焦点。
onkeydown 某个键盘按键被按下。
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onmouseup 鼠标按键被松开。
onreset 重置按钮被点击。
onresize 窗口或框架被重新调整大小。
onselect 文本被选中。
onsubmit 确认按钮被点击。
onunload 用户退出页面。
  • 键盘事件
属性/函数名称 描述
altKey 返回当事件被触发时，"ALT" 是否被按下。
button 返回当事件被触发时，哪个鼠标按钮被点击。
clientX 返回当事件被触发时，鼠标指针的水平坐标。
clientY 返回当事件被触发时，鼠标指针的垂直坐标。
ctrlKey 返回当事件被触发时，"CTRL" 键是否被按下。
metaKey 返回当事件被触发时，"meta" 键是否被按下。
relatedTarget 返回与事件的目标节点相关的节点。
screenX 返回当某个事件被触发时，鼠标指针的水平坐标。
screenY 返回当某个事件被触发时，鼠标指针的垂直坐标。
shiftKey 返回当事件被触发时，"SHIFT" 键是否被按下。

焦点事件：常用于表单元素标签

onfocus 获取焦点事件【获得光标事件】
onblue 失去焦点事件
onchange 内容修改事件，

事件的绑定方式：
1.标签属性绑定
2.dom元素绑定

  • 鼠标拖拽功能
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>鼠标拖动</title>
    <style type="text/css">
        #box{
            position:absolute;
            width: 336px;
            height: 300px;
            background-image:url("images/mv33.jpg"); }

    </style>
</head>
<body>
    <div id="box">
        
    </div>
    <script type="text/javascript">
        var _box=document.getElementById("box");

        // event事件对象，可以通过事件对象，获取到鼠标的位置
        _box.onmousedown=function(event){
            var _clientX = event.clientX;
            var _clientY = event.clientY;

            var _boxl = _box.offsetLeft;
            var _boxt = _box.offsetTop;

            var _left = _clientX - _boxl;
            var _boxt = _clientY - _boxt;

            document.onmousemove = function(event){
                var _clientX1 = event.clientX;
                var _clientY1 = event.clientY;

                var _l = _clientX1 - _left;
                var _t = _clientY1 - _boxt;

                _box.style.left = _l + "px";
                _box.style.top = _t + "px"
            }

            document.onmouseup=function(event){
                document.onmousemove=null;
            }
        }
    </script>
</body>
</html>

效果展示：

鼠标拖拽

扩展

  • 瀑布流式布局
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <style>
    *{margin:0px;padding:0px;}
    #container{width: 1200px;margin:auto;position:relative;}
    .box{padding:5px;float:left;position:absolute;left:0;top:0;}
    .item{padding:5px;border:solid 1px #888;width:190px;border-radius:5px;}
    .item > img{border:none;width:190px;border-radius:5px;vertical-align:bottom;}
    </style>
</head>
<body>
    <div id="container">
        <div class="box">
            <div class="item">![](image/1.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/2.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/3.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/4.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/5.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/6.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/7.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/8.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/9.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/10.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/11.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/12.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/13.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/14.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/15.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/16.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/17.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/18.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/19.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/20.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/21.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/22.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/23.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/24.png)</div>
        </div>
        <div class="box">
            <div class="item">![](image/25.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/26.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/27.png)</div>
        </div>
        <div class="box">
            <div class="item">![](image/28.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/29.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/30.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/31.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/32.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/33.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/34.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/35.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/36.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/37.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/38.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/39.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/40.jpg)</div>
        </div>
    </div>

    <script>
        // 网页中的标签和图片加载
        // 等待网页中的所有数据加载完成，再执行代码
        // window.onload 页面数据加载事件

        window.onload = function() {
            var _container = document.getElementById("container");

            // 获取所有的图片
            var _imgs = document.getElementsByClassName("box");

            // 计算一行可以存放多少张图片
            var _containerWidth = _container.offsetWidth;
            var _imgWidth = _imgs[0].offsetWidth;
            var _cols = Math.floor(_containerWidth / _imgWidth);

            // 声明一个记录高度的数组
            var _height = [];

            // 遍历所有的图片，开始定位
            for(var i = 0; i < _imgs.length; i++) {
                if(i < _cols) {
                    // 保存第一行中每一张图片的高度
                    _height.push(_imgs[i].offsetHeight);
                    _imgs[i].style.left = _imgWidth * i + "px";
                } else {
                    // 计算数组中的最小值
                    var _minHeight = Math.min.apply(null, _height);
                    console.log(_minHeight);

                    var _minIndex = getMinIndex(_minHeight, _height);
                    console.log(_minIndex);

                    // i 指的是循环到else的 i与function getMinIndex函数返回值 i不是一个值
                    _imgs[i].style.top = _minHeight + "px"；
                    _imgs[i].style.left = _minIndex * _imgWidth + "px";

                    // 更新最小高度
                    _height[_minIndex] += _imgs[i].offsetHeight;
                }
            }
        }
        /*value是最小值， arr是这个值所在的数组*/
        function getMinIndex(value , arr){
            for(var i = 0; i < arr.length; i ++) {
                if(value == arr[i]){
                    return i;
                }
            }
        }
    </script>
</body>
</html>

效果展示：

瀑布流式布局
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 212,294评论 6赞 493
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,493评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 157,790评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,595评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,718评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,906评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,053评论 3赞 410
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,797评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,250评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,570评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,711评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,388评论 4赞 332
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,018评论 3赞 316
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,796评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,023评论 1赞 266
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,461评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,595评论 2赞 350

推荐阅读更多精彩内容

  • iApp_《ijs》速成开发手册3.0
    《ijs》速成开发手册3.0 官方用户交流：iApp开发交流（1） 239547050iApp开发交流（2） 10...
    叶染柒丶阅读 5,098评论 0赞 7
  • HTML标签
    HTML标签解释大全 一、HTML标记 标签：!DOCTYPE 说明：指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,229评论 1赞 41
  • js十大设计模式
    工厂模式类似于现实生活中的工厂可以产生大量相似的商品，去做同样的事情，实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 7,727评论 2赞 17
  • 继续练习
    临摹来自YouTube的draw so cute 教程
    阿梵_莫计盘桓阅读 283评论 5赞 1
  • 6
    特别无助的时候，我想我真牛逼…
    Ada_YYYYYY阅读 170评论 0赞 0