@某人之后整体删除的方法

作者:可乐 发布时间:October 31, 2017 分类:前端 No Comments

今天有人在群里问了下这个东西,顺手写个demo吧。挺有意思的一个东西

1.gif



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
</head>
<body>
    <style type="text/css">
        div{ float: left; width: 500px; border: 1px solid #CCC;padding: 5px; outline: none}
        input{ width: 70px; display: inline-block; border: none; color: #00F; outline: none}
        button{ height: 34px; padding: 0 20px; }
    </style>
    <div contenteditable="true" id="test">test <input value="@keyword1" disabled /> del <input value="@keyword2" disabled /> 2 <input value="@keyword3" disabled /> 4</div><button>发送</button>
    <p id="result"></p>
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            $('button').on('click', function(event) {
                $('#result').html($('#test').html())
                var input = $('#result').find('input')
                input.each(function(index, el) {
                    $(el).after($(el).val())
                    $(el).remove()
                });
                console.log($('#result').text())
            });
        });
    </script>
</body>
</html>

Atom 同步设置

作者:可乐 发布时间:July 21, 2017 分类:扯淡 No Comments

真的是好久好久好久没写东西了。

最近把编辑器切换到了Atom了,家里的windows也可以用,但是想到还要再设置一边就比较烦。找了下,Atom是有一个插件来敢这个事儿的。Sync Settings

在Atom下安装 sync-setting 插件

屏幕快照 2017-07-21 下午3.31.31.png

去github创建 New personal access token。记得点上gist权限

屏幕快照 2017-07-21 下午3.32.03.png

记下这个生成的Token

屏幕快照 2017-07-21 下午3.35.52.png

gist 创建一个新的gist

屏幕快照 2017-07-21 下午3.32.43.png

记下这个生成的gist id

15006229570617.jpg

将前面的Token和Gist id填入到设置中去

15006228064326.jpg

在Atom里执行命令(comman+shift+p)

15006229991614.jpg

看到这个,大功告成

15006230268247.jpg

固定范围内的随屏滚动

作者:可乐 发布时间:November 3, 2016 分类:前端 No Comments

09年的时候,在blueidea上问过这个问题,那时候没人回我。最近在那看到有人问,顺手写一下吧。

<textarea name="rtext" class="run_code" id="runcode_31682"><!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<title>Document</title>
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.slim.min.js"></script>

</head>
<body>

<style type="text/css">
    .box{ position: relative; margin: 10px; margin-bottom: 100px; border: 1px solid #CCC; }
    .pic{ position: absolute; left: 20px; top: 20px; width: 60px; height: 60px; background-color: #F00; text-align: center; line-height: 60px; font-size: 30px; color: #FFF }
    .fixed{ position: fixed; left: 39px; top: 31px; }
    .bottom{ position: absolute; top: auto; left: 20px; bottom: 20px; }
</style>
<div class="box" style="height: 1500px;">
    <div class="pic">1</div>
</div>
<div class="box" style="height: 500px;">
    <div class="pic">2</div>
</div>
<div class="box" style="height: 1800px;">
    <div class="pic">3</div>
</div>
<script type="text/javascript">
    jQuery(document).ready(function($) {
        $('.box').each(function(index, el) {
            var _self = $(this)
            var boxHeight = $(this).outerHeight();
            $(window).on('scroll', function(event) {
                if (el.getBoundingClientRect().top < 0) {
                    boxHeight + el.getBoundingClientRect().top - 100 < 0 ? _self.find('.pic').addClass('bottom') : _self.find('.pic').removeClass('bottom').addClass('fixed')    
                }else{
                    _self.find('.pic').removeClass('fixed')
                }
            });
        });
    });
</script>

</body>
</html></textarea>
<input class="btn btn-primary" name="rbutton" type="button" onclick="runcode('runcode_31682');" value="运行代码">

2015告别篇

作者:可乐 发布时间:December 31, 2015 分类:扯淡 No Comments

貌似一整年没写一个字了在这个上面,也真是够懒的了。最后一天了,写几句吧。

2015收获:

  • 闺女一天天的长大,变得越来越可爱,人生一大收获
  • 去了日本,台湾。也算是出过国的人了
  • 晋升成功,压力和收获都变的多了一些。
  • 做皮具的水平稍微长进了一点点,但是差的还远

2016期许

  • 家人都能身体健康
  • 工作上能有拿的出手的成绩
  • 皮具能有所长进
  • 去一趟日本或者土耳其