程序员撩妹神器-新年祝福烟花

一、弹幕获取

1、模拟浏览器头部进行伪装

相关代码：

def askurl():
    url=input("请输入你要查询的网址:")
    head = {  # 模拟浏览器头部信息，向豆瓣服务器发送消息  相当于伪装 避免被识别出爬虫
        "User-Agent": "Mozilla / 5.0(Windows NT 10.0; Win64; x64) AppleWebKit / 537.36(KHTML, like Gecko) Chrome / 80.0.3987.122  Safari / 537.36"
    }
    html = requests.get(url=url, headers=head)
    html = html.content.decode("utf-8")
    bs = BeautifulSoup(html, "html.parser")
    html=bs
    cid=re.findall(findcid,str(html))[0]
    return "https://comment.bilibili.com/%s.xml"%cid

2、链接sqlite3数据库

相关代码：

def init_db(dbpath):
    sql = '''
        create table danmu(
        id integer  primary  key autoincrement,
        instroduction text
        )
    conn = sqlite3.connect(dbpath)
    cursor = conn.cursor()
    cursor.execute(sql)
    conn.commit()
    conn.close() 

3、使用正则表达式进行筛选

相关代码：

finditem=re.compile('<d p=.*>(.*)</d>')
findcid=re.compile('"cid":(\d*)')

4、保存数据

相关代码：

def saveData2DB(datalist,dbpath):
    init_db(dbpath)    
    conn = sqlite3.connect(dbpath)
    cur = conn.cursor()
    for data in datalist:
        for index in range(len(data)):
            data[index]='"'+data[index]+'"'
        sql = '''
            insert into danmu(
            instroduction)
            values (%s)'''%"".join(data)
        cur.execute(sql)
        conn.commit()
    cur.close
conn.close()

5、保存成功的数据

二、弹幕滚动效果实现

1、弹幕框架生成

相关代码：

 //初始化弹幕移动(速度，延迟)
  function initBarrage(obj) {
    //初始化
    obj.top = obj.top || 0;
    obj.class = obj.color || '#fff';
    this.style.left = obj.left + 'px';
    this.style.top = obj.top + 'px';
    this.style.color = obj.color;
    //添加属性
    this.distance = 0;
    this.width = ~~window.getComputedStyle(this).width.replace('px','');
    this.offsetLeft = obj.left;
    this.timer = null;
    //弹幕子节点
    var barrageChileNode = this.children[0];
    barrageChileNode.style.left = (this.width-barrageTipWidth)/2 + 'px';
    //运动
    barrageAnimate(this);
    //停止
    this.onmouseenter = function(){
      barrageChileNode.style.display= 'block';
      cancelAnimationFrame(this.timer);
    };
    this.onmouseleave = function(){
      barrageChileNode.style.display = 'none';
      barrageAnimate(this);
    };
    //举报
    barrageChileNode.onclick = function(){
      alert('举报成功');
    }
  }

2、弹幕滚动效果实现

相关代码：

  //弹幕动画
  function barrageAnimate(obj){
    move(obj);
    if(Math.abs(obj.distance) < obj.width+obj.offsetLeft){
      obj.timer = requestAnimationFrame(function(){
        barrageAnimate(obj);
      });
    }else{
      cancelAnimationFrame(obj.timer);
      //删除节点
      obj.parentNode.removeChild(obj);
    }
  }
  //移动
  function move(obj){
    obj.distance--;
    obj.style.transform = 'translateX('+obj.distance+'px)';
    obj.style.webkitTransform = 'translateX('+obj.distance+'px)';
  }

3、实现效果

输入弹幕：XXX我喜欢你！

弹幕输出：

三、烟花实现

1、烟花前端实现

相关代码：

    <div class="btn pause-btn">
        <svg fill="white" width="24" height="24">
            <use href="#icon-pause" xlink:href="#icon-pause">
            </use>
        </svg>
    </div>
    <div class="btn sound-btn">
        <svg fill="white" width="24" height="24">
            <use href="#icon-sound-off" xlink:href="#icon-sound-off">
            </use>
        </svg>
    </div>
    <div class="btn settings-btn">
        <svg fill="white" width="24" height="24">
            <use href="#icon-settings" xlink:href="#icon-settings">
            </use>
        </svg>
    </div>
</div>
<div class="menu hide">
    <div class="menu__inner-wrap">
        <div class="btn btn--bright close-menu-btn">
            <svg fill="white" width="24" height="24">
                <use href="#icon-close" xlink:href="#icon-close">
                </use>
            </svg>
        </div>

2、烟花实现效果

四、烟花种类选择

1、烟花设置

相关代码：

<form>
<div class="form-option form-option--select">
    <label class="shell-type-label">
    烟花类型
    </label>
    <select class="shell-type">
    </select>
</div>
<div class="form-option form-option--select">
    <label class="shell-size-label">
    烟花大小
    </label>
    <select class="shell-size">
    </select>
</div>
<div class="form-option form-option--select">
    <label class="quality-ui-label">
    画质
    </label>
    <select class="quality-ui">
    </select>
</div>
<div class="form-option form-option--select">
    <label class="sky-lighting-label">
    照亮天空
    </label>
    <select class="sky-lighting">
    </select>
</div>
<div class="form-option form-option--select">
    <label class="scaleFactor-label">
    缩放
    </label>
    <select class="scaleFactor">
    </select>
</div>
<div class="form-option form-option--checkbox">
    <label class="auto-launch-label">
    自动放烟花
    </label>
    <input class="auto-launch" type="checkbox" />
</div>
<div class="form-option form-option--checkbox form-option--finale-mode">
    <label class="finale-mode-label">
    同时放更多的烟花
    </label>
    <input class="finale-mode" type="checkbox" />
</div>
<div class="form-option form-option--checkbox">
    <label class="hide-controls-label">
    隐藏控制按钮
    </label>
    <input class="hide-controls" type="checkbox" />
</div>
<div class="form-option form-option--checkbox form-option--fullscreen">
    <label class="fullscreen-label">
    全屏
    </label>
    <input class="fullscreen" type="checkbox" />
</div>
<div class="form-option form-option--checkbox">
    <label class="long-exposure-label">
    保留烟花的火花
    </label>
    <input class="long-exposure" type="checkbox" />
</div>
</form>

2、实现效果

烟花共十二种类型可以选择

3、烟花部分类型展示

（1）Crackle

（2）Crossette

4、烟花整体动图展示

烟花部分的源码作者是Caleb Miller，源码链接是https://codepen.io/MillerTime/pen/XgpNwb，大家可以借鉴源码进行交流学习哦~。
看到这里了就[关注+点赞+收藏]三连支持下吧，你的「关注、点赞、收藏」是我创作的动力。