Python学习---抽屉框架分析[点赞功能分析]

实际上就是多了一个隐藏的span标签,内容是+1,配合setInterval实现的动态效果

settings.py

INSTALLED_APPS = [
   ...
 ‘app01‘,   # 注册app
]
STATICFILES_DIRS = (os.path.join(BASE_DIR, "statics"),)  # 现添加的配置,这里是元组,注意逗号
TEMPLATES = [
   ...
   ‘DIRS‘: [os.path.join(BASE_DIR, ‘templates‘)],
]

urls.py

from django.contrib import admin
from django.urls import path
from django.conf.urls import url, include
from app01 import views
urlpatterns = [
   # 点赞效果实现
 url(r‘^zan.html‘, views.zan),
]

views.py

from django.shortcuts import render, redirect
from app01 import models
# 点赞效果实现
def zan(request):
    return render(request, ‘zan.html‘)

views.py

from django.shortcuts import render, redirect
from app01 import models
# 点赞效果实现
def zan(request):
    return render(request, ‘zan.html‘)

templates/zan.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        div{
            height:100px;
            border:1px solid red;
        }
        .zan {
            height: 35px;
            width: 35px;
            color: black;
            background-color: #ff9dd5;
            position: relative;
            cursor: pointer;
            z-index: 1000;
        }
        .zan span {
            position: absolute;
        }
    </style>
</head>
<body>
    <div class="div1">
        <h3 style="color: #3e40cd">手动设置的+1效果</h3>
        <div class="zan">赞
            <span>+1</span>
        </div>
    </div>
    <div class="div2">
        <h3 style="color: #3e40cd">点击触发的+1效果</h3>
        <div class="zan">赞</div>
    </div>
</body>
<script src="/static/jquery-2.1.4.min.js"></script>
<script>
    // 动态实现+1的效果
    $(function(){
        $(".div2").click(function () {
            var tag_left = 5;
            var tag_top =5;
            var tag_opacity = 1;   // 半透明状况
            var tag_font_size = 12;

            var tag = document.createElement(‘span‘);
            tag.innerHTML = "+1";
            tag.style.color = ‘green‘;
            tag.style.fontSize = tag_font_size + ‘px‘;
            tag.style.top = tag_top + ‘px‘;
            tag.style.opacity = tag_opacity;
            tag.style.left = tag_left + ‘px‘;
            $(".div2 .zan").append(tag);
            var obj = setInterval(function () {
                tag_left += 2;
                tag_top -= 2;
                tag_opacity -= 0.1;   // 半透明状况
                tag_font_size += 1;
                tag.style.fontSize = tag_font_size + ‘px‘;
                tag.style.top = tag_top + ‘px‘;
                tag.style.opacity = tag_opacity;
                // tag.style.position = ‘absolute‘;
                tag.style.zIndex = 1002;
                tag.style.left = tag_left + ‘px‘;
                if(tag_opacity<0){
                    clearInterval(obj);
                    tag.remove();
                }
            }, 100)
        })
    })
</script>
</html>

页面显示;

原文地址:https://www.cnblogs.com/ftl1012/p/9410813.html

时间: 2024-11-08 02:30:00

Python学习---抽屉框架分析[点赞功能分析]的相关文章

Python学习---抽屉框架分析[点赞功能/文件上传分析]0317

点赞功能分析 前台传递过来新闻id[new_id]和session[session内有用户ID和用户之间的信息]到后台 后台News数据库内用户和新闻是多对多的关系,查看第三张表中的内容,判读用户Id所对应的信息里有没有new_id,如果有则remove[取消点赞],否则增加一条点赞 obj = News.objects.get(new_id=id) b = obj.favor.filter(uid=request.session['uid']).count() if b: obj.remove

Python学习---抽屉框架分析[数据库设计分析]180313

基本的: models.py ####################################以下都是抽屉的代码#################################### from django.db import models # 记录用户注册的次数 class SendMsg(models.Model): nid = models.AutoField(primary_key=True) # 自定义id名为nid,默认id名是id[固定格式] email = models

Python学习---抽屉框架分析[ORM操作]180314

Django ORM操作     1. 字段操作         class User(model.Model);             u=字段        用处:            1 .admin中的字段验证            2. obj.clean_fields() 进行自定义的验证             3. 利用Djanfo Form进行验证,此时前台和后台的操作分开               但form和model里的字段重复[推荐使用]             

Python学习---抽屉框架分析[小评论分析]0315

注: 此处的小评论涉及数据库操作 初级小评论代码 settings.py INSTALLED_APPS = [ ... 'app01', # 注册app ] STATICFILES_DIRS = (os.path.join(BASE_DIR, "statics"),) # 现添加的配置,这里是元组,注意逗号 TEMPLATES = [ ... 'DIRS': [os.path.join(BASE_DIR, 'templates')], ] urls.py from django.con

[TimLinux] Python学习内容框架

以下内容主体来自<Python学习手册第四版>,大致整理出的方向 1. 第一部分:使用入门 介绍Python语法之前,先对Python的的各个方面进行一个比较宽广的介绍,包含对Python的一些问题,Python程序的运行方式,给出示例演示Python是如何运行的.这部分的学习,粗略的过一下即可,建议花时间在2小时内,总页数在60页左右.包含的章节如下: 2. 第二部分:类型与运算 这部分内容是Python语言的基础中的基础,对Python的内建基本数据类型进行了详细的介绍,需要精度的部分之一

Python三大主流框架分析

python三大主流框架 """ Django: 大而全 自带的功能特别特别多 类似于航空母舰 有时候过于笨重 Flask 小而精 自带的功能特别特别少 类似于游骑兵 第三方的模块特别特别多,如果将flask第三方模块全部加起来 完全可以超过django 比较依赖于第三方模块 Tornado 异步非阻塞 牛逼到可以开发游戏服务器 A:socket部分 B:路由与视图函数对应关系 C:模板语法 Django: A用的别人的 wsgiref B自己写的 C自己写的 Flask A

Python学习——web框架

对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端. WSGI(Web Server Gateway Interface)是一种规范,它定义了使用python编写的web app与web server之间接口格式,实现web app与web server间的解耦. 一.python标准库提供的独立WSGI服务器称为wsgiref 1 from wsgiref.simple_server import make_server 2 3 def Ru

深度学习各类框架分析

因为工程实践设计深度学习中的迁移学习,要部署GPU版本的caffe框架,在部署过程中遇到了很多问题,由此引发了我对各类深度学习框架特点的思考,虽然之前也或多或少接触过各类框架,但是从没有进行过细致的相互比较.目前深度学习框架主要有TensorFlow,Caffe,MXNet,Pytorch,Keras,paddlepaddle,DeepLearning4J,CNTK等. 这些软件的开发者是怎么说服你(陌??)成为他们的?户的?他们的?标都是盈利么?他们的?标都是赚取?户的现?么?还是别的? 作为

python学习 多种程序分析(2)

1.文件操作有哪些模式?请简述各模式的作用 答:r模式只读  w模式只写 a模式只添加   r+可读可写  w+可写可读  a+可读可添加   rb  二进制只读  wb 二进制只写   ab 二进制添加 2.s = '**hello,world!**'请使用strip方法去掉字符串两端的'*'号 第一种:   s=s.strip('**')第二种   s=s.lstrip('**")   s=s.rstrip('**')   3.用户输入一个任意数字n,求1-n之间所有数字中的奇数 li=[]