数据库爆破专家
数据库爆破专家

h5游戏开发：用html+css+js写一个整蛊游戏

文章目录

          • 我来做一个简单的整蛊游戏吧！
            • 第一步，先设计骰子
            • 第二步，设计行走的格子
            • 第三步，加入主角头像
            • 第四步，开始写游戏js控制代码
            • 最终结果，所有代码 （复制粘贴后改下图片路径和音乐媒体路径后就可以使用）>>>

还记得那个一拳打穿显示器的胖子吗？
h5游戏开发：用html+css+js写一个整蛊游戏_第1张图片

我来做一个简单的整蛊游戏吧！

演示效果（这个小熊图片请自行替换为恐怖图片，因为网络规定，我就放了个小熊上去，以前其实是很恐怖的一张鬼图）：
h5游戏开发：用html+css+js写一个整蛊游戏_第2张图片
既然是整蛊游戏，我们名字就不要起得太明显，根据潘多拉魔盒效应，为了诱导玩家进入我们的陷阱，就取名为：

千万别走到终点！！！

玩法设定：
有玩家看到这个标题可能第一反应是什么恐怖游戏，或者有奇怪的东西在终点等着他，为了消除这种顾虑，我们将游戏设定改一下，设计为通过摇骰子的方式决定玩家走的步数，而不是玩家自己走。这样我们就拥有进一步控制玩家走向的决定权。

第一步，先设计骰子

这一步，很简单，为了速度开发这款游戏，我们写成文字吧！(不是想忽悠你们，主要是时间有限，重点我放在后面一步)
h5游戏开发：用html+css+js写一个整蛊游戏_第3张图片

第二步，设计行走的格子

我们用li来做吧，做个横排的表格，简单一点.(不是想忽悠你们，主要是时间有限，重点我放在后面一步)
听说骰子有6面，我们设计6步。
h5游戏开发：用html+css+js写一个整蛊游戏_第4张图片
就这样，写出6个格子，刚好可以走6步
咋看起来还有点简陋(是真的简陋)，不慌，黑色制造的神秘将革除白色的虚空，我们将body设置为黑色，然后字体变白
h5游戏开发：用html+css+js写一个整蛊游戏_第5张图片

第三步，加入主角头像

布局已经就位了，我们还差个主角
我随便从网上找了一张照片，作为主角，当然，要可爱萌萌哒，制造毫无压力的气氛(虽然背景就很压抑，但是黑色环境可以让人将注意力集中在与黑色形成反差的颜色上)

h5游戏开发：用html+css+js写一个整蛊游戏_第6张图片
再加入我们的恐怖图片，实际是个小熊，因为网络监管原因不让放恐怖血腥，就用小熊代替恐怖图片
h5游戏开发：用html+css+js写一个整蛊游戏_第7张图片

然后加入声音控件，顺便在加个大块,id为all，后面有用
h5游戏开发：用html+css+js写一个整蛊游戏_第8张图片

对了，记得将audio控件隐藏起来，不让人看（bird.wav是恐怖的鸟声）

        <audio controls style="display: none">
            <source src="bird.wav" type="audio/mpeg">
            您的浏览器不支持 audio 元素。
        audio>
第四步，开始写游戏js控制代码

然后开始写逻辑，第一步，写掷骰子的逻辑。
使用随机数方法Math.random()，
然后去除小数，取整数Math.floor(Math.random()*10)，
然后随机数所指向的那个li就是目标li，也就是狗头像将要去到的位置，赋值给一个叫做aim的变量，开始写代码：

        var h4 = document.getElementsByTagName('h4')[0];
        var li = document.getElementsByTagName('li');
        var aim = 0;
        //掷骰子
        h4.onclick = function () {
            num = Math.floor(Math.random() * 10);
			//改变p标签显示的内容，好提示玩家将移动几步？
            document.getElementsByTagName('p')[0].innerHTML = '你随机选中的数字是：' + num + '
狗头像将移动' + num + '步';
            //如果num大于5，就等于5，这样我们有50%的概率(随机数字5,6,7,8,9,10)让玩家直接走出格触发我们的恐怖图片
            if (num >= 5) {
                num = 5;
                aim = li[num].offsetLeft;
                //设定一个交kok得函数，用于执行狗头像闪烁效果
                kok();
            } else {
                aim = li[num].offsetLeft; //随机数序号的li格子的左边距等于头像最终移动距离
                   //设定一个交kok得函数，用于执行狗头像闪烁效果
                kok();
            }
        }

接下来开始写狗头像闪烁以及移动到li后会出现什么效果的代码，也就是游戏的关键所在kok()函数，代码如下:

        function kok() {
            //设置图片消失然后出现在下一个格子的效果，一闪一闪.........500ms一次
            setInterval(function () {
                if (img[0].style.opacity == "1") {
                    img[0].style.opacity = "0";
                } else {
                    img[0].style.opacity = "1";
                }
                //如果狗头像的左边距离小于最终目标移动距离
                if (img[0].offsetLeft < aim) {
                    //就每次加10px的移动距离向前移动
                    img[0].style.marginLeft = img[0].offsetLeft + 10 + 'px';
                } else {
                    //最终目标距离赋值给狗头像的左边距
                    img[0].style.marginLeft = aim - 8 + 'px';
                    if (num == 5) {
                       //id为all的大块消失，恐怖图片出现，吓人音乐响起
						document.getElementById('all').style.display = "none";
                        img[1].style.display = "block";
                        document.getElementsByTagName('audio')[0].play();
                    }
                }
            }, 500);
最终结果，所有代码 （复制粘贴后改下图片路径和音乐媒体路径后就可以使用）>>>

最终合成代码以及运行效果：


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>千万别走到终点！！！title>
    <style>
        body {
            background-color: black;
            color: white;
        }
		
		h4{
            cursor: pointer;
        }
        h4:hover{
            color: red;
        }

        .feets {
            width: 600px;
            list-style: none;
        }

        .feets li {
            display: inline-block;
            font-size: 0px;
            width: 80px;
            height: 80px;
            /* margin-left: 1px; */
            background: linear-gradient(to right, #ccc, #487);
        }

        img {
            /* display: none; */
            position: absolute;
            width: 80px;
            height: 80px;
            margin-top: -100px;
            margin-left: 40px;
        }

        .scareImg {
            display: none;
            position: fixed;
            margin: auto;
            width: 1600px;
            height: 100%;
            z-index: 500;
        }
    style>
head>

<body>
    <div id="all">
        <h4>请掷骰子h4>
        <p>你随机选中的数字是：？p>
        <ul class="feets">
            <li>li>
            <li>li>
            <li>li>
            <li>li>
            <li>li>
            <li>li>
        ul>
        <img src="./一个头像.jpg" alt="">
        <audio controls style="display: none">
            <source src="bird.wav" type="audio/mpeg">
            您的浏览器不支持 audio 元素。
        audio>
    div>
    <img class="scareImg" src="./一个恐怖图片.jpg" alt="">
    <script>
        var h4 = document.getElementsByTagName('h4')[0];
        var img = document.getElementsByTagName('img');
        var li = document.getElementsByTagName('li');
        var aim = 0;
        //掷骰子
        h4.onclick = function () {
            num = Math.floor(Math.random() * 10);
            document.getElementsByTagName('p')[0].innerHTML = '你随机选中的数字是：' + num + '
狗头像将移动' + num + '步';
            //如果num大于5，就等于5，这样我们有50%的概率(随机数字5,6,7,8,9,10)让玩家直接走出格触发我们的恐怖图片
            if (num >= 5) {
                num = 5;
                aim = li[num].offsetLeft;
                //设定一个交kok得函数，用于执行狗头像闪烁效果
                kok();
            } else {
                aim = li[num].offsetLeft; //随机数序号的li格子的左边距等于头像最终移动距离
                   //设定一个交kok得函数，用于执行狗头像闪烁效果
                kok();
            }
        }

        function kok() {
            //设置图片消失然后出现在下一个格子的效果，一闪一闪.........500ms一次
            setInterval(function () {
                if (img[0].style.opacity == "1") {
                    img[0].style.opacity = "0";
                } else {
                    img[0].style.opacity = "1";
                }
                //如果狗头像的左边距离小于最终目标移动距离
                if (img[0].offsetLeft < aim) {
                    //就每次加10px的移动距离向前移动
                    img[0].style.marginLeft = img[0].offsetLeft + 10 + 'px';
                } else {
                    //最终目标距离赋值给狗头像的左边距
                    img[0].style.marginLeft = aim - 8 + 'px';
                    if (num == 5) {
                        document.getElementById('all').style.display = "none";
                        img[1].style.display = "block";
                        document.getElementsByTagName('audio')[0].play();
                    }
                }
            }, 500);
        }
    script>
body>

html>

运行效果——移动中：
h5游戏开发：用html+css+js写一个整蛊游戏_第9张图片
运行效果——触发恐怖图形后：
h5游戏开发：用html+css+js写一个整蛊游戏_第10张图片

然后就完成了，
对了，还有文件名要改下：

因为国内网络相关制度规定，不传播恐怖血腥，我就没放那种图片，你们可以去百度后自己替换这个恐怖小熊，音乐还可以替换得再惊悚一点，你懂的

对了，我有搞忘了，点击h4标签开始游戏>>>
h5游戏开发：用html+css+js写一个整蛊游戏_第11张图片
关于图片资源和音效及代码的提取链接：https://pan.baidu.com/s/1Wpbbt22B90xdJEhCMrzE2A
提取码：v894

你可能感兴趣的:(前端_Javascript,前端作品大集合)

  • 大学播音主持都学什么内容？播音主持专业学什么？ 配音新手圈
    有些喜欢播音主持并且犹豫要不要报考这个大学专业的小伙伴们就会想要了解大学播音主持都学什么内容吧，毕竟如果不够了解就直接选择这个专业真的等选择完进去学习以后才知道这个专业并不是自己想要学习的东西那就来不及了。下面是小编为大家整理出来的一些播音主持专业学习的内容，请往下看吧。大学播音主持专业主要学习的课程有：播音发声、播音创作基础、广播播音主持、电视播音主持、文艺作品演播学概论、新闻学概论、新闻采编、
  • 大前端-postcss安装使用指南 黑夜照亮前行的路 postcss
    PostCSS是一款强大的CSS处理工具，可以用来自动添加浏览器前缀、代码合并、代码压缩等，提升代码的可读性，并支持使用最新的CSS语法。以下是一份简化的PostCSS安装使用指南：一、安装PostCSS在你的项目目录中，通过npm（NodePackageManager）来安装PostCSS。打开命令行窗口，输入以下命令：bash复制代码npminstallpostcss--save-dev这将把
  • 谷歌浏览器驱动Chromedriver（114-120版本）文件以及驱动下载教程 pigerr杨 Pythonpythonchromedrivers
    ChromeDriver官方网站GitHub||GoogleChromeLabs/chrome-for-testingChromeDriver113-125_JSONChromeforTestingavailability123-125zip白月黑羽Python基础|进阶|Qt图形界面|Django|自动化测试|性能测试|JS语言|JS前端|原理与安装
  • 虚拟 DOM 的优缺点有哪些 咕噜签名分发 前端javascript开发语言
    虚拟DOM（VirtualDOM）技术作为现代前端开发中的重要组成部分，已经成为了众多流行前端框架的核心特性。它的引入为前端开发带来了诸多优势，同时也需要我们认真思考其潜在的考量。下面简单的介绍一下虚拟DOM技术的优势与缺点，深入探讨其在实际应用中的影响。提升性能虚拟DOM的最大优势之一是提升页面性能。通过比较前后两次虚拟DOM树的差异，最小化实际DOM操作，从而减少页面重渲染时的性能消耗。这种优
  • 如何呵护孩子的兴趣 婉叶老师
    “老师你教国画吗？”又一个微友这样问我。“怎么啦？”我很想听她后面的言外之意。“我觉得我家孩子很喜欢画画的，可是感觉她画得一般，没什么天赋啊……”感觉这位妈妈有些小焦虑。“传些作品给我看看呢。”那位妈妈传了三张。我先不看画怎样，只看孩子的状态。因为一个孩子是否对参加的课外班真有兴趣这是关键。我看孩子笑得很开心，手里的画也已经有了一些浓淡变化。按专业的眼光看，虽说从造型上、笔法上有待进一步提升，但是
  • 3、JavaWeb-Ajax/Axios-前端工程化-Element 所谓远行Misnearch #JavaWeb前端ajaxelementuijava前端框架
    P34Ajax介绍Ajax:AsynchroousJavaScriptAndXML，异步的JS和XMLJS网页动作，XML一种标记语言，存储数据，作用：数据交换：通过Ajax给服务器发送请求，并获取服务器响应的数据异步交互：在不重新加载整个页面的情况下，与服务器交换数据并实现更新部分网页的技术，例如：搜索联想、用户名是否可用的校验等等。同步与异步：同步：服务器在处理中客户端要处于等待状态，输入域名
  • 读后感——《我遥远的清平湾》 吴奕凯
    我遥远的清平湾是史铁生的作品。这是一篇散文集，里面第一篇就是“我遥远的清平湾”。里面主要讲述了史铁生在“文革”时，插队到了一个地方，名字叫“清平湾”。里面有一个老汉别人都叫他破老汉。可能是因为他太穷了——破与poor同音。史铁生就在插队时插到了破老汉的家中。破老汉的家中有几头牛。这几头牛跟史铁生发生了很多事情。比如说：有一个晚上，史铁生起来去给牛喂草。在黑暗中，发现有一头牛，仍然没有睡觉。他觉得很
  • Python dict字符串转json对象，小数精度丢失问题 朝如青丝 暮成雪 jsonpython
    一前言JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式，dict是Python的一种数据格式。本篇介绍一个float数据转换时精度丢失的案例。二问题描述importjsontest_str1='{"π":3.1415926535897932384626433832795028841971}'test_str2='{"value":10.00000}'print
  • java实体中返回前端的double类型四舍五入（格式化） 婲落ヽ紅顏誶 java
    根据业务，需要通过后端给前端返回部分double类型的数值，一般需要保留两位小数，使用jackson转换对象packagecom.ruoyi.common.core.config;importcom.fasterxml.jackson.core.JsonGenerator;importcom.fasterxml.jackson.databind.JsonSerializer;importcom.f
  • Django forms组件 在飞行-米龙 Djangodjangopython后端
    【一】引入【1】实现登陆验证功能（1）需求分析登陆验证需要前后端交互，采用form表单提交数据对数据进行校验用户名必须以英文大写字母开头密码必须大于三位数反馈给用户错误的信息除了反馈错误的信息还有保留原始输入内容（2）后端代码使用user_info_dict字典每次刷新存储存储前端发送的信息存储后端进行验证的信息defhome(request):#每次后刷新这个信息字典user_info_dict
  • Web前端Html的表单 任家伟 前端html
    表单的关键字：form标签表示一个表单区域action=“后端地址”method=“提交数据方式:get/post”input单行输入框type=“text”文本name=“定义名称名字自定义”向后端提交的键readonly=“readonly”只读，不可修改，但是可以提交disabled=“disabled”禁用组件不可修改，不能提交type=“password”密码框type=“radio”单
  • Thinkphp - 详细实现网站系统登录功能，附带 Mysql 数据库设置、Web 前端展示界面、信息校验等（详细代码，即设计过程） 王佳斌 +Thinkphpmysql前端数据库
    前言登录功能，是我们几乎开发每个系统都必须的模块。登录功能设计思路，主要包括几个方面。用户输入网址展示登录页面用户输入用户名，密码等点击登录进行信息校验校验通过之后，记录用户登录信息，跳转指定页面用户校验失败，提示失败信息页面目录具体功能实现为了快速搭建可用、美观的页面，我们采用一个比较成熟的前端框架Bootstrap。下面我们到Bootstrap的官网Bootsrap官网下载bootstrap。
  • javascript 日期转换为时间戳，时间戳转换为日期的函数 cdcdhj javascript学习日记javascript开发语言ecmascript
    日期转化为时间戳，主要用valueOf()来进行转化为毫秒时间戳，getTime()IOS系统无法解析转换，所以都有valueOf()letgetTimestampOrDate=function(timestamp){lettimeStamp='';constregex=/^\d{4}(-|\/)\d{2}(-|\/)\d{2}$/;constregex2=/^\d{4}(-|\/)\d{2}(-
  • COMP315 JavaScript Cloud Computing for E Commerce zhuyu0206girl javascript开发语言ecmascript
    Assignment1:Javascript1IntroductionAcommontaskincloudcomputingisdatacleaning,whichistheprocessoftakinganinitialdatasetthatmaycontainerroneousorincompletedata,andremovingorfixingthoseelementsbeforeform
  • JSON与AJAX：网页交互的利器 入冉心 jsonajax前端
    在现代Web开发中，JSON（JavaScriptObjectNotation）和AJAX（AsynchronousJavaScriptandXML）是两项不可或缺的技术。它们共同为网页提供了动态、实时的数据交互能力，为用户带来了更加流畅和丰富的体验。本文将详细介绍JSON和AJAX的概念、原理，并通过代码示例展示它们在实际开发中的应用。一、JSON：轻量级的数据交换格式JSON是一种轻量级的数据
  • 程序员开发技术整理 laizhixue 学习前端框架
    前端技术：vue-前端框架element-前端框架bootstrap-前端框架echarts-图标组件C#后端技术：webservice：soap架构：简单的通信协议，用于服务通信ORM框架：对象关系映射，如EF：对象实体模型，是ado.net中的应用技术soap服务通讯：xml通讯ado.net：OAuth2:登录授权认证：Token认证：JWT：jsonwebtokenJava后端技术：便捷工
  • 【前端学习——js篇】7.函数缓存 笔下无竹墨下有鱼 前端学习前端学习javascript
    具体见：https://github.com/febobo/web-interview7.函数缓存函数缓存，就是将函数运算过的结果进行缓存本质上就是用空间（缓存存储）换时间（计算过程）常用于缓存数据计算结果和缓存对象。其实现主要通过闭包、柯里化和高阶函数。下面主要介绍下柯里化：①柯里化柯里化（currying)是一种函数式编程的概念，指的是将一个带有多个参数的函数转换成一系列只接受一个参数的函数的
  • 作业评价 fac953e45820
    作为一个宿舍的同学，相处一年彼此了解。梁超：是一个特别热爱摄影的同学，他的作品往往充斥着汗水和疲惫，为了拍到想要的照片，他可以一直寻找，“坚持”是我认为他的作品中最为突出的特点，每一帧都能感受到他的热情！袁博：给人一种比较大气，比较实在的感觉，从他的作品中的建筑物的拍摄角度，可以看出他对震撼的冲击力有着独特的向往，黑白的画面同时也衬托出那份冲击力，他的作品所蕴含这不小的能量。杨行：他是一个搞怪的人
  • javascript的数据类型及转换 田小田txt
    一、JavaScript数据类型：共有string，number，boolean，object，function五种数据类型；其中Object，Date，Array为对象型；2个不包含任何值的数据类型：null，undefined。二、Typeof查看数据类型：typeof"John"//返回stringtypeof3.14//返回numbertypeofNaN//返回numbertypeoffa
  • Websocket服务监听收发消息 beiback Java服务器问题websocket网络协议网络
    目录1.pom依赖坐标2.项目配置端口和项目包名2.创建处理器3.注册处理器4.前端页面1.pom依赖坐标org.springframework.bootspring-boot-starter-websocket2.项目配置端口和项目包名application.propertiesserver.port=8088//路径规范：为应用的所有servlet提供一个统一的前缀，使URL结构更加清晰和一致
  • Netty服务器结合WebSocke协议监听和接收数据 beiback 服务器问题Java服务器运维netty
    目录1.pom依赖2.配置属性3.创建netty服务器4.建立监听和响应5.创建启动器6.前端static下页面7.前端js8.注意异常问题9.创建netty服务器--使用守护线程1.pom依赖io.nettynetty-all4.1.86.Final2.配置属性application.properties#启动端口server.port=8088server.servlet.context-pa
  • 文字的搬运工 滴水_旅途
    维克多·雨果（VictorHugo，1802年2月26日—1885年5月22日），法国作家，19世纪前期积极浪漫主义文学的代表作家，人道主义的代表人物，法国文学史上卓越的资产阶级民主作家，被人们称为“法兰西的莎士比亚”。一生写过多部诗歌、小说、剧本、各种散文和文艺评论及政论文章，在法国及世界有着广泛的影响力。雨果的创作历程超过60年，其作品包括26卷诗歌、20卷小说、12卷剧本、21卷哲理论著，合
  • 基于SSM+Vue企业销售培训系统 企业人才培训系统 企业课程培训管理系统 企业文化培训班系统Java 计算机程序老哥
    作者主页：计算机毕业设计老哥有问题可以主页问我一、开发介绍1.1开发环境开发语言：Java数据库：MySQL系统架构：B/S后端：SSM(Spring+SpringMVC+Mybatis)前端：Vue工具：IDEA或者Eclipse，JDK1.8，Maven二、系统介绍2.1图片展示注册登录页面：登陆.png前端页面功能：首页、培训班、在线学习、企业文化、交流论坛、试卷列表、系统公告、留言反馈、个
  • javascript实现SM2加密解密 人生在勤，不索何获 javascript前端jquery
    前提JavaWeb环境前端代码window.sm2=function(t){functioni(e){if(r[e])returnr[e].exports;varn=r[e]={i:e,l:!1,exports:{}};returnt[e].call(n.exports,n,n.exports,i),n.l=!0,n.exports}varr={};returni.m=t,i.c=r,i.d=fu
  • Vue：为什么要使用v-cloak 刻刻帝的海角 vue.js前端javascript
    Vue.js是一种流行的JavaScript框架，它使我们能够构建交互性强大的用户界面。在Vue.js中，v-cloak是一个指令，用于解决在页面加载时出现的闪烁问题。本文将介绍如何使用v-cloak及代码来优化Vue.js应用程序的渲染效果。引言当我们使用Vue.js构建应用程序时，有时会遇到一个问题：在页面加载时，由于Vue.js需要一定的时间来解析和渲染模板，会导致页面上显示出未经处理的Mu
  • JavaScript快速入门笔记之二（变量、常量、数据类型） eshineLau 前端开发javascript笔记前端
    JavaScript快速入门笔记之二（变量、常量、数据类型）1、变量何时使用变量：程序中的一切数据都要保存在变量中，反复使用如何使用变量：2种情况：赋值和取值赋值：2步：1.1创建变量：——声明——创建一个新的空变量语法：var变量名;强调：仅声明，未赋值的变量，默认值是undefined命名：1.不能以数字开头2.不能用保留字。3.一般采用驼峰命名1.2赋值：将数据保存到变量中语法：变量名=数据
  • 前端埋点解决方案 zhu_zhu_xia 前端
    一、前言：基于神策数据的前端埋点解决方案JavaScript快速使用·神策分析使用手册[预览版]二、sdkgitlab下载地址https://github.com/sensorsdata/sa-sdk-javascript/releases或者npm安装npmisa-sdk-javascript三、入门3.1接入sdk以及配置(version1.17.2)，入口文件接入sdk以及添加配置(func
  • 焰火升腾，新星闪耀 tomlong98
    ——五河琴里随想说起来，第一次知道五河琴里这个名字还是因为一句有“不尊重女性”嫌疑的口诀——桐乃月火羽濑川，琴里火怜萌美柑。公主小凑迷千万，穹妹萌点占一半[1]。口诀以七言打油诗的形式列举了当代日系ACGN作品中九个比较脍炙人口的妹妹形象。其中桐乃、小凑、穹妹和小鸠我都已经领教过了，物语系列很长不好补，娜娜莉最后负了鲁路修的剧情又太“黑深残”以至于我不敢看第二季；于是便在琴里和美柑中选择了知名度较
  • 经典名著《边城》读后感 我是被bi的
    犹记得小说开头写了这样一段话：“由四川过湖南去，靠东有一条官路。这官路将近湘西边境到了一个名为‘茶峒’的小山城时，有一小溪，溪边有座白色小塔，塔下住了一户单独的人家。这人家只一个老人，一个女孩子，一只黄狗。”山水之间亭亭立着一座房屋的画面在脑海中挥之不去，多个“一”字的运用，既有落寞孤寂之感，也有恬静闲适的意味。就整部作品来看，整个书中世界如一个仙境，古朴实诚的人情风味，字字句句里都透出一种淡雅、
  • vue时间组件：dayjs与moment 煸橙干儿~~ VUE实战vue.js前端javascript
    一、dayjs使用Day.js是一个极简的JavaScript库，可以为现代浏览器解析、验证、操作和显示日期和时间。具体使用可参考：dayjs官网1、本年start=dayjs().startOf('year').format('YYYY-MM-DD')end=dayjs().endOf('year').format('YYYY-MM-DD')console.log(start,end)//['2
  • 解线性方程组 qiuwanchi
    package gaodai.matrix; import java.util.ArrayList; import java.util.List; import java.util.Scanner; public class Test { public static void main(String[] args) { Scanner scanner = new Sc
  • 在mysql内部存储代码 annan211 性能mysql存储过程触发器
    在mysql内部存储代码 在mysql内部存储代码，既有优点也有缺点，而且有人倡导有人反对。 先看优点： 1 她在服务器内部执行，离数据最近，另外在服务器上执行还可以节省带宽和网络延迟。 2 这是一种代码重用。可以方便的统一业务规则，保证某些行为的一致性，所以也可以提供一定的安全性。 3 可以简化代码的维护和版本更新。 4 可以帮助提升安全，比如提供更细
  • Android使用Asynchronous Http Client完成登录保存cookie的问题 hotsunshine android
    Asynchronous Http Client是android中非常好的异步请求工具 除了异步之外还有很多封装比如json的处理，cookie的处理 引用 Persistent Cookie Storage with PersistentCookieStore This library also includes a PersistentCookieStore whi
  • java面试题 Array_06 java面试
    java面试题 第一，谈谈final, finally, finalize的区别。 final-修饰符（关键字）如果一个类被声明为final，意味着它不能再派生出新的子类，不能作为父类被继承。因此一个类不能既被声明为 abstract的，又被声明为final的。将变量或方法声明为final，可以保证它们在使用中不被改变。被声明为final的变量必须在声明时给定初值，而在以后的引用中只能
  • 网站加速 oloz 网站加速
    前序:本人菜鸟，此文研究总结来源于互联网上的资料，大牛请勿喷！本人虚心学习，多指教. 1、减小网页体积的大小，尽量采用div+css模式，尽量避免复杂的页面结构，能简约就简约。 2、采用Gzip对网页进行压缩；    GZIP最早由Jean-loup Gailly和Mark Adler创建，用于UNⅨ系统的文件压缩。我们在Linux中经常会用到后缀为.gz
  • 正确书写单例模式 随意而生 java 设计模式 单例
    　　单例模式算是设计模式中最容易理解，也是最容易手写代码的模式了吧。但是其中的坑却不少，所以也常作为面试题来考。本文主要对几种单例写法的整理，并分析其优缺点。很多都是一些老生常谈的问题，但如果你不知道如何创建一个线程安全的单例，不知道什么是双检锁，那这篇文章可能会帮助到你。 　　懒汉式，线程不安全 　　当被问到要实现一个单例模式时，很多人的第一反应是写出如下的代码，包括教科书上也是这样
  • 单例模式 香水浓 java
    懒汉  调用getInstance方法时实例化 public class Singleton { private static Singleton instance; private Singleton() {} public static synchronized Singleton getInstance() { if(null == ins
  • 安装Apache问题：系统找不到指定的文件 No installed service named "Apache2" AdyZhang apachehttp server
    安装Apache问题：系统找不到指定的文件 No installed service named "Apache2" 每次到这一步都很小心防它的端口冲突问题，结果，特意留出来的80端口就是不能用，烦。 解决方法确保几处： 1、停止IIS启动 2、把端口80改成其它 （譬如90，800，，，什么数字都好） 3、防火墙(关掉试试) 在运行处输入 cmd 回车，转到apa
  • 如何在android 文件选择器中选择多个图片或者视频？ aijuans android
    我的android app有这样的需求，在进行照片和视频上传的时候，需要一次性的从照片/视频库选择多条进行上传 但是android原生态的sdk中，只能一个一个的进行选择和上传。 我想知道是否有其他的android上传库可以解决这个问题，提供一个多选的功能，可以使checkbox之类的，一次选择多个 处理方法 官方的图片选择器(但是不支持所有版本的androi，只支持API Level
  • mysql中查询生日提醒的日期相关的sql baalwolf mysql
    SELECT sysid,user_name,birthday,listid,userhead_50,CONCAT(YEAR(CURDATE()),DATE_FORMAT(birthday,'-%m-%d')),CURDATE(),  dayofyear( CONCAT(YEAR(CURDATE()),DATE_FORMAT(birthday,'-%m-%d')))-dayofyear(
  • MongoDB索引文件破坏后导致查询错误的问题 BigBird2012 mongodb
    问题描述： MongoDB在非正常情况下关闭时，可能会导致索引文件破坏，造成数据在更新时没有反映到索引上。 解决方案：   使用脚本，重建MongoDB所有表的索引。 var names = db.getCollectionNames(); for( var i in names ){ var name = names[i]; print(name);
  • Javascript Promise bijian1013 JavaScriptPromise
            Parse JavaScript SDK现在提供了支持大多数异步方法的兼容jquery的Promises模式，那么这意味着什么呢，读完下文你就了解了。 一.认识Promises         “Promises”代表着在javascript程序里下一个伟大的范式，但是理解他们为什么如此伟大不是件简
  • [Zookeeper学习笔记九]Zookeeper源代码分析之Zookeeper构造过程 bit1129 zookeeper
       Zookeeper重载了几个构造函数，其中构造者可以提供参数最多，可定制性最多的构造函数是     public ZooKeeper(String connectString, int sessionTimeout, Watcher watcher, long sessionId, byte[] sessionPasswd, boolea
  • 【Java命令三】jstack bit1129 jstack
    jstack是用于获得当前运行的Java程序所有的线程的运行情况(thread dump），不同于jmap用于获得memory dump   [hadoop@hadoop sbin]$ jstack Usage: jstack [-l] <pid> (to connect to running process) jstack -F
  • jboss 5.1启停脚本　动静分离部署 ronin47
    以前启动jboss，往各种xml配置文件，现只要运行一句脚本即可。start nohup sh /**/run.sh -c servicename  -b ip -g  clustername   -u broatcast jboss.messaging.ServerPeerID=int  -Djboss.service.binding.set=p
  • UI之如何打磨设计能力? brotherlamp UIui教程ui自学ui资料ui视频
      在越来越拥挤的初创企业世界里，视觉设计的重要性往往可以与杀手级用户体验比肩。在许多情况下，尤其对于 Web 初创企业而言，这两者都是不可或缺的。前不久我们在《右脑革命：别学编程了，学艺术吧》中也曾发出过重视设计的呼吁。如何才能提高初创企业的设计能力呢?以下是 9 位创始人的体会。 1.找到自己的方式 如果你是设计师，要想提高技能可以去设计博客和展示好设计的网站如D-lists或
  • 三色旗算法 bylijinnan java算法
    import java.util.Arrays; /** 问题： 假设有一条绳子，上面有红、白、蓝三种颜色的旗子，起初绳子上的旗子颜色并没有顺序， 您希望将之分类，并排列为蓝、白、红的顺序，要如何移动次数才会最少，注意您只能在绳 子上进行这个动作，而且一次只能调换两个旗子。 网上的解法大多类似： 在一条绳子上移动，在程式中也就意味只能使用一个阵列，而不使用其它的阵列来
  • 警告:No configuration found for the specified action: \'s chiangfai configuration
    1.index.jsp页面form标签未指定namespace属性。 <!--index.jsp代码--> <%@taglib prefix="s" uri="/struts-tags"%> ... <s:form action="submit" method="post"&g
  • redis -- hash_max_zipmap_entries设置过大有问题 chenchao051 redishash
    使用redis时为了使用hash追求更高的内存使用率，我们一般都用hash结构，并且有时候会把hash_max_zipmap_entries这个值设置的很大，很多资料也推荐设置到1000，默认设置为了512，但是这里有个坑   #define ZIPMAP_BIGLEN 254 #define ZIPMAP_END 255     /* Return th
  • select into outfile access deny问题 daizj mysqltxt导出数据到文件
    本文转自：http://hatemysql.com/2010/06/29/select-into-outfile-access-deny%E9%97%AE%E9%A2%98/ 为应用建立了rnd的帐号，专门为他们查询线上数据库用的，当然，只有他们上了生产网络以后才能连上数据库，安全方面我们还是很注意的，呵呵。 授权的语句如下： grant select on armory.* to rn
  • phpexcel导出excel表简单入门示例 dcj3sjt126com PHPExcelphpexcel
    <?php error_reporting(E_ALL); ini_set('display_errors', TRUE); ini_set('display_startup_errors', TRUE);   if (PHP_SAPI == 'cli') die('This example should only be run from a Web Brows
  • 美国电影超短200句 dcj3sjt126com 电影
    1. I see． 我明白了。2. I quit! 我不干了!3. Let go! 放手!4. Me too． 我也是。5. My god! 天哪!6. No way! 不行!7. Come on． 来吧(赶快)8. Hold on． 等一等。9. I agree。 我同意。10. Not bad． 还不错。11. Not yet． 还没。12. See you． 再见。13. Shut up!
  • Java访问远程服务 dyy_gusi httpclientwebservicegetpost
        随着webService的崛起，我们开始中会越来越多的使用到访问远程webService服务。当然对于不同的webService框架一般都有自己的client包供使用，但是如果使用webService框架自己的client包，那么必然需要在自己的代码中引入它的包，如果同时调运了多个不同框架的webService，那么就需要同时引入多个不同的clien
  • Maven的settings.xml配置 geeksun settings.xml
    settings.xml是Maven的配置文件，下面解释一下其中的配置含义： settings.xml存在于两个地方： 1.安装的地方：$M2_HOME/conf/settings.xml 2.用户的目录：${user.home}/.m2/settings.xml 前者又被叫做全局配置，后者被称为用户配置。如果两者都存在，它们的内容将被合并，并且用户范围的settings.xml优先。
  • ubuntu的init与系统服务设置 hongtoushizi ubuntu
    转载自：  http://iysm.net/?p=178 init Init是位于/sbin/init的一个程序，它是在linux下，在系统启动过程中，初始化所有的设备驱动程序和数据结构等之后，由内核启动的一个用户级程序，并由此init程序进而完成系统的启动过程。 ubuntu与传统的linux略有不同，使用upstart完成系统的启动，但表面上仍维持init程序的形式。 运行
  • 跟我学Nginx+Lua开发目录贴 jinnianshilongnian nginxlua
    使用Nginx+Lua开发近一年的时间，学习和实践了一些Nginx+Lua开发的架构，为了让更多人使用Nginx+Lua架构开发，利用春节期间总结了一份基本的学习教程，希望对大家有用。也欢迎谈探讨学习一些经验。    目录 第一章 安装Nginx+Lua开发环境 第二章 Nginx+Lua开发入门 第三章 Redis/SSDB+Twemproxy安装与使用 第四章 L
  • php位运算符注意事项 home198979 位运算PHP&
    $a = $b = $c = 0; $a & $b = 1; $b | $c = 1  问a,b,c最终为多少?   当看到这题时，我犯了一个低级错误，误 以为位运算符会改变变量的值。所以得出结果是1 1 0 但是位运算符是不会改变变量的值的，例如： $a=1;$b=2; $a&$b;  这样a,b的值不会有任何改变
  • Linux shell数组建立和使用技巧 pda158 linux
    1.数组定义 　　[chengmo@centos5 ~]$ a=(1 2 3 4 5) 　　[chengmo@centos5 ~]$ echo $a 　　1 　　一对括号表示是数组，数组元素用“空格”符号分割开。 　　 2.数组读取与赋值 　　得到长度： 　　[chengmo@centos5 ~]$ echo ${#a[@]} 　　5 　　用${#数组名[@或
  • hotspot源码(JDK7) ol_beta javaHotSpotjvm
    源码结构图，方便理解：   ├─agent                            Serviceab
  • Oracle基本事务和ForAll执行批量DML练习 vipbooks oraclesql
    基本事务的使用： 从账户一的余额中转100到账户二的余额中去，如果账户二不存在或账户一中的余额不足100则整笔交易回滚 select * from account; -- 创建一张账户表 create table account( -- 账户ID id number(3) not null, -- 账户名称 nam
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他