web前端

jQuery实现弹幕效果案例

本文实例为大家分享了jQuery实现弹幕效果的具体代码,供大家参考,具体内容如下

效果:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>吐槽弹幕</title>
    
    <script type="text/javascript" src="jquery-3.2.1.min.js" ></script>
    <style>
            html, body {
      margin: 0px;
      padding: 0px;
      width: 100%;
      height: 100%;
      font-family: "微软雅黑";
      font-size: 62.5%;
    }
    
    
    

JQuery 计算文本的总宽度(Width)

  • JQuery计算文本宽度的原理是利用html提供的<pre>标签,向dom中动态添加<pre>标签,标签里的内容就是要测试长度的文本,获取完长度之后再删除刚才添加的<pre>标签,从而可取到文本的大概长度了。

    为什么要用标签而不用其他标签呢,那来看看<pre>标签的特性吧:pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符;而文本也会呈现为等宽字体。 <pre>标签的一个常见应用就是用来表示计算机的源代码。需要注意的地方是,计算文本长度时文本里面最好不要有其他标签。

    以下是实现代码:

        function GetCurrentStrWidth(text, font) {
            var currentObj = $('<pre>').hide().appendTo(document.body);
            $(currentObj).html(text).css('font', font);
            var width = currentObj.width();
            currentObj.remove();
            return width;
        }

    在此提供另外一种实战中验证过的方法: 完全可以用span 标签去替代 pre 标签。 只不过我们要十分注意:要传递正确的font信息(包括:font-family, font-size, font-weight)

    计算文本长度的代码方法:

        function GetCurrentStrWidth(text, font) {
            var currentObj 

js foreach循环使用return跳出循环及返回值无效 for循环使用有效

一次项目中使用forEach进行遍历,达到某一条件,希望跳出循环,代码不继续执行。

this.tableData.forEach((item, index)=>{
    if (item.value=== 1) {
       return
    }

for循环使用return可以跳出循环

<script>
 let a=[1,2,3];
  let b=[4,5,6,7,8];
   function test(){
        for(var i=0;i<a.length;i++){
            for(var j=0;j<b.length;j++){
                if(b[j]===5){
                    // break
                    return false;
                }else{
                    console.log('13');
                }
            }
            
            console.log('12');
        }
        console.log('14');
    }
    

    test();//打印结果为:13,第一次是b[4]等于4,不等于5,所以输出13,第二次b[1]等于5,所以return结束

</script>

我们再分别使用for循环和forEach方法来验证:

(function() {
    let 

JavaScript 读取Cookie的方法

读取Cookie

可以通过document.cookie直接读取cookie的内容:


  1. var strCookie = document.cookie; 

此时,strCookie是一个由该域名下的所有cookie的名/值对所组成的字符串,名/值对间以“分号加空格”分隔。为了方便查看,可以使用split()方法将cookie中的名/值对解析出来,得到一个cookie的列表。然后,再使用相应的解码方式,把cookie的值还原出来。

cookie值的解码方式,取决于之前存储cookie时所采用的编码方式。比如使用encodeComponent()函数对值进行编码,则要使用decodeComponent()函数对其值进行解码。代码如下:


  1. function getCookie(name) {
  2. var cookies = document.cookie;
  3. var list = cookies.split("; ");     // 解析出名/值对列表
  4.       
  5. for(var i

ajax中return不生效解决

function addSglr()方法中在ajax中直接写return是不生效的;

因为它返回的是ajax中的success方法,而不是addSglr()。

因此可以设置一个全局变量用来做判断,实现停止的效果。

注意:ajax一定要是同步的。

function addSglr(){

var flag = false;//全局变量,以便下面做判断

var addr;
$.ajax({
type : "post",
url : ctx + "/admin/zklt/basebook/getBaseBySfzh",
data : {sfzh:card_number},
dataType: "json",
async: false,//一定要是同步请求,否则会未定义;(ajax默认是异步的)

success : function(result) {
if(null != result){…

jquery判断checkbox是否被选中的方法

方法:1、获取checkbox元素,然后使用“get(0).checked)”方式进行判断;2、获取元素,然后使用“is(':checked')”方式进行判断;3、获取元素,然后使用“ttr('checked')”方式进行判断。

 

 

jQuery 判断 checkbox 是否被选中的几种方法

方法一:

if ($("#checkbox-id")get(0).checked) {
    // do something
}

方法二:

if($('#checkbox-id').is(':checked')) {
    // do something
}

方法三:

if ($('#checkbox-id').attr('checked')) {
    // do something
}

使用js进行string和json之间转换的方法

一、string类型转换成Json对象方法

 1、Javascript支持的转换方式:eval

          eval('(' jsonstr ')');

注意:需要在json字符外包裹一对小括号,ie8(兼容模式),ie7和ie6也可以使用eval()将字符串转为JSON对象,但不推荐这些方式;缺点是不安全,eval会执行json串中的表达式。

2、浏览器支持的转换方式(Firefox,chrome,opera,safari,ie9,ie8)等浏览器:

JSON.parse(jsonstr); //可以将json字符串转换成json对象

相反浏览器也提供了将Json对象转换成string类型的方法:

JSON.stringify(jsonstr);//可以将json对象转换成json对符串

3、jQuery插件支持的转换方式

$.parseJSON( jsonstr ); //jQuery.parseJSON(jsonstr),可以将json字符串转换成json对象

4、JSON官方的转换方式

http://www.json.org/提供了一个json.js,这样ie8(兼容模式),ie7和ie6就可以支持JSON对象以及其stringify()和parse()方法;
可以在https://github.com/douglascrockford/JSON-js上获取到这个js,一般现在用json2.js。

二、Json对象转换成String字符串方法

  上面提到的浏览器支持的转换方式JSON.stringify(str):

JSON.stringify(jsonstr);//可以将json对象转换成json对符串