分类 HTML 下的文章

JS限制文本字数 + CSS限制文字行数

CSS

.txt{
    display: -webkit-box;  /*将对象作为弹性盒子模型显示*/
    overflow: hidden; /**/
    text-overflow:ellipsis;
    word-break:break-all;
    -webkit-box-orient:vertical;/*伸缩盒对象的子元素的排列方式-垂直*/
    -webkit-line-clamp:3; /*限制文本的行数*/
}

JS

<script>
    $(document).ready(function(){    
        $(".news").each(function(){
             var maxwidth=100;   
             if($(this).text().length>maxwidth){   
             $(this).text($(this).text().substring(0,maxwidth));    
             $(this).html($(this).html()+"<a href='#'>[详细]</a>");    
        }    
        });   
    });  
</script>

粘贴上传图片实现

HTML:

<div id="box" style="width:200px;height:200px;border:1px solid;" contenteditable></div>
<script>
    document.querySelector('#box').addEventListener('paste', function(e) {
    // chrome
    if (e.clipboardData && e.clipboardData.items[0].type.indexOf('image') > -1) {
        var that = this,
            reader = new FileReader();
            file = e.clipboardData.items[0].getAsFile();

        reader.onload = function(e) {
            var xhr = new XMLHttpRequest(),
                fd = new FormData();

            xhr.open('POST', '../upload.php', true);
            xhr.onload = function () {
                var img = new Image();
                img.src = xhr.responseText;
                that.appendChild(img);  // 这里是把上传后得到的地址插入到#box里
            }

            fd.append('file', this.result); // this.result得到图片的base64
            xhr.send(fd);
        }
        reader.readAsDataURL(file);
    }
}, false);
</script>

PHP:

<?php
    header("Access-Control-Allow-Origin:*");
    $url = 'http://'.$_SERVER['HTTP_HOST'];
    $file = $_POST["file"];
    $data = base64_decode(str_replace('data:image/png;base64,', '', $file));  //截图得到的只能是png格式图片,所以只要处理png就行了
    $name = md5(time()) . '.png';  // 这里把文件名做了md5处理
    file_put_contents($name, $data);
    echo "$url/$name";
?>

Chrome桌面提醒功能,兼容新老版本,兼容firefox

//桌面提醒
function notify(title, content) {
        
        if(!title && !content){
            title = "桌面提醒";
            content = "您看到此条信息桌面提醒设置成功";
        }
        var iconUrl = "/images/send_ok.png";
        
        if (window.webkitNotifications) {
            //chrome老版本
            if (window.webkitNotifications.checkPermission() == 0) {
                var notif = window.webkitNotifications.createNotification(iconUrl, title, content);
                notif.display = function() {}
                notif.onerror = function() {}
                notif.onclose = function() {}
                notif.onclick = function() {this.cancel();}
                notif.replaceId = 'Meteoric';
                notif.show();
            } else {
                window.webkitNotifications.requestPermission($jy.notify);
            }
        }
        else if("Notification" in window){
            // 判断是否有权限
            if (Notification.permission === "granted") {
                var notification = new Notification(title, {
                    "icon": iconUrl,
                    "body": content,
                });
            }
            //如果没权限,则请求权限
            else if (Notification.permission !== 'denied') {
                Notification.requestPermission(function(permission) {
                    // Whatever the user answers, we make sure we store the
                    // information
                    if (!('permission' in Notification)) {
                        Notification.permission = permission;
                    }
                    //如果接受请求
                    if (permission === "granted") {
                        var notification = new Notification(title, {
                            "icon": iconUrl,
                            "body": content,
                        });
                    }
                });
            }
        }
    }

ps: Chrome需在服务器环境测试

转自:http://blog.csdn.net/qzmrock/article/details/39802391