js小功能合集:计算指定时间距今多久、评论树核心代码、字符串替换和去除。

摘要:
=0){dataBuild[j].margin=dataBuild[i].level*30;dataBuild[j].level=dataBuild[1].lever+1;dataArrayChilds.push;}}dataBuild[i]。childs=dataArrayChilds;}}cacMargin();varhtml_ str=“”;函数{for{html_str+=''+dd].txt+'';如果{aa}}aa;安慰log3.字符串替换和删除#将代码放在<scripts>的头中,然后直接引用以下代码。将注释表中的所有数据编入词典。每个评论都是一个关键。如果注释有子注释,请将其设置为键的值。如果没有子注释,请将值设置为空字典{}。然后循环阅读字典中的内容,然后根据“根注释”或“子注释”缩进注释。
1.计算指定时间距今多久
var date1=new Date('2017/02/08 17:00');  //开始时间
var date2=new Date();    //当前时间
var date3=date2.getTime()-date1.getTime()  //时间差的毫秒数
 

//计算出相差天数
var days=Math.floor(date3/(24*3600*1000))
 
//计算出小时数

var leave1=date3%(24*3600*1000)    //计算天数后剩余的毫秒数
var hours=Math.floor(leave1/(3600*1000))
//计算相差分钟数
var leave2=leave1%(3600*1000)        //计算小时数后剩余的毫秒数
var minutes=Math.floor(leave2/(60*1000))
 

//计算相差秒数
var leave3=leave2%(60*1000)      //计算分钟数后剩余的毫秒数
var seconds=Math.round(leave3/1000)
 

console.log("相差 "+days+""+hours+"小时 "+minutes+"分钟"+seconds)
2.评论树核心代码
String.prototype.replaceAll =function(str, substr, replacement) {
    if(replacement ===null) {
        replacement = '';
    }
    str = str.replace(new RegExp(substr, 'gm'), replacement);
    returnstr;
};

#后端传给前端的数据必须是如下格式,即并非标准的json格式,元组直接当字典的键值。
var data ={
    "(1,'qqq',None,104)":{
        "(2,'360','1',104)": {
            "(4,'baidu','2',104)": {
                "(44,'baidu','4',104)":{}
            }
        },
        "(3,'ali','1',104)": {}
    },
    "(5,'baidu',None,104)": {
        "(8,'baidu','5',104)": {}
    },
    "(6,'baidu',None,104)": {
        "(7,'baidu','6',104)": {}
    }
}
var dataBuild =[];
function getDataArray(d){for(var k ind){
    var kd = k.split(",");
    for(var j = 0; j < kd.length; j++){
        kd[j] = kd[j].replaceAll(kd[j],"\(","");
        kd[j] = kd[j].replaceAll(kd[j],"\)","");
        kd[j] = kd[j].replaceAll(kd[j],"'","");
    }
    var newD ={
        id:parseInt(kd[0]),
        pid:kd[2] === 'None' ? 0 : parseInt(kd[2]),
        txt:k,
        margin:0,
        level:0,
        childs:""}
    dataBuild.push(newD)
    if(JSON.stringify(d[k]) != "{}"){
        getDataArray(d[k]);
    }
}}
getDataArray(data);

var dataArray =[];
function cacMargin(){
    for (var i = 0; i < dataBuild.length; i++) {
        if(dataBuild[i].pid ==0){
            dataBuild[i].margin =0;
            dataBuild[i].level = 1;  
            dataArray.push(dataBuild[i]);          
        }
        var dataArrayChilds =[];
        for (var j = 0; j < dataBuild.length; j++) {
            if(dataBuild[i].id == dataBuild[j].pid && dataBuild[j].pid !=0){
                dataBuild[j].margin = dataBuild[i].level * 30;
                dataBuild[j].level = dataBuild[i].level + 1;
                dataArrayChilds.push(dataBuild[j]);
            }
        }
        dataBuild[i].childs =dataArrayChilds;
    }
}
cacMargin();


var html_str = '';
function aa(dd){
    for (var i = 0; i < dd.length; i++) {
        html_str += '<li mag='+dd[i].margin+'>'+dd[i].txt+'</li>';
        if(dd[i].childs.length >0){
            aa(dd[i].childs)
        }
    }
}
aa(dataArray);
console.log(html_str)
3.字符串替换和去除
#将代码放到<scripts>的头部,后面的代码直接引用即可。
String.prototype.replaceAll =function(str, substr, replacement) {
                if(replacement ===null) {
                    replacement = '';
                }
                str = str.replace(new RegExp(substr, 'gm'), replacement);
                returnstr;
            };
String.prototype.trim =function() {
        return this.replace(/(^s*)|(s*$)/g, "");
    };
    
    
#使用示例
kd[j] = kd[j].replaceAll(kd[j],"\(","");
kd[j] = kd[j].replaceAll(kd[j],"\)","");
kd[j] = kd[j].replaceAll(kd[j],"'","");
kd[j] =kd[j].trim();
    
    
4.多级评论完整示例

4.1 多级评论实现原理

js小功能合集:计算指定时间距今多久、评论树核心代码、字符串替换和去除。第1张评论表里设置一个值用来存储评论之间的关系,比如id为3的评论是评论id为1的评论的,那存储的时候就是“3 评论内容 1”,如果是评论新闻的而不是评论别人的评论的,最后一位就设置为None。

将评论表里的所有数据做成一个字典,每一条评论都是key,如果该评论有子评论就设置为该key的value,如果没有子评论,则value设置为空字典{}。然后循环读字典里的内容,然后再根据“根评论”还是“子评论”来缩进显示评论内容。

:此处的key必须是元组格式的,字典不能作为key。

4.2多级评论实现代码

setting.py常规配置(注册app);

urls.py,

url(r'^comment/', views.comment),

views.py,

from django.shortcuts importrender
importcollections
# Create your views here.

deftree_search(d_dic, comment_obj):

    # 在comment_dic中一个一个的寻找其回复的评论
    # 检查当前评论的 reply_id 和 comment_dic中已有评论的nid是否相同,
    # 如果相同,表示就是回复的此信息
    #   如果不同,则需要去 comment_dic 的所有子元素中寻找,一直找,如果一系列中未找,则继续向下找
    # d_dic{
    # (1, '111', None): {
    #   (5, '555', 1): {}
    # }
    # (2, '222', None): {
    #     "(4, '444', 2)": {
    #           "(6, '666', 4),": {}
    # }
    # }
    # (3, '333', None): {}
    # }
    # comment_obj # (6, '666', 4),
    for k, v_dic ind_dic.items():
        # 如果key值的元组里的第一个元素与传入元组的第三个元素相等,就表示他俩是父子评论,比如(3,111,10)和(5,555,3),(5,555,3)就是(3,111,10)的子评论
        if k[0] == comment_obj[2]:
            d_dic[k][comment_obj] =collections.OrderedDict()
            return
        else:
            ifv_dic:
                # 在当前第一个跟元素中递归的去寻找父亲
tree_search(d_dic[k], comment_obj)


defbuild_tree(comment_list):
    # collections.OrderedDict()的作用是创建一个有序空字典{};之所以要有序,是因为可以做到让评论有序的显示,不然的话,因为字典是无需的,所以取到的评论内容也是无需的,显示起来会有变化。
    comment_dic =collections.OrderedDict()

    for comment_obj incomment_list:

        if comment_obj[2] isNone:
            # 如果是根评论(元组的最后一位是None),添加到comment_dic[(1, '111', None)] = {}
            # {
            #     (1, '111', None): {}
            #     (2, '222', None): {}
            #     (3, '333', None): {}
            # }
            comment_dic[comment_obj] =collections.OrderedDict()
        else:
            # (4, '444', 2),
            # 如果是子评论,则需要在 comment_dic 中找到其回复的评论
tree_search(comment_dic, comment_obj)
    returncomment_dic




defcomment(request):
    # comment_list里存储的就当是数据库评论表里的条目,格式必须是元组的,因为元组格式可以作为字典的key。
    comment_list =[
        (1, '111', None),
        (2, '222', None),
        (3, '333', None),
        (4, '444', 2),
        (5, '555', 1),
        (6, '666', 4),
        (7, '777', 2),
        (8, '888', 4),
    ]
    comment_dict =build_tree(comment_list)
    #经过build_tree处理后,comment_list就变成下面的字典格式了,有子评论的话,子评论就是父评论的key对应的value;如果没有子评论,则该key对应的value就是一个空有序字典。
    # dic = {
    #     "(1     qqq    None)":{
    #         "(2     360    1)": {
    #             "(4     baidu  2)": {}
    #         },
    #         "(3     ali    1)": {}
    #     },
    #     "(5     baidu  None)": {
    #         "(8     baidu  5)": {}
    #     },
    #     "(6     baidu  None)": {
    #         "(7     baidu  6)": {}
    #     }
    # }
    
    # 将处理好的字典传入前端
    return render(request, 'comment.html', {'comment_dict': comment_dict})

comment.html,

# 使用模板函数
{% load xx %}

{% tree comment_dict %}

app01/templatetag/xx.py,

from django importtemplate
from django.utils.safestring importmark_safe

register =template.Library()

TEMP1 = """
<div   style='margin-left:%s;'>
    <span>%s</span>
"""


defgenerate_comment_html(sub_comment_dic, margin_left_val):
    html = '<div class="comment">'
    for k, v_dic insub_comment_dic.items():
        # 因为是子评论了,所以需要加上margin_left_val(30)像素的偏移量,子子评论再加margin_left_val(30)的偏移量,以此类推。
        html += TEMP1 % (margin_left_val, k[1])
        
        # 只要有字典,就递归的往下执行generate_comment_html()函数
        ifv_dic:
            html +=generate_comment_html(v_dic, margin_left_val)
        html += "</div>"html += "</div>"
    returnhtml


@register.simple_tag
deftree(comment_dic):
    # 将comment_dic字典里的数据拼接成html传给前端
    html = '<div class="comment">'
    for k, v incomment_dic.items():
        # 因为是根评论,所以margin-left应该是0,所以这里传入(0,k[1]),k[1]是评论内容
        html += TEMP1 % (0, k[1])
        # 如果v不为空字典,则执行generate_comment_html()
        ifv:
            html += generate_comment_html(v, 30)
        html += "</div>"html += '</div>'

    return mark_safe(html)

多级评论完整代码github地址:https://github.com/z843248880/morecomment

这些代码的功能虽小,但是能提高工作效率,此文会持续更新,记录知识的同时与大家共勉。

免责声明:文章转载自《js小功能合集:计算指定时间距今多久、评论树核心代码、字符串替换和去除。》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇redis++:Redis的两种持久化 RDB 和 AOF (一)Python 第四十二章 mysql 级联+查询下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

使用Python自动填写问卷星(pyppeteer反爬虫版)

写此文的目的是为了方便寒假自己忘记填问卷星 一开始的想法和去年一样,去年就写过一版,想着今年不过就是改改数据,换换id而已,另外没想到的事情发生了。。。 满怀信心的写完代码 from selenium import webdriver import time import random def run(): browser = webdriver...

js中对表格的操作总结

 inserRow()和insertCell()方法 首先,表格行索引从0开始。 inserRow():  这个函数将新行添加到index的那一行前, 比如insertRow(0),是将新行添加到第一行之前。 默认的insertRow()函数相当于 insertRow(-1),将新行添加到表的最后。 objTable.insertRow (objTabl...

在可编辑div中插入文字或图片的问题解决思路

最近在网上碰到一个人问了我一个问题,在可编辑div中插入文字或者图片。因为web在线编辑器我从来只是用,基本不会去研究源代码。后来正好一个在线聊天web项目中也要用到这个功能,我就特地看看了代码。 基本上编辑器或者在线聊天web页面,是不太可能用textarea在做输入框的,因为我们可能要插入图片或者超级链接,因此选择在iframe或者div作为输入框是必...

html页面跳转

https://blog.csdn.net/zaynahly/article/details/75434874 JS跳转页面参考代码 第一种: <script language="javascript" type="text/javascript"> window.location.href="http://t.zoukankan.com/lo...

JS动态创建表格比较【转】

目标:生成一个2000*5的表格,每个单元格的内容是行号+逗号+列号 方法一:使用createElement生成表格,使用insertRow和insertCell方法生成行列,单元格的内容使用innerHTML属性进行填充。 方法二:使用createElement生成表格,使用CreateElement方法生成行列,单元格的内容使用了createTex...

jQuery动画效果

jQuery提供的一组网页中常见的动画效果,这些动画是标准的、有规律的效果;同时还提供给我们了自定义动画的功能。 显示动画 方式一: $("div").show(); 解释:无参数,表示让指定的元素直接显示出来。其实这个方法的底层就是通过内部封装了display: block;实现的。 <body> <div></div...