weixin_34268579
weixin_34268579

会员等级进度功能前端实现

一、切图

1、效果

真实效果如下。

为说明问题只保留有用代码。进度条宽度用百分比来表示，这样适配时不需要重新计算。

会员等级进度功能前端实现_第1张图片

2、切图代码

html代码如下：

DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>title>
    <link rel="stylesheet" href="http://static9.pplive.cn/pub/flagment/v_20150114110035/header.min.css" />
    
    <link rel="stylesheet" href="css/vipgrowth.css">
    
    <script type="text/javascript" src="http://static9.pplive.cn/vip/201508/center/v_20150901140940/js/jquery-1.9.1.min.js">script>
    <script>
window.onresize=function(){
    var winWidth = document.body.clientWidth;
    if(winWidth <=1230){
        body.className="grid-1010"; 
    }else  if (winWidth<= 1410){
        body.className="grid-1230"; 
    }else if (winWidth>1410){
        body.className="grid-1410"; 
    }else {
        alert("do not know!");
    }
}
script>
head>

<body id="body">
<script>//初始化状态显示样式判断,放在body后面
var winWidth = document.body.clientWidth;
 if(winWidth <=1230){
        body.className="grid-1010"; 
    }else  if (winWidth<= 1410){
        body.className="grid-1230"; 
    }else if (winWidth>1410){
        body.className="grid-1410"; 
    }else {
        alert("do not know!");
    }
script>
    <div class="vg-body">
        
        <div class="vg_info ">
            <div class="vg_rank">
                <ul class="vg_rankBox cf"> 
                    <li >
                        <p class="vg_rankpoint">0p>
                        <a class="vip vip1">a>
                    li>
                    <li>
                        <p class="itembar">
                            <span class="middle">
                                <em class="vg_rank_flag">em>
                            span>
                        p>
                    li>
                    <li>
                      <p class="vg_rankpoint">600p>
                        <a class="vip vip2">a>
                    li>
                    <li>
                        <p class="itembar">
                            <span class="middle">
                                <em class="vg_rank_flag">em>
                            span>
                        p>
                    li>
                    <li>
                    <p class="vg_rankpoint">1800p>
                        <a class="vip vip3">a>
                    li>
                    <li>
                        <p class="itembar">
                            <span class="middle">
                                <em class="vg_rank_flag">em>
                            span>
                        p>
                    li>
                    <li>
                    <p class="vg_rankpoint">3600p>
                        <a class="vip vip4">a>
                    li>
                    <li>
                        <p class="itembar">
                            <span class="middle">
                                <em class="vg_rank_flag">em>
                            span>
                        p>
                    li>
                    <li>
                    <p class="vg_rankpoint">6000p>
                        <a class="vip vip5">a>
                    li>
                    <li>li>
                ul>
            div>
        div>
        
    div>
body>
<script>    
function lightCrown(viplevel){
    $(".vip").removeClass("light");
    for(var i=1;i<=viplevel;i++){
        var temp="vip"+i;
        $("."+temp).addClass("light");
    }
}
function lightProgressBar(viplevel){
    for(var j=0;j<viplevel-1;j++){
        $(".vg_rankBox").find(".middle").eq(j).css("width","100%");
    }
}
function lightFlag(viplevel){
    $(".vg_rankBox").find(".vg_rank_flag").eq(viplevel-1).css("display","block");
}
function calWidth(growthlevel){
    var cur;
    if (growthlevel==6000)return;
    if(0<=growthlevel&growthlevel<600){
        y=600;
        x=0;
        cur=0;
    }else if(600<=growthlevel&growthlevel<1800){
        y=1800;
        x=600;
        cur=1;  
    }else if(1800<=growthlevel&growthlevel<3600){
        y=3600;
        x=1800;
        cur=2;  
    }else if(3600<=growthlevel&growthlevel<6000){
        y=6000;
        x=3600;
        cur=3;  
    }
    var width=1-(y-growthlevel)/(y-x);
    $(".vg_rankBox").find(".middle").eq(cur).css("width",width*100+"%");
}
function viprank(viplevel,growthlevel){
    lightCrown(viplevel);
    lightProgressBar(viplevel);
    calWidth(growthlevel);
    lightFlag(viplevel);
}
viprank(2,1200);
script>
html>
View Code

css代码如下：

@charset "utf-8";
html,body{
    background-color: #f6f5f5;
}

.vg-body{
    width: 1390px;
    margin:0 auto;
}
.vg_info{
    height: 156px;
    margin-top: 20px;
    padding:30px 0 0 32px;
    border: 1px solid #c8c8c8;
    border-top: 2px solid #e65a5a;
    background-color: #fff;
}
/*会员等级进度*/ 
.vg_rank{
    width: 980px;
    float: right;
}
.vg_rankBox li{
    float: left;
}
.vg_rankBox .vip{
    display: block;
    cursor: pointer;
    width: 56px;
    height: 56px;
    background: url(../images/vip-grow-rank.png) no-repeat;
}
.vg_rankBox .vip1 {
    background-position: 0 -65px;
}
.vg_rankBox .vip1.light {
    background-position: 0 0;
}
.vg_rankBox .vip2 {
    background-position: -56px -65px;
}
.vg_rankBox .vip2.light {
    background-position: -56px 0;
}
.vg_rankBox .vip3 {
    background-position: -112px -65px;
}
.vg_rankBox .vip3.light {
    background-position: -112px 0;
}
.vg_rankBox .vip4 {
    background-position: -168px -65px;
}
.vg_rankBox .vip4.light {
    background-position: -168px 0px;
}
.vg_rankBox .vip5 {    
    background-position: -225px -65px;
}
.vg_rankBox .vip5.light {    
    background-position: -225px 0px;
}
 .vg_rankBox .itembar{
     width: 166px;
     height: 12px;
     margin-top: 38px;
     background-color: #ffdcdc;
     border:2px solid #ffdcdc;

 }
 .vg_rankBox .itembar .middle{
     display: block;
     height: 12px;
     background-color: #e65a5a;
    position: relative;
    width: 0%;
 }
 .vg_rank_flag{
     width: 13px;
     height: 33px;
     background: url(../images/flag.png) no-repeat;
     position: absolute;
     right:-10px;
     top:-21px;
    display:none;
 }


.vg_rankpoint{
    text-align: center;
    font-size: 12px;
    color:#b4b4b4;
}


/*grid-1230*/
.grid-1230 .vg-body{
    width: 1210px;
}
.grid-1230 .vg-formulaBox{
    width:960px;
}
.grid-1230 .vg_rankBox .itembar{
    width: 124px;
}
.grid-1230 .vg_rank{
    width: 820px;
}

.grid-1230 .vg_tasklist{
    width: 1090px;
}
.grid-1230 .vg_tasklist li{
    margin-right: 16px;
}

.grid-1230 .vg_task .arrowbtn-left{
    left: 33px;
}
.grid-1230 .vg_task .arrowbtn-right{
    right: 33px;
}
.grid-1230 .vg_growth_table {
    padding:24px 30px;
}
/*grid-1010*/
.grid-1010 .vg-body{
    width: 990px;
}

.grid-1010 .vg-banner {
    background: url(../images/vg-banner-990.jpg) no-repeat center top;
}
.grid-1010 .vg_headinfo{
    width:190px;
}
.grid-1010 .vg_rank{
    width: 645px;
}
.grid-1010 .vg_info{
    padding-left: 14px;
}
.grid-1010 .vg-formulaBox{
    width:935px;
}
.grid-1010 .vg_rankBox .itembar{
    width: 84px;
}
.grid-1010 .vg_tasklist{
    width: 850px;
}
.grid-1010 .vg_tasklist li{
    margin-right: 35px;
}

.grid-1010 .vg_task .arrowbtn-left{
    left: 30px;
}
.grid-1010 .vg_task .arrowbtn-right{
    right: 30px;
}

.grid-1010 .vg_growth_table {
    padding:24px;
}
View Code

用到图片

会员等级进度功能前端实现_第2张图片

3、切图分析

html结构如下：


        <div class="vg_info ">
            <div class="vg_rank">
                <ul class="vg_rankBox cf"> 
                    <li >
                        <p class="vg_rankpoint">0p>
                        <a class="vip vip1 light ">a>
                    li>
                    <li>
                        <p class="itembar">p>
                    li>
                    <li>
                      <p class="vg_rankpoint">600p>
                        <a class="vip vip2 light">a>
                    li>
                    <li>
                        <p class="itembar">
                            <span class="middle" style="width:60px;">
                                <em class="vg_rank_flag">em>
                            span>
                        p>
                    li>
                    <li>
                    <p class="vg_rankpoint">1800p>
                        <a class="vip vip3">a>
                    li>
                    <li>
                        <p class="itembar">p>
                    li>
                    <li>
                    <p class="vg_rankpoint">3600p>
                        <a class="vip vip4">a>
                    li>
                    <li>
                        <p class="itembar">p>
                    li>
                    <li>
                    <p class="vg_rankpoint">6000p>
                        <a class="vip vip5">a>
                    li>
                    <li>li>
                ul>
            div>
        div>

3.1点亮等级

 代表，3个class，vip1表示等级为v1，light表示点亮。所以如果要点亮某个等级加class light即可。

3.2设置两个等级之间进度条满格

会员等级进度功能前端实现_第3张图片

如上图，只需要设置class为middle的span的宽度为100%即可。

3.3显示小红旗

设置对应的class为vg_rank_flag的em的display属性为block即可。因为小红旗默认不显示。

二、js交互部分

1、思路

第一步：

传入参数：viplevel代表vip等级。growthlevel代表成长值。

第二步：

根据viplevel点亮<=viplevel等级的皇冠。【function1】

第三步：

v1:0<=growthlevel<600

v2:600<=growthlevel<1800

v3:1800<=growthlevel<3600

v4:3600<=growthlevel<6000

v5:6000=grothlevel

  • 根据viplevel点亮对应进度条。即设置span宽度100%。【function2】
  • 根据growthlevel判断
    • 如果growth=6000，不做任何操作。
    • 否则判断
    • 会员等级进度功能前端实现_第4张图片
    • 抽象一下公式
    • 所以根据growthlevel，判断得出y和x值，传入公式，计算并设置span的百分比。【function4】最后点亮小红旗。【function3】

2、代码实现

function1：

function lightCrown(viplevel){
    $(".vip").removeClass("light");
    for(var i=1;i<=viplevel;i++){
        var temp="vip"+i;
        $("."+temp).addClass("light");
    }
}

 function2：

function lightProgressBar(viplevel){
    for(var j=0;j){
        $(".vg_rankBox").find(".middle").eq(j).css("width","100%");
    }
}

 function3：

function lightFlag(viplevel){
    $(".vg_rankBox").find(".vg_rank_flag").eq(viplevel-1).css("display","block");
}

function4：

function calWidth(growthlevel){
    var cur;
    if (growthlevel==6000)return;
    if(0<=growthlevel&growthlevel<600){
        y=600;
        x=0;
        cur=0;
    }else if(600<=growthlevel&growthlevel<1800){
        y=1800;
        x=600;
        cur=1;    
    }else if(1800<=growthlevel&growthlevel<3600){
        y=3600;
        x=1800;
        cur=2;    
    }else if(3600<=growthlevel&growthlevel<6000){
        y=6000;
        x=3600;
        cur=3;    
    }
    var width=1-(y-growthlevel)/(y-x);
    $(".vg_rankBox").find(".middle").eq(cur).css("width",width*100+"%");
}

 整理一下调用过程就是：

function viprank(viplevel,growthlevel){
    lightCrown(viplevel);
    lightProgressBar(viplevel);
    calWidth(growthlevel);
    lightFlag(viplevel);
}
viprank(2,1200);

 本文作者starof,因知识本身在变化，作者也在不断学习成长，文章内容也不定时更新，为避免误导读者，方便追根溯源，请诸位转载注明出处：http://www.cnblogs.com/starof/p/5443445.html有问题欢迎与我讨论，共同进步。 

 

你可能感兴趣的:(会员等级进度功能前端实现)

  • Git提交代码Commit消息企业级规范 前端页面仔 git
    GitCommit类型完整指南类型用途示例feat新增功能（面向用户的功能性变更）gitcommit-m"feat:添加用户登录功能"fix修复Bug（解决代码中的问题）gitcommit-m"fix:修复首页加载崩溃问题"docs文档更新（README、注释等）gitcommit-m"docs:更新API接口文档"style代码样式调整（空格、格式化、分号等，不改变逻辑）gitcommit-m"
  • Vue 中的 this.$set() 使用详解(一文搞懂) 前端页面仔 vue.js前端javascriptreact.js前端框架开发语言ecmascript
    在Vue.js开发中，this.$set()是一个解决响应性问题的关键工具。本文将从基础使用到高级场景，全面解析这个方法的使用技巧和最佳实践。为什么需要this.$set()？——响应性原理的核心问题Vue的响应性系统无法检测对象属性的添加或删除，以及数组索引访问的变化。这是因为Vue2使用Object.defineProperty()实现响应性，它存在以下限制：//对象属性添加问题constob
  • Vue3 工程化实战 jay丿 vue.jsjavascripttypescript前端
    Vue3工程化实战引言：构建工具的演进与选择在前端工程化领域，构建工具的选择直接影响开发效率与项目性能。随着Vue3的普及，构建工具生态也发生了显著变化：传统vue-cli逐渐进入维护模式，而新一代构建工具Vite凭借其卓越性能成为官方推荐方案。本文将系统对比两种创建方式，并深入解析基于Vite的Vue3工程化实践。一、传统方案：基于vue-cli创建Vue3工程1.1创建流程#检查版本（需≥4.
  • 鸿蒙HarmonyOS 5.0开发实战：自定义安全键盘实现案例 炫酷盖茨猫先生 鸿蒙5.0开发鸿蒙应用开发案例harmonyos华为前端androidArkUIArkTS鸿蒙系统
    往期鸿蒙5.0全套实战文章必看：（文中附带鸿蒙5.0全栈学习资料）鸿蒙开发核心知识点，看这篇文章就够了最新版！鸿蒙HarmonyOSNext应用开发实战学习路线鸿蒙HarmonyOSNEXT开发技术最全学习路线指南鸿蒙应用开发实战项目，看这一篇文章就够了（部分项目附源码）自定义安全键盘案例
  • Android-ThreadLocal并发安全与内存泄漏原理详解
    你生来一无所有，何惧从头再来---勉励自己ThreadLocal是如何实现线程隔离的?为什么ThreadLocal会造成内存泄露?如何解决？本篇文章主要是针对这两个问题进行剖析，确保每个小伙伴都能读懂，深刻理解，篇幅较长，请耐心阅读。大家如果还有什么难点，欢迎在评论区留言，小编将和大家一起学习。定义：ThreadLocal提供线程局部变量，通过为每个线程提供不同的局部变量副本，实现线程之间的数据隔
  • 单片机开发全攻略：从零开始，迈向嵌入式开发高手之路 DTcode7 学习提升单片机mongodb嵌入式硬件
    单片机开发全攻略：从零开始，迈向嵌入式开发高手之路一、单片机开发基础1.1单片机概述1.2开发环境搭建1.3编程语言与框架二、实战案例：LED闪烁2.1硬件准备2.2代码示例2.3解释三、高级应用：温度监控系统3.1硬件扩展3.2代码实现3.3解释四、开发技巧与问题排查4.1优化内存使用4.2问题排查思路4.3调试工具五、相关项目积分资源5.1在线学习资源5.2社区与论坛5.3开源项目结语与讨论在
  • 数字孪生：变电站监测和运维的智能化实践 数字孪生家族 数字孪生视频孪生数据可视化
    随着夏季高温天气的到来，我国用电也迎来了高峰。用电负荷持续走高，对全国各地电网运维也迎来了挑战。电力系统作为现代社会的基础设施，其稳定性和可靠性至关重要，变电站则是实现电力系统电力互联互通的枢纽。在传统变电站中，由于依赖人工巡检和定期维护，存在效率低下和响应迟缓等问题。大量的人力投入，同时也使违章操作、疏忽大意等众多人为操作失误隐患大大提升。近年来，我国在智慧电网建设方面取得了显著成果，其中最为典
  • 海外社交App开发实战：从0到百万DAU的架构设计 VI8664956I26 java
    一、海外社交赛道破局点：找到你的“社交原子习惯”新兴市场机会矩阵地区用户痛点成功案例东南亚线下社交成本高Litmatch（匿名语音匹配）中东性别隔离文化下的匿名需求Yalla（语音聊天室）拉美热情文化+高移动渗透率Badoo（附近的人）功能设计黄金公式社交动力=低门槛互动×即时反馈×身份认同反例：要求填写10项资料才能聊天→用户流失率↑80%正例：Soul的“灵魂测试”→3步生成虚拟身份二、核心技
  • Webpack 中的 Loader 和 Plugin 全面详解 JaysonJin webpackrust前端
    Webpack中的Loader和Plugin全面详解整理不易，记得收藏、点赞再加关注，后续还会更新更多实战文档！Webpack是现代前端构建体系的核心工具，其中Loader和Plugin是其功能扩展的两大支柱。它们虽然常一起出现，但本质和作用完全不同。本文将全面对比二者的定义、作用、使用场景、生命周期与示例，帮你彻底搞清Loader和Plugin的区别与使用方法。一、Loader是什么？定义：Lo
  • 使用Spring Boot实现用户认证和授权 E绵绵 Everythingspringboot后端java
    文章目录引言第一章SpringBoot概述1.1什么是SpringBoot1.2SpringBoot的主要特性第二章用户认证和授权基础知识2.1用户认证2.2用户授权2.3SpringSecurity概述第三章项目初始化第四章实现用户认证和授权4.1定义用户实体类和角色实体类4.2创建Repository接口4.3实现Service类4.4配置SpringSecurity4.5创建Controll
  • 软件工程领域框架复用：提升开发效率的秘诀 项目管理实战手册 项目管理最佳实践软件工程网络hadoopai
    软件工程领域框架复用：提升开发效率的秘诀关键词：框架复用、软件开发效率、代码重用、设计模式、组件化、模块化、最佳实践摘要：本文深入探讨软件工程中框架复用的概念、原理和实践方法。我们将从基础概念出发，逐步分析框架复用的优势、实现方式和常见模式，并通过实际案例展示如何通过框架复用显著提升开发效率。文章还将讨论框架复用的适用场景、工具推荐以及未来发展趋势。背景介绍目的和范围本文旨在全面介绍软件工程中的框
  • 鸿蒙应用变现策略：盈利模式全面分析 操作系统内核探秘 操作系统内核揭秘harmonyos华为ai
    鸿蒙应用变现策略：盈利模式全面分析关键词：鸿蒙应用、变现策略、盈利模式、应用内购买、广告盈利、订阅服务摘要：本文旨在全面分析鸿蒙应用的变现策略和盈利模式。随着鸿蒙操作系统的广泛应用，众多开发者希望借助这一平台实现应用的盈利。文章将从背景介绍入手，阐述鸿蒙应用的发展现状和盈利的重要性。接着详细解析核心概念，包括常见的盈利模式及其原理。通过数学模型和公式说明不同盈利模式的潜在收益计算方法。结合项目实战
  • WHAT - TanStack 前端工具库合集 @PHARAOH 前端
    文章目录常见的TanStack库特点官方网站与资源TanStackQuery（ReactQuery）TanStackTableTanStackVirtualTanStackRouterTanStackForm（目前还在开发预览阶段）在WHAT-react-query(TanStackQuery)vsswr请求中我们介绍过TanStackQuery.其实TanStack是一个由TannerLinsl
  • Spring Boot 实现不同用户不同访问权限 周凡123 springbootjava
    前提近期在使用SpringBoot，用户角色被分为管理者和普通用户；角色不同，权限也就存在不同。在SpringBoot里实现不同用户拥有不同访问权限，可借助SpringSecurity框架达成。实现1.添加必要依赖首先要在pom.xml里添加SpringSecurity和JPA的依赖。org.springframework.bootspring-boot-starter-securityorg.s
  • 学习如何让STM32在运行时改变PWM频率和占空比 ZERONG_H 嵌入式stm32嵌入式硬件单片机
    前言最近有个需求是关于调节占空比去控制风扇实现三挡风力大小的。由于硬件供电和控制成本等原因，普通的芯片支撑不起几个风扇同时转起来，于是就沿用了一个神奇的电路方案，但是这个方案在输出占空比的时候达不到真正的占空比（这里解释不清），因为电机类需要特别注意频率的大小，频率太高或者太低或多或少都会让人耳接受不了，反正是需要在运行时同时改变PWM频率和占空比，本文着重于应用，不讲原理。一、定时器介绍使用的是
  • 2、 成为世界顶尖3D游戏程序员之路 kdbshi 3D游戏程序员编程技能图形设计
    成为世界顶尖3D游戏程序员之路1.成为世界顶尖3D游戏程序员的重要性游戏开发是一个充满挑战和机遇的领域，尤其对于那些对3D游戏编程感兴趣的青少年来说，掌握相关技能不仅能实现个人梦想，还能在未来的职业生涯中占据优势。本文将探讨成为世界顶尖3D游戏程序员所需的技能和获取这些技能的方法，帮助你在这个充满竞争的行业中脱颖而出。2.所需技能2.1编程技能编程是游戏开发的核心技能。掌握编程语言和技术是成为优秀
  • 青少年编程与数学 02-022 专业应用软件简介 05 三维工程设计软件：SolidWorks 明月看潮生 编程与数学第02阶段青少年编程编程与数学应用软件工程设计SolidWorks
    青少年编程与数学02-022专业应用软件简介05三维工程设计软件：SolidWorks一、法国达索系统（DassaultSystèmes）公司简介（一）公司历史（二）公司发展（三）公司文化与价值观二、SolidWorks软件主要特色（一）直观的用户界面（二）强大的三维建模能力（三）全面的设计验证工具（四）高效的协作功能三、SolidWorks软件的核心功能（一）三维建模（二）装配设计（三）工程图生
  • 提升首屏加载的秘密武器：一文讲透 CDN 加速核心逻辑 网罗开发 实战源码前端jsonjavascript
    网罗开发（小红书、快手、视频号同名）  大家好，我是展菲，目前在上市企业从事人工智能项目研发管理工作，平时热衷于分享各种编程领域的软硬技能知识以及前沿技术，包括iOS、前端、HarmonyOS、Java、Python等方向。在移动端开发、鸿蒙开发、物联网、嵌入式、云原生、开源等领域有深厚造诣。图书作者：《ESP32-C3物联网工程开发实战》图书作者：《SwiftUI入门，进阶与实战》超级个体：CO
  • 【Actix Web】Rust Web开发实战：Actix Web框架全面指南（2025企业级应用版） 知识产权13937636601 计算机前端rust开发语言
    在2025年高并发、低延迟成为Web服务核心指标的背景下，ActixWeb凭借异步Actor模型与零成本抽象，成为Rust生态中生产环境部署率最高的Web框架。本指南深入解析ActixWeb4.0核心技术，覆盖百万级并发架构设计、内存安全防线构建、云原生集成方案三大实战维度，通过电商秒杀系统、物联网数据平台两大案例，详解如何实现50万QPS下毫秒级响应。提供全链路性能调优清单（包括PGO编译优化+
  • STM32入门教程：红外遥控应用 MyM满满 stm32单片机嵌入式硬件
    STM32入门教程：红外遥控应用一、介绍红外遥控是现代电子产品中广泛应用的一项技术，通过红外线的收发实现设备之间的通信和控制。在本教程中，我们将使用STM32微控制器实现一个简单的红外遥控应用。主要内容包括红外遥控器的编码与解码，以及STM32的红外接收与发送功能的使用。二、硬件准备为了完成这个项目，我们需要以下硬件：STM32开发板（例如STM32F103C8T6）红外遥控器红外接收模块（例如红
  • 信创产品合规认证的一般流程，标准化产品、项目型产品 极创信息 健康医疗深度学习opencvsqliteeclipsegithubgit
    信创产品合规认证流程分为标准化产品（通用产品）和项目型产品（特定项目交付）。核心流程概述基础适配与互认选择适配环境：确定目标适配的国产CPU架构（鲲鹏、飞腾、龙芯、兆芯、海光、申威等）、操作系统（麒麟、统信UOS、中科方德等）、数据库、中间件等。产品适配：在选定的信创环境下进行安装、部署、功能测试、性能调优等。获取证书：1.信创产品兼容性互认证证书：这是第一步也是最关键的证书。通常由产品厂商与基础
  • DS18B20温度传感器的Verilog初始化程序实战指南 北海有座岛
    本文还有配套的精品资源，点击获取简介：DS18B20是一款适用于宽温度范围的高精度数字温度传感器，采用Verilog语言实现其初始化程序，以便能够正确地在系统中运行。本指南详细介绍了DS18B20的初始化过程，包括电源配置、分辨率选择、报警阈值设定等，并解释了如何使用Verilog来控制和通信DS18B20传感器，对于嵌入式系统设计和硬件描述语言的学习具有重要价值。1.DS18B20传感器概述1.
  • Django REST framework - 验证器 pythondjango
    验证器可以用于在不同类型字段之间重用验证逻辑。大多数情况下，您在处理RESTframework中的验证时，仅依赖默认字段验证，或编写序列化器或字段类的显式验证方法即可。但是，有时您可能希望将验证逻辑放置在可重用的组件中，以便在代码库中轻松地重复使用。这可以通过使用验证器函数和验证器类来实现。RESTframework中的验证DjangoRESTframework序列化器中的验证与Django的Mo
  • Python 爬虫实战：抓取哔哩哔哩收藏夹视频（API 逆向 + 视频分类整理） 西攻城狮北 python爬虫音视频
    引言哔哩哔哩（B站）作为国内知名的视频分享平台，拥有丰富多样的视频资源和活跃的用户社区。对于视频创作者、数据分析人员或爬虫学习者来说，抓取B站收藏夹中的视频数据，不仅能帮助我们更好地了解用户喜好和视频内容，还能为创作和研究提供有力支持。本文将深入浅出地讲解如何通过Python爬虫实现抓取哔哩哔哩收藏夹视频，并对其进行分类整理，涵盖从环境搭建、API逆向分析到数据处理与存储等关键步骤，旨在为读者提供
  • 桥岛隧大型工程可视化监测平台 | 图扑数字孪生
    在科技与产业深度融合的浪潮下，交通基建数字化、智能化升级成为“新基建”发展的核心动力。《“十四五”现代综合交通运输体系发展规划》指明方向，要求2030年实现基础设施全要素全周期数字化。深中通道作为全球首个“桥、岛、隧、水下互通”一体化跨海集群工程，其复杂结构带来世界级监测难题。借助图扑软件HT实现深中通道的建设与运营的数字化升级，为交通基建行业迈向高效、智能的未来提供了有力支撑。效果展示图扑软件凭
  • 【Python学习】可视化图表-使用matplotlib绘制不同种类散点图 西攻城狮北 Python实用案例python学习matplotlib可视化图形
    一、引言在数据可视化领域，散点图是一种极其强大的工具，它能够直观地展示变量之间的关系、数据分布的模式以及潜在的聚类情况等。通过散点图，我们可以轻松地发现数据中的异常值、相关性以及其他隐藏的特征。Python的matplotlib库提供了丰富而灵活的功能，可以帮助我们绘制出各种类型的散点图，以满足不同的数据分析和展示需求。本文将深入探讨如何使用matplotlib绘制多种类型的散点图，并提供详细的代
  • C#.NET 依赖注入详解 c#.net
    简介在C#.NET中，依赖注入（DependencyInjection，简称DI）是一种设计模式，用于实现控制反转（InversionofControl，IoC），以降低代码耦合、提高可测试性和可维护性。依赖注入是将一个对象的依赖（即它所需的其他对象或服务）通过外部提供（注入）的方式传递给它，而不是由对象自身创建或查找依赖。其核心思想是将对象的创建和依赖管理交给容器（IoC容器），从而解耦代码。D
  • Dubbo3泛化调用实战指南
    Dubbo3的泛化调用允许客户端在不依赖服务端接口JAR包的情况下发起远程调用，适用于动态调用、网关转发等场景。以下是具体实现方式：一、客户端泛化调用API编程方式通过GenericService接口动态调用，参数和返回值使用Map或基本类型表示：//创建泛化引用配置ReferenceConfigreference=newReferenceConfig<>();reference.setInter
  • Python 爬虫实战：动态数据+定时任务+价格预测全链路解析 西攻城狮北 python爬虫开发语言
    一、动态数据捕获技术栈1.1目标网站分析（以某OTA平台为例）实现原理：本节演示如何使用Selenium自动化浏览器访问机票查询页面。选择Selenium而非直接请求API的原因在于：目标网站采用JavaScript动态渲染价格数据需要模拟用户操作（如选择日期、舱位）触发数据加载需处理反爬机制（如Cookie验证、行为检测）fromseleniumimportwebdriverfromseleni
  • LabVIEW键盘鼠标监测控制 LabVIEW开发 LabVIEW知识LabVIEW参考程序LabVIEW设备控制LabVIEW知识LabVIEW程序LabVIEW功能
    通过InputDeviceControlVIs，实现对键盘和鼠标活动的监测。通过AcquireInputDataVI在循环中持续获取输入数据，InitializeKeyboard与InitializeMouseVIs先获取设备ID引用，用于循环内监测操作；运行时可输出按键信息（KeysPressed）、鼠标水平/垂直位置（Horizontal/VerticalMousePosition）、鼠标按键
  • mondb入手 木zi_鸣 mongodb
    windows 启动mongodb  编写bat文件， mongod --dbpath D:\software\MongoDBDATA mongod --help  查询各种配置 配置在mongob 打开批处理，即可启动，27017原生端口，shell操作监控端口  扩展28017，web端操作端口 启动配置文件配置， 数据更灵活 
  • 大型高并发高负载网站的系统架构 bijian1013 高并发负载均衡
            扩展Web应用程序 一.概念         简单的来说，如果一个系统可扩展，那么你可以通过扩展来提供系统的性能。这代表着系统能够容纳更高的负载、更大的数据集，并且系统是可维护的。扩展和语言、某项具体的技术都是无关的。扩展可以分为两种：         1.
  • DISPLAY变量和xhost(原创) czmmiao display
    DISPLAY 在Linux/Unix类操作系统上, DISPLAY用来设置将图形显示到何处. 直接登陆图形界面或者登陆命令行界面后使用startx启动图形, DISPLAY环境变量将自动设置为:0:0, 此时可以打开终端, 输出图形程序的名称(比如xclock)来启动程序, 图形将显示在本地窗口上, 在终端上输入printenv查看当前环境变量, 输出结果中有如下内容:DISPLAY=:0.0
  • 获取B/S客户端IP 周凡杨 java编程jspWeb浏览器
       最近想写个B/S架构的聊天系统，因为以前做过C/S架构的QQ聊天系统，所以对于Socket通信编程只是一个巩固。对于C/S架构的聊天系统，由于存在客户端Java应用，所以直接在代码中获取客户端的IP，应用的方法为：    String ip = InetAddress.getLocalHost().getHostAddress(); 然而对于WEB
  • 浅谈类和对象 朱辉辉33 编程
        类是对一类事物的总称，对象是描述一个物体的特征，类是对象的抽象。简单来说，类是抽象的，不占用内存，对象是具体的， 占用存储空间。     类是由属性和方法构成的，基本格式是public  class 类名{ //定义属性 private/public 数据类型 属性名； //定义方法 publ
  • android activity与viewpager+fragment的生命周期问题 肆无忌惮_ viewpager
    有一个Activity里面是ViewPager，ViewPager里面放了两个Fragment。 第一次进入这个Activity。开启了服务，并在onResume方法中绑定服务后，对Service进行了一定的初始化，其中调用了Fragment中的一个属性。 super.onResume(); bindService(intent, conn, BIND_AUTO_CREATE);
  • base64Encode对图片进行编码 843977358 base64图片encoder
    /** * 对图片进行base64encoder编码 * * @author mrZhang * @param path * @return */ public static String encodeImage(String path) { BASE64Encoder encoder = null; byte[] b = null; I
  • Request Header简介 aigo servlet
    当一个客户端(通常是浏览器)向Web服务器发送一个请求是，它要发送一个请求的命令行，一般是GET或POST命令，当发送POST命令时，它还必须向服务器发送一个叫“Content-Length”的请求头(Request   Header)   用以指明请求数据的长度，除了Content-Length之外，它还可以向服务器发送其它一些Headers，如：    
  • HttpClient4.3 创建SSL协议的HttpClient对象 alleni123 httpclient爬虫ssl
    public class HttpClientUtils { public static CloseableHttpClient createSSLClientDefault(CookieStore cookies){ SSLContext sslContext=null; try { sslContext=new SSLContextBuilder().l
  • java取反 -右移-左移-无符号右移的探讨 百合不是茶 位运算符 位移
    取反： 在二进制中第一位，1表示符数，0表示正数 byte a = -1; 原码：10000001 反码：11111110 补码：11111111 //异或: 00000000 byte b = -2; 原码：10000010 反码：11111101 补码：11111110 //异或: 00000001
  • java多线程join的作用与用法 bijian1013 java多线程
            对于JAVA的join，JDK 是这样说的：join public final void join （long millis ）throws InterruptedException Waits at most millis milliseconds for this thread to die. A timeout of 0 means t
  • Java发送http请求(get 与post方法请求) bijian1013 javaspring
    PostRequest.java package com.bijian.study; import java.io.BufferedReader; import java.io.DataOutputStream; import java.io.IOException; import java.io.InputStreamReader; import java.net.HttpURL
  • 【Struts2二】struts.xml中package下的action配置项默认值 bit1129 struts.xml
    在第一部份，定义了struts.xml文件，如下所示：   <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN" "http://struts.apache.org/dtds/struts
  • 【Kafka十三】Kafka Simple Consumer bit1129 simple
    代码中关于Host和Port是割裂开的，这会导致单机环境下的伪分布式Kafka集群环境下，这个例子没法运行。 实际情况是需要将host和port绑定到一起，   package kafka.examples.lowlevel; import kafka.api.FetchRequest; import kafka.api.FetchRequestBuilder; impo
  • nodejs学习api ronin47 nodejs api
    NodeJS基础 什么是NodeJS JS是脚本语言，脚本语言都需要一个解析器才能运行。对于写在HTML页面里的JS，浏览器充当了解析器的角色。而对于需要独立运行的JS，NodeJS就是一个解析器。 每一种解析器都是一个运行环境，不但允许JS定义各种数据结构，进行各种计算，还允许JS使用运行环境提供的内置对象和方法做一些事情。例如运行在浏览器中的JS的用途是操作DOM，浏览器就提供了docum
  • java-64.寻找第N个丑数 bylijinnan java
    public class UglyNumber { /** * 64.查找第N个丑数 具体思路可参考 [url] http://zhedahht.blog.163.com/blog/static/2541117420094245366965/[/url] * 题目：我们把只包含因子 2、3和5的数称作丑数（Ugly Number）。例如6、8都是丑数，但14
  • 二维数组（矩阵）对角线输出 bylijinnan 二维数组
    /** 二维数组 对角线输出 两个方向 例如对于数组： { 1, 2, 3, 4 }, { 5, 6, 7, 8 }, { 9, 10, 11, 12 }, { 13, 14, 15, 16 }, slash方向输出： 1 5 2 9 6 3 13 10 7 4 14 11 8 15 12 16 backslash输出： 4 3
  • [JWFD开源工作流设计]工作流跳跃模式开发关键点(今日更新) comsci 工作流
       既然是做开源软件的,我们的宗旨就是给大家分享设计和代码,那么现在我就用很简单扼要的语言来透露这个跳跃模式的设计原理    大家如果用过JWFD的ARC-自动运行控制器,或者看过代码,应该知道在ARC算法模块中有一个函数叫做SAN(),这个函数就是ARC的核心控制器,要实现跳跃模式,在SAN函数中一定要对LN链表数据结构进行操作,首先写一段代码,把
  • redis常见使用 cuityang redis常见使用
    redis 通常被认为是一个数据结构服务器，主要是因为其有着丰富的数据结构 strings、map、 list、sets、 sorted sets 引入jar包 jedis-2.1.0.jar  (本文下方提供下载) package redistest; import redis.clients.jedis.Jedis; public class Listtest
  • 配置多个redis dalan_123 redis
    配置多个redis客户端 <?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.springframework.org/schema/beans"       xmlns:xsi=&quo
  • attrib命令 dcj3sjt126com attr
      attrib指令用于修改文件的属性.文件的常见属性有:只读.存档.隐藏和系统.    只读属性是指文件只可以做读的操作.不能对文件进行写的操作.就是文件的写保护.    存档属性是用来标记文件改动的.即在上一次备份后文件有所改动.一些备份软件在备份的时候会只去备份带有存档属性的文件. 
  • Yii使用公共函数 dcj3sjt126com yii
    在网站项目中，没必要把公用的函数写成一个工具类，有时候面向过程其实更方便。 在入口文件index.php里添加 require_once('protected/function.php'); 即可对其引用，成为公用的函数集合。 function.php如下：   <?php /**   * This is the shortcut to D
  • linux 系统资源的查看（free、uname、uptime、netstat） eksliang netstatlinux unamelinux uptimelinux free
    linux 系统资源的查看 转载请出自出处：http://eksliang.iteye.com/blog/2167081   http://eksliang.iteye.com 一、free查看内存的使用情况 语法如下：   free [-b][-k][-m][-g] [-t] 参数含义 -b:直接输入free时，显示的单位是kb我们可以使用b(bytes),m
  • JAVA的位操作符 greemranqq 位运算JAVA位移<<>>>
    最近几种进制，加上各种位操作符，发现都比较模糊，不能完全掌握，这里就再熟悉熟悉。   1.按位操作符 ：    按位操作符是用来操作基本数据类型中的单个bit,即二进制位，会对两个参数执行布尔代数运算，获得结果。    与（&）运算：    1&1 = 1, 1&0 = 0, 0&0 &
  • Web前段学习网站 ihuning Web
      Web前段学习网站 菜鸟学习：http://www.w3cschool.cc/   JQuery中文网：http://www.jquerycn.cn/   内存溢出：http://outofmemory.cn/#csdn.blog   http://www.icoolxue.com/   http://www.jikexue
  • 强强联合：FluxBB 作者加盟 Flarum justjavac r
    原文：FluxBB Joins Forces With Flarum作者：Toby Zerner译文：强强联合：FluxBB 作者加盟 Flarum译者：justjavac FluxBB 是一个快速、轻量级论坛软件，它的开发者是一名德国的 PHP 天才 Franz Liedke。FluxBB 的下一个版本(2.0)将被完全重写，并已经开发了一段时间。FluxBB 看起来非常有前途的，
  • java统计在线人数（session存储信息的） macroli javaWeb
    这篇日志是我写的第三次了 前两次都发布失败！郁闷极了！   由于在web开发中常常用到这一部分所以在此记录一下，呵呵，就到备忘录了！ 我对于登录信息时使用session存储的，所以我这里是通过实现HttpSessionAttributeListener这个接口完成的。 1、实现接口类，在web.xml文件中配置监听类，从而可以使该类完成其工作。 public class Ses
  • bootstrp carousel初体验 快速构建图片播放 qiaolevip 每天进步一点点学习永无止境bootstrap纵观千象
    img{ border: 1px solid white; box-shadow: 2px 2px 12px #333; _width: expression(this.width > 600 ? "600px" : this.width + "px"); _height: expression(this.width &
  • SparkSQL读取HBase数据，通过自定义外部数据源 superlxw1234 sparksparksqlsparksql读取hbasesparksql外部数据源
    关键字：SparkSQL读取HBase、SparkSQL自定义外部数据源     前面文章介绍了SparSQL通过Hive操作HBase表。   SparkSQL从1.2开始支持自定义外部数据源(External DataSource)，这样就可以通过API接口来实现自己的外部数据源。这里基于Spark1.4.0，简单介绍SparkSQL自定义外部数据源，访
  • Spring Boot 1.3.0.M1发布 wiselyman spring boot
        Spring Boot 1.3.0.M1于6.12日发布，现在可以从Spring milestone repository下载。这个版本是基于Spring Framework 4.2.0.RC1,并在Spring Boot 1.2之上提供了大量的新特性improvements and new features。主要包含以下：   1.提供一个新的sprin
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他