分类 JavaScript 下的文章

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

高效Web开发的10个jQuery代码片段

1、检测Internet Explorer版本
当涉及到CSS设计时,对开发者和设计者而言Internet Explorer一直是个问题。尽管IE6的黑暗时代已经过去,IE也越来越不流行,它始终是一个能够容易检测的好东西。当然了,下面的代码也能用于检测别的浏览器。

$(document).ready(function() {
   if (navigator.userAgent.match(/msie/i) ){
     alert('I am an old fashioned Internet Explorer');
   }
});

2、平稳滑动到页面顶部
这是一个最广泛使用的jQuery效果:对一个链接点击下会平稳地将页面移动到顶部。这里没什么新的内容,但是每个开发者必须要会偶尔编写一下类似函数

$("a[href='#top']").click(function() {
  $("html, body").animate({ scrollTop: 0 }, "slow");
  return false;
});

- 阅读剩余部分 -

jquery.pocket.js网页特效合集

经常做项目的时候里面需要用到各种特效,每次不是自己写就是去找现成的插件,这样工作效率和项目质量总是难以保证,一直计划着做一款jQ插件并开源,里面集成了我们常用的特效,banner,导航,公告,焦点图,弹窗等等。

项目地址如下,欢迎有兴趣的朋友贡献代码!
github:https://github.com/myfmwei/pocket.js