0清婉0
0清婉0

H5竖屏模板

【html-头部】

【html-内容区】

   

   

为了更好的体验，请使用竖屏浏览

   

   

       

           

           

           

0%

       

   

   

   

       

           

           

               

第一页

               

                    内容内容

               

               

           

           

           

               

第二页

               

标题内容

               

           

           

           

               

第三页

               

标题内容

               

           

           

           

               

第四页

               

标题内容

               

           

       

   

【html-尾部】

【css】

/*reset*/

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,

header,menu,nav,output,ruby,section,summary,time,mark,audio,video{

margin: 0;padding: 0;border: 0;font: inherit;}

body{font-family: Arial, "STHeiti", Helvetica Neue, Helvetica, sans-serif;

background: #fff;font-size: 14px;height: 100%;line-height: 1.5;

-webkit-tap-highlight-color: transparent;margin: 0;padding: 0;color:#000}

/*

STHeiti 苹果黑体

-webkit-tap-highlight-color: transparent;只用于iOS (iPhone和iPad)。

当你点击一个链接或者通过Javascript定义的可点击元素的时候，它就会出现一个半透明的灰色背景。

*/

button,input {line-height: normal;}

button,select {text-transform: none;}  /*定义带有小写字母和大写字母的标准的文本*/

button,html input[type="button"],input[type="reset"],input[type="submit"] {

-webkit-appearance: button;  /*将按钮设置成iOS中默认原生控件的样式*/

cursor: pointer;

}

button[disabled],html input[disabled] {cursor: default;}

input[type="checkbox"],input[type="radio"] {

box-sizing: border-box;  /*减去边框和内边距才能得到内容的宽度和高度*/

padding: 0;}

input[type="search"] {

-webkit-appearance: textfield;  /*将元素呈现为文本字段*/

-moz-box-sizing: content-box;  /*在宽度和高度之外绘制元素的内边距和边框,即padding和border不能算在内*/

-webkit-box-sizing: content-box;

box-sizing: content-box;

}

input[type="search"]::-webkit-search-cancel-button,

input[type="search"]::-webkit-search-decoration {-webkit-appearance: none;} /*去除浏览器默认样式*/

button::-moz-focus-inner,input::-moz-focus-inner {

border: 0;padding: 0;}

textarea {overflow: auto;vertical-align: top;}

table {border-collapse: collapse;  /*边框会合并为一个单一的边框*/

border-spacing: 0; /*相邻单元格的边框间的距离*/}

ul li {list-style: none;}

html,body {position: relative;height: 100%;}

/********横竖屏*******/

.page-landscape {width: 100vw;height: 100vh;background: #333;position: relative;

z-index: 999;display: none;}

.page-landscape img {width: 1.11666667rem;height: 1.81666667rem;position: absolute;

left: 4.58333333rem;top: 0.83333333rem;

-webkit-animation: rotateImg infinite 1.5s ease-in-out;

animation: rotateImg infinite 1.5s ease-in-out;}

.page-landscape h3 {font-size: 16px;position: absolute;color: #fff;left: 50%;

top: 3.5rem;transform: translate(-50%, -50%);/*实现水平垂直居中*/}

@keyframes rotateImg {

    0% {transform: rotate(0deg);}

    35% {transform: rotate(90deg);}

    65% {transform: rotate(90deg);}

    100% {transform: rotate(0deg);}

}

.page-portrait {

    width: 100vw;

    height: 100vh;

    position: absolute;

    left: 0;

    top: 0;

    overflow: hidden;

    -webkit-overflow: hidden;

    background-image: url(../img/bg.png);

    background-size: contain;

  }

  .load-page {

    width: 100%;

    height: 100%;

    position: absolute;

    left: 0;

    top: 0;

  }

  .load-page .img-load-now {

    width: 100%;

    text-align: center;

    position: absolute;

    left: 0;

    top: 50%;

    transform: translate(0, -50%);

  }

  .load-page .img-load-now .loading-img {

    width: 0.32rem;

    height: 0.32rem;

    margin-bottom: 0.53333333rem;

  }

  .load-page .img-load-now p {

    width: 100%;

    text-align: center;

  }

  /*************************正文************************/

  .page-box {

    width: 100vw;

    height: 100vh;

    position: relative;

    display: none;

  }

  .swiper-slide {

    text-align: center;

    font-size: 18px;

    background: #fff;

    /* Center slide text vertically */

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    -webkit-justify-content: center;

    justify-content: center;

    -webkit-box-align: center;

    -ms-flex-align: center;

    -webkit-align-items: center;

    align-items: center;

  }

  .swiper-slide h1 {

    width: 100%;

    text-align: center;

    font-size: 0.64rem;

    margin: 0.26666667rem;

  }

  .pageOne {

    background: #50abe9;

  }

  .pageTwo {

    background: #888;

  }

  .pageThree {

    background: #990;

  }

  .pageFour {

    background: #808;

  }

  .arrow {

    width: 0.84rem;

    height: 0.64rem;

    position: absolute;

    bottom: 0.8rem;

    left: 4.58rem;

  }

  .up {

    animation: up 1.5s  linear infinite;

    -webkit-animation: up 1.5s  linear infinite;

  }

  @keyframes up {

    0% {

      opacity: 0;

      transform: translateY(0);

      -webkit-transform: translateY(0);

    }

    10% {

      opacity: 1;

      transform: translateY(0);

      -webkit-transform: translateY(0);

    }

    100% {

      opacity: 1;

      transform: translateY(6px);

      -webkit-transform: translateY(6px);

    }

  }

  @-webkit-keyframes up {

    0% {

      opacity: 0;

      transform: translateY(0);

      -webkit-transform: translateY(0);

    }

    10% {

      opacity: 1;

      transform: translateY(0);

      -webkit-transform: translateY(0);

    }

    100% {

      opacity: 1;

      transform: translateY(6px);

      -webkit-transform: translateY(6px);

    }

  }

【js】

/******rem *******/

(function(win){

    var remCalc = {};

    var docEl = win.document.documentElement,

        tid,

        hasRem = true;

    hasZoom = true;

    designWidth = 750;

    function refresh(){

        var width = docEl.getBoundingClientRect().width;  //获取移动设备的宽度

        if(hasRem){

            var rem = width/10;  //将屏幕宽度分成10份

            docEl.style.fontSize = rem + "px";  //设置html的字号为第二行的值

            remCalc.rem = rem;

            var actualSize = parseFloat(window.getComputedStyle(document.documentElement)["font-size"]);

            if(actualSize!== rem && actualSize>0 && Math.abs(actualSize-rem)>1){

                var remScaled = rem*rem/actualSize;

                docEl.style.fontSize = remScaled + "px";

            }

        }

        if(hasZoom){

            var style = document.getElementById('y_style');

            if(!style){

                style = document.createElement('style');

                style.id = 'y_style';

            }

            style.innerHTML = '._z{zoom:'+ width/designWidth + '}';

            document.getElementsByTagName('head')[0].appendChild(style);

        }

    }

    function dbcRefresh(){

        clearTimeout(tid);

        tid = setTimeout(refresh,100);

    }

    win.addEventListener("resize",function(){

        dbcRefresh()

    },false);

    win.addEventListener("pageshow",function(e){

        if(e.persisted){

            dbcRefresh()

        }

    },false);

    refresh();

    if(hasRem){

        remCalc.refresh = refresh;

        remCalc.rem2px = function(d){

            var val = parseFloat(d)/this.rem;

            if(typeof d==="string" && d.match(/px$/)){

                val+="rem";

            }

            return val

        };

        win.remCalc = remCalc;

    }

})(window);

function ImgLoadingByFile(imgArray,loadPageID,loadTxtID,showpageID){

    function complete(long){

        var timer = setTimeout(function(){

            $('#'+loadPageID).hide();

            $('#'+showpageID).show();

            swiper = new Swiper('.swiper-container', {

                pagination: '.swiper-pagination',

                paginationClickable: true,

                direction: 'vertical',

                onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit

                    swiperAnimateCache(swiper); //隐藏动画元素

                    swiperAnimate(swiper); //初始化完成开始动画

                },

                onSlideChangeEnd: function(swiper){

                    //console.log(333);

                    swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画

                }

            });

            $('.arrow').click(function(){

                swiper.slideNext();

            });

            clearTimeout(timer);

        },long);

    }

    if(sessionStorage.getItem("pageloaded")){

        $('#'+loadTxtID).html('100%');

        complete(1300);

    }else{

        var imgLoad = 0;

        var btime = new Date();

        if(imgArray.length>0){

            var imgTotal = imgArray.length;

            var percent = 0;

            var img = [];

            for(var i = 0;i

                img[i] = new Image();

                img[i].src=imgArray[i];

                img[i].onload = function(){

                    imgLoad++;

                    percent = parseInt(imgLoad/imgTotal*100);

                    $('#'+loadTxtID).html(percent+'%');

                    console.log(percent);

                    if(percent>=100){

                        var etime = new Date();

                        console.log(etime-btime);

                        if(etime-1000>btime){

                            complete(100);

                        }else{

                            complete(200);

                        }

                        //alert(etime-btime);

                        sessionStorage.setItem("pageloaded", "true");

                    }

                }

            }

        }

    }

}

//横屏

function landscape(){

    //var w = window.innerWidth;

    //var h = window.innerHeight;

    var w = window.Utils.windowW();

    var h = window.Utils.windowH();

    $("body").css({"width":w,"height":h});

    $('#page-landscape').css({"width":w,"height":h}).show();

    $('#page-portrait').css({"width":w,"height":h});

    //$('#page-landscape').show();

}

var firstInit = true;

//竖屏

function portrait(){

    var w = window.Utils.windowW();

    var h = window.Utils.windowH();

    //初始化加载

    if(firstInit){

        $("body").css({"width":w,"height":h});

        $('#page-portrait').css({"width":w,'height':h}).show();

        $('#page-portrait').show();

        $('#page-landscape').hide();

        var imgFile = [

            "imgs/music-close.png",

            "imgs/music-open.png"

        ];

        ImgLoadingByFile(imgFile,'loadingPage','loadTxt','pageContainer');

        firstInit = false;

    }else {

        //$('#page-portrait').show();

        //$('#page-landscape').hide();

        $("body").css({"width":w,"height":h});

        $('#page-portrait').css({"width":w,'height':h}).show();

        $('#page-landscape').hide();

    }

}

(function() {

    "use strict";

    function Utils() {

    }

    Utils.isWeiXin = function(){

        return navigator.userAgent.match(/MicroMessenger\/([\d\.]+)/);

        //判断是否在微信浏览器内

    };

    Utils.isQQ = function(){

        return navigator.userAgent.ua.match(/QQ\/([\d\.]+)/);

    };

    Utils.isQZone = function(){

        return navigator.userAgent.ua.indexOf("Qzone/") !== -1;

    };

    Utils.isIos = function() {

        return !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);

    };

    Utils.isIPhone = function() {

        return navigator.userAgent.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1;

    };

    Utils.isIpad = function() {

        return navigator.userAgent.indexOf('iPad') > -1;

    };

    Utils.isAndroid = function() {

        var u = navigator.userAgent;

        return navigator.userAgent.indexOf('Android') > -1 || u.indexOf('Linux') > -1;

    };

    Utils.isMobile = function() {

        // var u = navigator.userAgent;

        return navigator.userAgent.match(/(iPhone|iPod|Android|ios|SymbianOS)/i) != null;

    };

    // ## 屏幕方向

    Utils.isPortrait = function() {

        if (!Utils.isMobile()) {

            //alert(111);

            return true;

        }

        // 安卓版 微信里面 只用判断 width 和 height

        if (Utils.isAndroid() && Utils.isWeiXin()) {

            if (Utils.windowW() < Utils.windowH()) {

                //alert(22);

                return true;

            } else {

                //alert(331);

                return false;

            }

        }

        var orientation = window['orientation'];

        if (orientation||orientation==0) {

            if (orientation == 90 || orientation == -90) {

                return false;

            }else{

                return true;

            }

        } else {

            if (Utils.windowW() < Utils.windowH()) {

                return true;

            } else {

                return false;

            }

        }

    };

    // ## jquery 获取 window 的宽度

    Utils.windowW = function() {

        // var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;

        return $(window).width();

    };

    // ## jquery 获取 window 的高度

    Utils.windowH = function() {

        return $(window).height();

    };

    window.Utils = Utils;

}());

$(function(){

    onResize();

    if (!!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {

        window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", onResize, false);

    }else{

        window.addEventListener( "resize", onResize, false);

    }

});

function  onResize() {

    if(Utils.isPortrait()){

        if(!!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)){

            var timer = setTimeout(function(){

                portrait();

                clearTimeout(timer);

            },100);

        }else{

            portrait();

        }

    } else {

        if(!!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)){

            var timer = setTimeout(function(){

                landscape();

                clearTimeout(timer);

            },100);

        }else{

            landscape();

        }

    }

}

你可能感兴趣的:(H5竖屏模板)

  • ES-LTR粗排模块 poins jenkins运维
    ES-LTR粗排模块官方资源：https://github.com/HeiBoWang/elasticsearch-learning-to-rankElasticsearch学习排名插件使用机器学习提高搜索相关性排名。它为维基媒体基金会和Snagajob等地方的搜索提供了动力！这个插件有什么功能此插件：允许您在Elasticsearch中存储特征（Elasticsearch查询模板）记录特征得分（
  • VUE 页面禁止缩放（华为平板浏览器可能失效） 唐屁屁儿 JSvuewebviewjavascript
    h5页面移动端禁止缩放、web页面禁止浏览器缩放移动端优先，可禁止用户缩放和双击放大；在App.vue中的script内的方法里加入以下代码：window.onload=function(){document.addEventListener('touchstart',function(event){if(event.touches.length>1){event.preventDefault()
  • k8s入门到实战（十）—— CronJob详细介绍及使用示例 一弓虽 k8s学习kubernetes容器云原生
    CronJob什么是CronJob在k8s中，CronJob是一种用于定期执行任务的资源对象。它基于Cron表达式，允许您在指定的时间间隔内自动运行容器化的任务。CronJob可以定义以下属性：schedule：指定任务执行的时间表，使用标准的Cron表达式语法。例如，“0****”表示每小时执行一次任务。jobTemplate：定义要执行的任务的模板，通常是一个Pod模板。这个模板包含了任务所需
  • C++ 如何去认识模板 SuhyOvO C++c++开发语言
    引言:C++模板是泛型编程的基石,允许程序员定义可与任何数据类型协作的函数和类。这种机制极大地增加了代码的灵活性和复用性,是C++最强大的特性之一。本文将深入探讨C++模板的概念、优势以及使用方法,帮助读者掌握这一重要的编程工具。文章目录模板简介模板的优势一、模板基础1.1模板的概念1.2函数模板1.3类模板二、模板进阶2.1模板的实例化2.2模板的特化2.3模板的默认参数2.4模板的嵌套三、模板
  • Vue：为什么要使用v-cloak 刻刻帝的海角 vue.js前端javascript
    Vue.js是一种流行的JavaScript框架，它使我们能够构建交互性强大的用户界面。在Vue.js中，v-cloak是一个指令，用于解决在页面加载时出现的闪烁问题。本文将介绍如何使用v-cloak及代码来优化Vue.js应用程序的渲染效果。引言当我们使用Vue.js构建应用程序时，有时会遇到一个问题：在页面加载时，由于Vue.js需要一定的时间来解析和渲染模板，会导致页面上显示出未经处理的Mu
  • P5963 [BalticOI ?] Card 卡牌游戏 贪心 golemon. 算法题游戏算法
    [P5963BalticOI?]Card卡牌游戏【来源请求】-洛谷|计算机科学教育新生态(luogu.com.cn)贪心模板题。存在(x1,y1)(x_1,y_1)(x1,y1)，(x2,y2)(x_2,y_2)(x2,y2)，假设xi>yix_i>y_ixi>yi，显然得认为：−x1+y2-x_1+y_2−x1+y2是最优得的，那么有：−x1+y2≤−x2+y1-x_1+y_2\le-x_2+y
  • 突破编程_C++_C++11新特性（type_traits的概念以及核心类型特性） breakthrough_01 c++开发语言
    1type_traits的概述type_traits是C++标准模板库（STL）中的一个头文件，它定义了一系列模板类，这些模板类在编译期获取某一参数、某一变量、某一个类等的类型信息，主要用于进行静态检查。通过使用type_traits，程序员可以在编译时就获得关于类型的详细信息，从而可以在不实际运行程序的情况下进行类型相关的优化和检查。type_traits中的内容主要可以分为以下几类：辅助基类：
  • html5 websocket 手机,websocket在h5上正常，编译到手机上就连不上 猫研所 html5websocket手机
    对接的网易云信微信IMSDK，在h5上能建立起连接，在手机端不行，截图是h5的链接，下面是app的日志：20:10:34.247连接websocket参数"wss://wlnimsc0.netease.im/socket.io/1/websocket/378166b5-af18-4372-a0a5-05aee5a1d882"atuni-app:///sdk/yunxin-wx/vendors/NI
  • uniapp 使用mqtt后真机调试白屏？或者 WebSocket || WS is not a constructor xiaoli_qidian uni-app前端
    1.都说高版本mqtt不稳定，所有安装3.0的吧npmimqtt@32.把连接替换成功这个代码//#ifdefH5console.log('h5')client=mqtt.connect(`ws://120.25.155.46:8083/mqtt`,options)//#endif//#ifdefAPP-PLUSconsole.log('app')client=mqtt.connect(`wx:/
  • 关于uniapp上使用websocket在H5能用，在真机不能用的问题 木公176 uni-appwebsocket网络协议
    不要用本地电脑开的websocket来连接，真机（手机端）连不到本地websocket。uni.connectSocket({url:'ws://localhost:3000/chat'});解决办法：部署到服务器上面，用一个公网的websocket地址，真机上面可以正常使用。部署到服务器的时候记得开放3000端口，不然也不行。uni.connectSocket({url:'ws://8.13X.
  • JS的设计模式（23种） 是个车迷 JavaScriptjavascript设计模式开发语言
    JavaScript设计模式是指在JavaScript编程中普遍应用的一系列经过验证的最佳实践和可重用的解决方案模板，它们用来解决在软件设计中频繁出现的问题，如对象的创建、职责分配、对象间通信以及系统架构等。设计模式并不特指某个具体的代码片段，而是一种描述在特定上下文中如何组织程序结构和对象交互的通用指导原则。JavaScript设计模式涵盖了创建型模式（处理对象创建的方式）、结构型模式（关注对象
  • 有趣的DNA聚合酶 临窗听风雨
    UniPort数据库登记的DNA聚合酶被实验证实的都有1000多种，想要都介绍恐怕得写一本书。我选择了三个比较有趣的来聊一聊：它可以不依赖引物，仅在一种叫做末端蛋白的辅助下，起始DNA的复制。可以不依赖模板进行DNA合成的聚合酶。能够在无引物情况下进行DNA合成的聚合酶。Phi29DNAPolymerasePhi29DNAPolymerase（后面简称Phi29）是从枯草芽孢杆菌phi29噬菌体基
  • 洛谷 1853.投资的最大效益 是小Y啦 算法c++动态规划
    思路：完全背包。首先从题目的分析中我们可以知道，这里的债卷是可以无限次购买的，所以我们可以认定，这是个在选与不选的问题中，而且各个选项都是可以无限次选择的。确定了做法之后，我们需要看到这道题和普通的背包问题不同的地方，那就是我们如果只是写出模板的话，只能得到第一年的最大利润加资产。但是这里有要求说是多少年的。所以我们需要把第一次的数据存储到另一个数组当中，然后再还给他进行更新操作，这样才能在保证第
  • 我的人生到底怎么过 1703108b3d36
    你要怎样度过这一生？有人二十岁已经死了有人七十岁还在发现生命的可能有人终其一生不知道自己要的是什么有人为一件事着迷简单执拗，一直到老忠于自我未必有结果坚持努力也不一定换来成功但有天回望过往是胸怀壮阔还是满心懊悔取决于我们的每一个当下曾经看到一句很扎心的话你活得怎样不重要重要的是这是你想要的人生吗？灵动君有一段时间参加了微信的一个H5的活动那个活动是只要你输入自己的出生日期就能计算出你到现在已经度过
  • 突破编程_C++_面试（STL 编程 stack） breakthrough_01 突破编程_C++_面试c++面试
    1请简述std::stack在C++STL中的基本功能和使用场景std::stack在C++STL（标准模板库）中是一个容器适配器，专门用于实现后进先出（LIFO，Last-In-First-Out）的数据结构。其基本功能和使用场景如下：基本功能：push(element)：向栈顶添加元素。pop()：移除栈顶元素。如果栈为空，则此操作可能会导致未定义行为。top()：返回栈顶元素的引用，但不移除
  • H5 与 App、网页之间的通信 程序员柳随风 前端javascript
    前言本文整理工作中H5嵌入Android、iOS与PC网页后，如何与各端通信。（提供H5端的代码）环境判断constua=navigator.userAgent.toLowerCase()constisAndroid=/android/i.test(ua)constisIos=/iphone|ipod|ios/i.test(ua)constisIpad=/ipad/i.test(ua)consti
  • H5与原生交互方式 lfl18326162160 前端移动交互
    使用的组件dsbridge.jsvarbridge={default:this,//fortypescriptcall:function(method,args,cb){varret='';if(typeofargs=='function'){cb=args;args={};}vararg={data:args===undefined?null:args}if(typeofcb=='functio
  • 春招面试高频题目总结 小杰312 面试笔试面试c++职场和发展学习
    面试问题redis可以用于进程间通信吗？Why？How?--->延展一下有哪些进程间通信技术,优劣如何？有大量的插入sql语句，一条条的插入性能很差，如何通过事务进行优化？保证线程安全的策略有哪些？你知道哪些设计模式？有什么理解？单例、工厂方法、责任链、模板方法、策略模式都是基类抽象固定方法。子类提供具体实现。如何实现服务端与客户端的即时通讯？消息队列如何保证这个消息一定执行？不会丢失？持久化消息
  • 第10讲_Spring对Dao的支持 吴国友
    Spring框架优秀就是在于MVC开发的时候一旦需要对底层的数据库操作，它可以很好的支持JDBC技术，还有现在主流的ORM框架（Hibernate,MyBatis）技术。重点先介绍Spring对JDBC支持。在Spring对JDBC支持中提供了一个模板JdbcTemplate，此模板封装了对JDBC操作的许多方法，且消除了忽视资源释放而引起的漏洞Spring对JDBC操作需要导入的jar（开发环境
  • react 和vue区别 小王学前端️ vue3react.jsvue.js前端
    React和Vue是两个非常流行的前端JavaScript框架，它们有许多相似之处，但也有一些关键的区别：设计理念：React更倾向于函数式编程，推崇组件的纯粹性和可预测性，而Vue则更倾向于易用性和灵活性，提供了更多的内置特性和语法糖。模板vsJSX：Vue使用基于HTML的模板语法，这使得开发者可以快速上手。而React使用JSX，它是JavaScript的语法扩展，允许在JavaScript
  • web学习笔记（三十六） shan33__ 笔记学习笔记html前端javascript
    目录1.解构1.1对象解构1.2字符串解构1.3函数解构1.4总结2.模板字符串3.实例方法：startsWith()和endsWith()4.箭头函数4.1箭头函数的格式4.2箭头函数可以省略的部分4.3箭头函数总结5.剩余参数rest参数1.解构1.1对象解构在解构对象时要求变量名和对象的属性名保持一致，顺序不需要一致，可以随便写，但变量名和属性名一定要保持一致否则会输出undefined。当
  • C++面试：STL篇 葛雨龙 c++面试
    STL个人小结：stl是c++的标准模板库，stl6大组件：容器：存储数据，本质是类模板vector：底层是动态数组，连续内存支持随机存取，尾部增删效率高，内部增删O(n)list：底层是双链表，内存不连续，只能顺序访问，任意位置增删都是O(1)deque:整体连续，支持随机存取，首尾增删效率高，但是迭代器太复杂，所以一般只有当既要随机存取又要首尾增删采用deque。unordered_set:无
  • 云原生周刊：Istio 加入 Phippy 家族 ｜ 2024.3.18 KubeSphere 云原生 k8s容器平台kubesphere云计算
    开源项目推荐ko"ko"是一个用于构建和部署Go应用程序的简单、快速的容器镜像构建工具。它适用于那些镜像中只包含单个Go应用程序且没有或很少依赖于操作系统基础镜像的情况（例如没有cgo，没有操作系统软件包依赖）。"ko"在本地机器上通过执行"gobuild"的方式构建镜像，因此不需要安装Docker。这使得它非常适合轻量级的CI/CD场景。"ko"支持简单的YAML模板化，并且支持跨平台构建，还默
  • 每日推荐11.07 西瓜绿2020
    分享时下比较流行的优秀国外设计，每日开眼一下；数量四组，每日积累一点点，提高设计审美！#小程序#UI01.音乐播放器移动UI套件模板https://www.uplabs.com/posts/music-player-mobile-ui-kits-template-81dc5e4e-8750-4854-bb10-4f4a01ff94b202.游戏设备商店移动UI套件模板https://www.upl
  • 重拾C++之菜鸟刷算法第11篇---回溯算法（上） 阿卡西番茄酱 C++算法算法c++开发语言
    今天是个好日子，二月二龙抬头，龙年龙日龙抬头，顺风顺水好兆头，万事万物开好头，金银珠宝往家里走！offer往家走！回溯算法回溯法可以解决的问题组合问题：N个数里面按照一定规则找出k个数的集合切割问题：一个字符串按一定规则有几种切割方式子集问题：一个N个数的集合里有多少符合条件的子集排列问题：N个数按一定规则全排列，有几种排列方式棋盘问题：N皇后，解数独回溯三部曲回溯函数模板返回值以及参数回溯函数终
  • STL中pair对组的使用方法 李大爱 c++开发语言
    在STL（标准模板库）中，pair对组是一种将两个不同的数据类型封装在一起的容器。具体来说，pair对组提供了一种简单的方式来存储和访问两个元素。pair对组的用法非常简单，需要包含"utility"头文件。以下是一些常见的pair对组使用方法：创建pair对组：std::pairp1;//默认构造函数创建一个空的pair对组std::pairp2(1,"Hello");//使用两个参数创建pai
  • 【洛谷】P1886 滑动窗口 /【模板】单调队列 SSL_kyx #队列数据结构队列单调性ssl算法
    题目描述有一个长为nn的序列aa，以及一个大小为kk的窗口。现在这个从左边开始向右滑动，每次滑动一个单位，求出每次滑动后窗口中的最大值和最小值。例如：Thearrayis[1,3,−1,−3,5,3,6,7],and[1,3,-1,-3,5,3,6,7],and[1,3,−1,−3,5,3,6,7],andk=3k=3k=3。输入格式输入一共有两行，第一行有两个正整数n,k。第二行n个整数，表示序
  • Flask中session失效时间设置 忘了呼吸的那只猫
    最近需要使用Python开发web系统，主要用到的框架就是Flask，前端使用Jinja2模板引擎和Bootstrap，web容器使用Cherrypy，其中关于Login管理的使用了Flask-Login插件。基本上也是从零学起，前前后后花了有好几个月的时间，还是在借鉴了已有的一些项目基础上。在开发的过程中有很多的想法和体会，记录下来，有不对的地方欢迎大家指正。在处理登录管理的部分，在Flask-
  • 一个简单的微信小程序表单提交样式模板 w宇宙王 微信小程序小程序
    没什么东西，只是方便自己直接复制使用.wxml姓名：学校：职位选择：提交.,scss.box{padding:30rpx;}.form-item{display:flex;background-color:rgb(221,230,230);margin-bottom:10rpx;border-radius:30rpx;}.head{line-height:100rpx;margin-left:30
  • 对网站开发感兴趣？想要看顶级大佬是怎么做的？ CCSBRIDGE html5
    前言有的人喜欢造轮子，有的人讨厌重复造轮子。萝卜白菜，各有所好。我收集了一些一看就觉得很厉害的项目公主/王子请享用https://github.com/h5bp/html5-boilerplate简介：HTML5Boilerplate是一个专业的前端模板，用于构建快速、强大且适应性强的Web应用程序或网站。该项目是十多年迭代开发和社区知识的产物。它没有强加特定的开发理念或框架，因此您可以按照自己想
  • java观察者模式 3213213333332132 java设计模式游戏观察者模式
    观察者模式——顾名思义，就是一个对象观察另一个对象，当被观察的对象发生变化时，观察者也会跟着变化。 在日常中，我们配java环境变量时，设置一个JAVAHOME变量,这就是被观察者，使用了JAVAHOME变量的对象都是观察者，一旦JAVAHOME的路径改动，其他的也会跟着改动。 这样的例子很多，我想用小时候玩的老鹰捉小鸡游戏来简单的描绘观察者模式。 老鹰会变成观察者，母鸡和小鸡是
  • TFS RESTful API 模拟上传测试 ronin47
           TFS RESTful API 模拟上传测试。 　　 细节参看这里：https://github.com/alibaba/nginx-tfs/blob/master/TFS_RESTful_API.markdown 模拟POST上传一个图片： curl --data-binary @/opt/tfs.png http
  • PHP常用设计模式单例, 工厂, 观察者, 责任链, 装饰, 策略,适配,桥接模式 dcj3sjt126com 设计模式PHP
    // 多态, 在JAVA中是这样用的, 其实在PHP当中可以自然消除, 因为参数是动态的, 你传什么过来都可以, 不限制类型, 直接调用类的方法 abstract class Tiger { public abstract function climb(); } class XTiger extends Tiger { public function climb()
  • hibernate 171815164 Hibernate
    main,save Configuration conf =new Configuration().configure(); SessionFactory sf=conf.buildSessionFactory(); Session sess=sf.openSession(); Transaction tx=sess.beginTransaction(); News a=new
  • Ant实例分析 g21121 ant
            下面是一个Ant构建文件的实例，通过这个实例我们可以很清楚的理顺构建一个项目的顺序及依赖关系，从而编写出更加合理的构建文件。           下面是build.xml的代码： <?xml version="1
  • [简单]工作记录_接口返回405原因 53873039oycg 工作
             最近调接口时候一直报错，错误信息是:       responseCode:405 responseMsg:Method Not Allowed        接口请求方式Post.
  • 关于java.lang.ClassNotFoundException 和 java.lang.NoClassDefFoundError 的区别 程序员是怎么炼成的
       真正完成类的加载工作是通过调用 defineClass来实现的；  而启动类的加载过程是通过调用 loadClass来实现的；  就是类加载器分为加载和定义   protected Class<?> findClass(String name) throws ClassNotFoundExcept
  • JDBC学习笔记-JDBC详细的操作流程 aijuans jdbc
    所有的JDBC应用程序都具有下面的基本流程：　　1、加载数据库驱动并建立到数据库的连接。　　2、执行SQL语句。　　3、处理结果。　　4、从数据库断开连接释放资源。 下面我们就来仔细看一看每一个步骤： 其实按照上面所说每个阶段都可得单独拿出来写成一个独立的类方法文件。共别的应用来调用。 1、加载数据库驱动并建立到数据库的连接：   Html代码  St
  • rome创建rss antonyup_2006 tomcatcmsxmlstrutsOpera
    引用 1.RSS标准 RSS标准比较混乱，主要有以下3个系列 RSS 0.9x / 2.0 : RSS技术诞生于1999年的网景公司(Netscape)，其发布了一个0.9版本的规范。2001年，RSS技术标准的发展工作被Userland Software公司的戴夫 温那(Dave Winer)所接手。陆续发布了0.9x的系列版本。当W3C小组发布RSS 1.0后，Dave W
  • html表格和表单基础 百合不是茶 html表格表单meta锚点
    第一次用html来写东西,感觉压力山大,每次看见别人发的都是比较牛逼的 再看看自己什么都还不会,   html是一种标记语言,其实很简单都是固定的格式   _----------------------------------------表格和表单 表格是html的重要组成部分,表格用在body里面的 主要用法如下; <table> &
  • ibatis如何传入完整的sql语句 bijian1013 javasqlibatis
            ibatis如何传入完整的sql语句？进一步说，String str ="select * from test_table"，我想把str传入ibatis中执行，是传递整条sql语句。         解决办法： <
  • 精通Oracle10编程SQL(14)开发动态SQL bijian1013 oracle数据库plsql
    /* *开发动态SQL */ --使用EXECUTE IMMEDIATE处理DDL操作 CREATE OR REPLACE PROCEDURE drop_table(table_name varchar2) is sql_statement varchar2(100); begin sql_statement:='DROP TABLE '||table_name;
  • 【Linux命令】Linux工作中常用命令 bit1129 linux命令
    不断的总结工作中常用的Linux命令   1.查看端口被哪个进程占用   通过这个命令可以得到占用8085端口的进程号，然后通过ps -ef|grep 进程号得到进程的详细信息   netstat -anp | grep 8085   察看进程ID对应的进程占用的端口号   netstat -anp | grep 进程ID &
  • 优秀网站和文档收集 白糖_ 网站
    集成 Flex, Spring, Hibernate 构建应用程序   性能测试工具-JMeter   Hmtl5-IOCN网站   Oracle精简版教程网站   鸟哥的linux私房菜   Jetty中文文档   50个jquery必备代码片段   swfobject.js检测flash版本号工具
  • angular.extend boyitech AngularJSangular.extendAngularJS API
    angular.extend 复制src对象中的属性去dst对象中. 支持多个src对象. 如果你不想改变一个对象，你可以把dst设为空对象{}: var object = angular.extend({}, object1, object2). 注意: angular.extend不支持递归复制. 使用方法: angular.extend(dst, src); 参数:
  • java-谷歌面试题-设计方便提取中数的数据结构 bylijinnan java
    网上找了一下这道题的解答，但都是提供思路，没有提供具体实现。其中使用大小堆这个思路看似简单，但实现起来要考虑很多。 以下分别用排序数组和大小堆来实现。 使用大小堆： import java.util.Arrays; public class MedianInHeap { /** * 题目：设计方便提取中数的数据结构 * 设计一个数据结构，其中包含两个函数，1.插
  • ajaxFileUpload 针对 ie jquery 1.7+不能使用问题修复版本 Chen.H ajaxFileUploadie6ie7ie8ie9
    jQuery.extend({ handleError: function( s, xhr, status, e ) { // If a local callback was specified, fire it if ( s.error ) { s.error.call( s.context || s, xhr, status, e ); }
  • [机器人制造原则]机器人的电池和存储器必须可以替换 comsci 制造
           机器人的身体随时随地可能被外来力量所破坏,但是如果机器人的存储器和电池可以更换,那么这个机器人的思维和记忆力就可以保存下来,即使身体受到伤害,在把存储器取下来安装到一个新的身体上之后,原有的性格和能力都可以继续维持.....        另外,如果一
  • Oracle Multitable INSERT 的用法 daizj oracle
    转载Oracle笔记-Multitable INSERT 的用法 http://blog.chinaunix.net/uid-8504518-id-3310531.html 一、Insert基础用法 语法：     Insert Into 表名 (字段1,字段2,字段3...）     Values (值1,
  • 专访黑客历史学家George Dyson datamachine on
    20世纪最具威力的两项发明——核弹和计算机出自同一时代、同一群年青人。可是，与大名鼎鼎的曼哈顿计划（第二次世界大战中美国原子弹研究计划）相 比，计算机的起源显得默默无闻。出身计算机世家的历史学家George Dyson在其新书《图灵大教堂》（Turing’s Cathedral）中讲述了阿兰·图灵、约翰·冯·诺依曼等一帮子天才小子创造计算机及预见计算机未来
  • 小学6年级英语单词背诵第一课 dcj3sjt126com englishword
    always 总是 rice 水稻，米饭 before 在...之前 live 生活，居住   usual 通常的 early 早的 begin 开始 month 月份   year 年 last 最后的 east 东方的 high 高的   far 远的 window 窗户 world 世界 than 比...更  
  • 在线IT教育和在线IT高端教育 dcj3sjt126com 教育
    codecademy  http://www.codecademy.com codeschool  https://www.codeschool.com teamtreehouse  http://teamtreehouse.com lynda http://www.lynda.com/ Coursera https://www.coursera.
  • Struts2 xml校验框架所定义的校验文件 蕃薯耀 Struts2 xml校验Struts2 xml校验框架Struts2校验
      >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 蕃薯耀 2015年7月11日 15:54:59 星期六 http://fa
  • mac下安装rar和unrar命令 hanqunfeng mac
    1.下载：http://www.rarlab.com/download.htm 选择 RAR 5.21 for Mac OS X 2.解压下载后的文件 tar -zxvf rarosx-5.2.1.tar 3.cd rar sudo install -c -o $USER unrar /bin #输入当前用户登录密码 sudo install -c -o $USER rar
  • 三种将list转换为map的方法 jackyrong list
      在本文中，介绍三种将list转换为map的方法： 1） 传统方法 假设有某个类如下    class Movie { private Integer rank; private String description; public Movie(Integer rank, String des
  • 年轻程序员需要学习的5大经验 lampcy 工作PHP程序员
    在过去的7年半时间里，我带过的软件实习生超过一打，也看到过数以百计的学生和毕业生的档案。我发现很多事情他们都需要学习。或许你会说，我说的不就是某种特定的技术、算法、数学，或者其他特定形式的知识吗？没错，这的确是需要学习的，但却并不是最重要的事情。他们需要学习的最重要的东西是“自我规范”。这些规范就是：尽可能地写出最简洁的代码；如果代码后期会因为改动而变得凌乱不堪就得重构；尽量删除没用的代码，并添加
  • 评“女孩遭野蛮引产致终身不育 60万赔偿款1分未得”医腐深入骨髓 nannan408
    先来看南方网的一则报道： 再正常不过的结婚、生子，对于29岁的郑畅来说，却是一个永远也无法实现的梦想。从2010年到2015年，从24岁到29岁，一张张新旧不一的诊断书记录了她病情的同时，也清晰地记下了她人生的悲哀。 　　粗暴手术让人发寒 　　2010年7月，在酒店做服务员的郑畅发现自己怀孕了，可男朋友却联系不上。在没有和家人商量的情况下，她决定堕胎。 　　12月5日，
  • 使用jQuery为input输入框绑定回车键事件 VS 为a标签绑定click事件 Everyday都不同 jspinput回车键绑定clickenter
    假设如题所示的事件为同一个，必须先把该js函数抽离出来，该函数定义了监听的处理：   function search() { //监听函数略...... }   为input框绑定回车事件，当用户在文本框中输入搜索关键字时，按回车键，即可触发search():   //回车绑定 $(".search").keydown(fun
  • EXT学习记录 tntxia ext
      1. 准备   （1） 官网：http://www.sencha.com/   里面有源代码和API文档下载。   EXT的域名已经从www.extjs.com改成了www.sencha.com ，但extjs这个域名会自动转到sencha上。   （2）帮助文档：   想要查看EXT的官方文档的话，可以去这里h
  • mybatis3的mapper文件报Referenced file contains errors xingguangsixian mybatis
    最近使用mybatis.3.1.0时无意中碰到一个问题： The errors below were detected when validating the file "mybatis-3-mapper.dtd" via the file "account-mapper.xml". In most cases these errors can be d
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他