hu_Time
hu_Time

js控制audio音量

作者：hu_time
描述：记录一下学习的一个使用原生js控制audio音量的小案例，代码如下：

html:


<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>
    <link rel="stylesheet" href="./index.css">
head>
<body>
    <div class="audio-box">
        <audio src="./music-bg.mp3" loop autoplay >audio>
    div>
    <div class="container">
        <p class="title">0p>
        <div class="slide-bar">
            <div class="bar">div>
        div>
        
        <div class="control">
            <div class="center">div>
            <div class="pointer">div>
        div>
        <div class="desc">
            <p>根据按空格键时箭头的指向控制音量p>
            <p>中间：增加5%p>
            <p>其他：大于五十是会减少5%，少于50时会清零p>
        div>
    div>
  
    <script src="./index.js">script>
body>
html>

css:

.title {
    text-align: center;
}

.slide-bar {
    width: 150px;
    height: 15px;
    border: 2px solid #333;
    margin: 0 auto;
    position: relative;
}

.bar{
    position: absolute;
    left: 0;
    height: 100%;
    /* width: 100%; */
    background: red;
}

.control{
    width: 300px;
    height: 15px;
    background: lightblue;
    margin: 15px auto;
}

.center{
    width: 20px;
    height: 100%;
    background: red;
    margin: 0 auto;
}

.pointer{
    width: 20px;
    height: 22px;
    background: url("./pointer.jpg");
    /* 显示时，向左偏移自身宽度的一半 */
    transform: translateX(-50%);
}

.desc{
    margin: 35px 0;
    text-align: center;
}
.audio-box{
    margin: 0 auto;
    text-align: center;
}

js

//音量控制
var volumn = {
    value: 0, //当前音量，表示百分比，0~100
    titleDom: document.querySelector(".title"), //显示音量数字的dom
    barDom: document.querySelector(".bar"), //显示蓝红色条的div
    audioDom: document.querySelector("audio"), //audio元素
    show: function () {
        this.titleDom.innerText = this.value; //音量值
        this.barDom.style.width = this.value + "%";
        this.audioDom.volume = this.value / 100;
    },
    increase: function (val) { //增加指定的音量
        this.value += val;
        if(this.value >= 100){
            this.value = 100 //最大音量
        }
        if(this.value <= 0){
            this.value = 0;  //最小音量
        }
        this.show(); //渲染dom
    },
    clear: function () { //清零
        this.value = 0;
        this.show();
    }
}

//箭头
var pointer = {
    left: 0, //记录当前的marginLeft的值
    pointerDom: document.querySelector(".pointer"),
    maxLeft: 300,   //最大移动值
    startMove: function () { //开始自动左右跑   
        var that = this;
        var step = 2;   //每次移动的值
        setInterval(function () {
            that.left += step;
            if(that.left >= that.maxLeft){
                that.left = that.maxLeft;   //最大移动范围
                step = -step
            }
            if(that.left <= 0){
                that.left = 0;  //最小移动范围
                step = -step;
            }
            that.pointerDom.style.marginLeft = that.left + "px"; //渲染dom
        }, 16)
    },
    isCenter: function () {
        var centerWidth = 30;
        var minLeft = this.maxLeft / 2 - centerWidth / 2; //中间位置的左边
        var maxLeft = this.maxLeft / 2 + centerWidth / 2; //中间位置的右边
        return this.left >= minLeft && this.left <= maxLeft; 
    }
}

volumn.show();
pointer.startMove(); //开始自动移动

// 调用事件
window.onkeydown = function (e) {
    if (e.key === " ") {
        //按下的是空格
        if (pointer.isCenter()) {
            //箭头刚好在中间
            volumn.increase(5);
        }
        else {
            if(volumn.value >= 50){
                volumn.increase(-5);
            }else{
                volumn.clear();
            }
        }
    }
}
// document.querySelector(".jia").onclick = function () {
//     volumn.increase(5);
//     volumn.show();
// }
// document.querySelector(".jian").onclick = function () {
//     volumn.increase(-5);
//     volumn.show();
// }

注：因为是原生js，所以不用引用其他类库，直接复制代码即可复用，

小箭头图片：

在这里插入图片描述
音乐可自行下载并修改路径或者文件名称。

你可能感兴趣的:(学习记录小案例)

  • 分享Python7个爬虫小案例（附源码） 人工智能-猫猫 爬虫python开发语言
    在这篇文章中，我们将分享7个Python爬虫的小案例，帮助大家更好地学习和了解Python爬虫的基础知识。以下是每个案例的简介和源代码：1.爬取豆瓣电影Top250这个案例使用BeautifulSoup库爬取豆瓣电影Top250的电影名称、评分和评价人数等信息，并将这些信息保存到CSV文件中。importrequestsfrombs4importBeautifulSoupimportcsv#请求U
  • iOS接入微信支付（小白都能看懂的微信支付） 马拉萨的春天 功能模块一天一读基础知识点
    因为近期项目中需要接入微信支付功能，自己也爬了很多的坑，所以做了一下这边文章供大家学习参考，远离爬坑，文章主要讲到以下五部分：一、填写商户平台所需资料二、具体Demo代码@Github下载地址本文为本人学习记录笔记，如需转载，请注明出处@iOS_lyon填写商户平台所需资料一、填写经营信息@查看截图指引下图选择不同的类目，所需要上传的资料也是有所不同的，下图拿其它为例子填写经营信息二、填写商户信息
  • 2025-03-15 学习记录--C/C++-PTA 练习3-4 统计字符 小呀小萝卜儿 学习-C/C++学习c语言
    合抱之木，生于毫末；九层之台，起于累土；千里之行，始于足下。一、题目描述⭐️练习3-4统计字符本题要求编写程序，输入10个字符，统计其中英文字母、空格或回车、数字字符和其他字符的个数。输入格式:输入为10个字符。最后一个回车表示输入结束，不算在内。输出格式:在一行内按照letter=英文字母个数,blank=空格或回车个数,digit=数字字符个数,other=其他字符个数的格式输出。输入样例:a
  • 2025-03-13 学习记录--C/C++-PTA 练习2-9 整数四则运算 小呀小萝卜儿 学习-C/C++学习c语言
    合抱之木，生于毫末；九层之台，起于累土；千里之行，始于足下。一、题目描述⭐️练习2-9整数四则运算本题要求编写程序，计算2个正整数的和、差、积、商并输出。题目保证输入和输出全部在整型范围内。输入格式:输入在一行中给出2个正整数A和B。输出格式:在4行中按照格式“A运算符B=结果”顺序输出和、差、积、商。输入样例:32输出样例:3+2=53-2=13*2=63/2=1二、代码（C语言）⭐️#incl
  • Linux 命令学习记录 hxung 面试学习使用linux学习运维
    Linux命令详解与进阶指南Linux是一种广泛使用的开源操作系统，掌握Linux命令是开发者和系统管理员的必备技能。本文将详细介绍Linux的常用命令，并涵盖一些高级进阶技巧，帮助你更高效地使用Linux。目录基础命令文件与目录操作文本处理系统信息权限管理进阶命令进程管理网络操作磁盘管理Shell脚本高级技巧管道与重定向正则表达式任务调度性能监控案例实战日志分析自动化部署服务器监控基础命令文件与
  • # Manim学习记录（2） 鼠鼠emo了捏 pythonnumpyvscode数学建模
    第一个案例GraphingMovement这个开始再坐标轴上画函数图像以及移动frommanimimport*classGraphingMovement(Scene):defconstruct(self):axes=Axes(x_range=[0,5,1],#x轴范围：从0到5，刻度间隔为1y_range=[0,3,1],#y轴范围：从0到3，刻度间隔为1x_length=5,#x轴长度为5（单位
  • MySQL理论八股的学习记录 不吃元西 好记性不如烂笔头mysql学习数据库
    什么是MySQLMySQL是一种关系型数据管理系统数据库三大范式是什么？第一范式（1NF）：要求数据库表的每一列都是不可分割的原子数据项。第二范式（2NF）：在1NF的基础上，非码属性必须完全依赖于候选码（在1NF基础上消除非主属性对主码的部分函数依赖）第二范式需要确保数据库表中的每一列都和主键相关，而不能只与主键的某一部分相关（主要针对联合主键而言）。第三范式（3NF）：在2NF基础上，任何非主
  • Android Framework学习——安卓进程启动流程（Android 13） Big Popsicle android学习
    提示：本文仅作个人学习记录，禁止转载本文参考：袁神的文章，理解Android进程创建流程文章目录1，前言2，简略步骤3，代码走读3.1，提要，从系统启动末尾开始3.2，system_server发起请求3.3，Zygote创建进程3.4，新进程的运行总结1，前言进程是作为应用程序容器存在的，每个应用启动前需要先创建一个进程，进程是由Zygote进程孵化来的，它拥有独立的资源空间，用来运行四大组件，
  • 不知道天气咋样？一起用Python爬取天气数据分析告诉你 Dragon少年 Pythonpython爬虫图表可视化
    前言今天我们分享一个小案例，获取天气数据，进行可视化分析，带你直观了解天气情况！一、核心功能设计总体来说，我们需要先对中国天气网中的天气数据进行爬取，保存为csv文件，并将这些数据进行可视化分析展示。拆解需求，大致可以整理出我们需要分为以下几步完成：通过爬虫获取中国天气网7.20-7.21的降雨数据，包括城市，风力方向，风级，降水量，相对湿度，空气质量。对获取的天气数据进行预处理，分析河南的风力等
  • 用SpringBoot做一个web小案例环境搭建 只恨天高 Java代码笔记springbootjava后端
    前面我讲了四部分内容：springboot入门，springboot的配置相关知识点，springboot的视图模板引擎，springboot整合持久层框架有了这些知识点，我们就可以来完成一个相对功能完整的增删改查的小案例了，这个案例我们把以前讲JavaWeb入门课程中的哪个例子重新写一遍，基本功能：登录，用户列表显示，用户信息的增删改查，用户的模糊查询等，选用的技术由springboot2.0.
  • 2025-03-14 学习记录--C/C++-PTA 习题2-1 求整数均值 小呀小萝卜儿 学习-C/C++学习c语言
    合抱之木，生于毫末；九层之台，起于累土；千里之行，始于足下。一、题目描述⭐️习题2-1求整数均值本题要求编写程序，计算4个整数的和与平均值。题目保证输入与输出均在整型范围内。输入格式:输入在一行中给出4个整数，其间以空格分隔。输出格式:在一行中按照格式“Sum=和;Average=平均值”顺序输出和与平均值，其中平均值精确到小数点后一位。输入样例:1234输出样例:Sum=10;Average=2
  • 深度学习项目--基于DenseNet网络的“乳腺癌图像识别”，准确率90%+，pytorch复现 羊小猪~~ 深度学习网络pytorch人工智能python机器学习分类
    本文为365天深度学习训练营中的学习记录博客原作者：K同学啊前言如果说最经典的神经网络，ResNet肯定是一个，从ResNet发布后，很多人做了修改，denseNet网络无疑是最成功的一个，它采用密集型连接，将通道数连接在一起；本文是基于上一篇复现DenseNet121模型，做一个乳腺癌图像识别，效果还行，准确率0.9+;CNN经典网络之“DenseNet”简介，源码研究与复现(pytorch)：
  • Flutter_学习记录_device_info_plus 插件获取设备信息 一人前行 flutter学习flutter
    引入三方库device_info_plus导入头文件import'package:device_info_plus/device_info_plus.dart';获取设备信息的主要代码DeviceInfoPlugindeviceInfoPlugin=DeviceInfoPlugin();BaseDeviceInfodeviceInfo=awaitdeviceInfoPlugin.deviceInf
  • 小白快速上手React 看这篇就够了！！（基础篇） 一朵好运莲 react.js前端前端框架
    本篇可以快速了解React的基础语法，便于遗忘时快速复习，里面的小案例通俗易懂，没有废话，只有简单、简单、还是简单！目录一、为什么要学React？二、React入门三、JSX语法1、使用JSX创建元素2、为什么在脚手架中可以使用JSX语法3、嵌入JS表达式4、JS条件渲染5、JS列表渲染6、样式处理四、React组件1、函数创建组件2、类组件3、抽离成单独的JS文件五、React事件处理1、事件绑
  • 第十五届蓝桥杯省赛电子类EDA学习记录（客观题） @小张要努力 蓝桥杯学习单片机proteus嵌入式硬件
    01.常用作负载电源通断控制的元器件有（ABCD）。A.三极管B．MOS管C．继电器D．晶闸管解析：[1]三极管：三极管具有电流控制作用，在电路中可以作为开关使用，通过控制基极电流来控制集电极和发射极之间的通断，从而实现对负载电源的通断控制。例如在一些简单的电子电路中，利用三极管的开关特性来控制小功率负载的电源通断，如控制一个小LED灯的亮灭等。[2]MOS管：MOS管（金属-氧化物-半导体场效应
  • 3 小时精通 Python 玩转 Excel：自动化办公实战案例大揭秘 七七知享 Pythonexcel自动化python办公爬虫运维人工智能
    在当今快节奏的办公环境下，掌握高效的办公技能成为提升工作效率的关键。Python作为一门强大且易于上手的编程语言，在自动化办公领域发挥着巨大的作用，尤其是在处理Excel数据方面。你是否渴望摆脱繁琐重复的Excel操作，让电脑自动帮你完成数据处理任务？现在，只需要3小时，就能学会用Python处理Excel及实现各种自动化办公小案例，大幅提升工作效率。接下来，让我们一同开启这趟神奇的Python自
  • 第十五届蓝桥杯省赛电子类嵌入式学习记录（客观题） @小张要努力 蓝桥杯学习职场和发展嵌入式硬件单片机51单片机
    01.SMT32微控制器的SPI可以按照时钟相位和极性配置多少种工作模式（B）。A.2B.4C.8D.16解析：SPI（SerialPeripheralInterface）总线是一种同步串行外设接口，它可以使MCU与各种外围设备以串行方式进行通信以交换数据。SPI的工作模式由时钟极性（CPOL）和时钟相位（CPHA）来决定。[1]时钟极性（CPOL）：决定了SPI时钟信号（SCK）的空闲状态电平。
  • N1学习打卡笔记 无涯学徒1998 学习笔记
    本文为365天深度学习训练营中的学习记录博客原作者：K同学啊Onhot编码one-hot编码的基本思想是将每个类别映射到一个向量，其中只有一个元素的值为1，其余元素的值为0。这样，每个类别之间就是相互独立的，不存在顺序或距离关系。例如，对于三个类别的情况，可以使用如下的one-hot编码：类别1：[1,0,0]类别2：[0,1,0]类别3：[0,0,1]这样的表示方式有助于模型更好地理解文本含义。
  • 第20周：Pytorch文本分类入门 weixin_46620278 pytorch分类人工智能
    目录前言一、前期准备1.1环境安装导入包1.2加载数据1.3构建词典1.4生成数据批次和迭代器二、准备模型2.1定义模型2.2定义示例2.3定义训练函数与评估函数三、训练模型3.1拆分数据集并运行模型3.2使用测试数据集评估模型总结前言本文为[365天深度学习训练营]中的学习记录博客原作者：[K同学啊]说在前面本周任务：了解文本分类的基本流程、学习常用数据清洗方法、学习如何使用jieba实现英文分
  • NLP新手入门-第N1周：Pytorch文本分类入门 Oaix Nay 365天深度学习训练记录pytorch自然语言处理分类
    本文为365天深度学习训练营中的学习记录博客原作者：K同学啊|接辅导、项目定制目录一、课题背景和开发环境二、环境安装三、文本分类1.加载数据2.构建词典3.生成数据批次和迭代器4.定义模型5.定义实例6.定义训练函数与评估函数7.拆分数据集并运行模型8.使用测试数据集评估模型一、课题背景和开发环境第N1周：Pytorch文本分类入门Python3.8.12pytorch==1.8.1+cu111t
  • BERT（Bidirectional Encoder Representations from Transformers）的序列分类模型，简单学习记录 努力努力再努力呐 BERTbert分类学习
    一、代码#本地离线模型使用fromtransformersimportAutoModelForCausalLM,AutoTokenizer,pipeline,BertForSequenceClassification,BertTokenizer#设置具体包含config.json的目录，只支持绝对路径model_dir=r"models\bert-base-chinese"#model_dir=r
  • C语言学习日记--循环，分支语句 梦想成为大牛呀 c语言学习开发语言
    C语言学习日记--循环分支语句题目一1.题目展示2.完成题目的过程中问题的出现（1）怎么多组输入3.代码展示4.问题的解决（1）关于多组输入此博客为学习记录，还请看官点点赞为我加油呀~~题目一1.题目展示2.完成题目的过程中问题的出现（1）怎么多组输入3.代码展示#includeintmain(){intn=0;while(scanf("%d",&n)!=EOF){if(n>=3&&n<=20){
  • IDEA与Maven使用-学习记录（持续补充...） eggcode Java工具intellij-ideamaven学习
    1.下载与安装以ideaIU-2021.3.1为例，安装步骤：以管理员身份启动ideaIU-2021.3.1修改安装路径为：D:\ProgramFiles\JetBrains\IntelliJIDEA2021.3.1勾选【创建桌面快捷方式】（可选）、【打开文件夹作为项目】（可选）。解压crack文件，双击里面的【破解】文件，出现success的提示。双击打开IDEA2021，选择Getlicens
  • 斯坦福UE4 + C++课程学习记录 9：蓝图-简易开关 Surkea C+++UEue4ue5游戏引擎c++学习
    目录1.前言2.创建蓝图类3.改变把手角度4.打开宝箱UE中的蓝图是一种基于C++的可视化编程系统，它将大量常用的底层代码接口暴露出来，方便开发者在UE中快速调用，其可视化的呈现方式让那些不专攻编程的人员（如设计、美工、策划等）也能快速上手使用。从程序开发的角度，学习蓝图可以方便开发中的很多环节；从业务的角度，掌握蓝图也有利于开发和其他环节的同事进行交流。本部分的第一个示例，是使用操纵杆开关控制宝
  • 比特币,区块链及相关概念简介(一) 湖光秋色 区块链区块链比特币去中心化
    目录什么是比特币比特币用来交易什么呢应用场景和黄金的关系相似之处：不同之处：如果是交易才会有比特币奖励那第一个持有者是怎么获取的呢又是怎么交易的呢其他加密货币该系列文章链接以下内容结合了chatgpt3.5以及网络文章。用于学习记录。简介：介绍了比特币的概念，比特币的交易对象，比特币的应用场景，以及和黄金的关系；其他加密货币等。什么是比特币比特币是一种数字货币，也是全球第一个去中心化的加密货币。它
  • 前端学习——CSS3实现时钟效果 younger_LF 前端（HTML+CSS+JS）CSS动画时钟效果
    CSS3实现时钟效果最近想开始认真学习，然后想把学习记录下来，就写在博客这里了。最先是用CSS实现的是一个时钟的效果，如下图：实现效果1.圆盘说到时钟，肯定最先想到的是一个圆，所以就从一个圆开始。先写一个div，然后给相关的样式.clock{position:absolute;width:250px;height:250px;left:50%;top:50%;transform:translate
  • 2025-03-09 学习记录--C/C++-PTA 习题10-8 递归实现顺序输出整数 小呀小萝卜儿 学习-C/C++学习c语言
    合抱之木，生于毫末；九层之台，起于累土；千里之行，始于足下。一、题目描述⭐️裁判测试程序样例：#includevoidprintdigits(intn);intmain(){intn;scanf("%d",&n);printdigits(n);return0;}/*你的代码将被嵌在这里*/输入样例12345输出样例12345二、代码（C语言）⭐️voidprintdigits(intn){if(n
  • 2025-03-08 学习记录--C/C++-PTA 习题10-1 判断满足条件的三位数 小呀小萝卜儿 学习-C/C++学习c语言
    合抱之木，生于毫末；九层之台，起于累土；千里之行，始于足下。一、题目描述⭐️裁判测试程序样例：#include#includeintsearch(intn);intmain(){intnumber;scanf("%d",&number);printf("count=%d\n",search(number));return0;}/*你的代码将被嵌在这里*/输入样例500输出样例count=6二、代码
  • Django系列教程（5）——Django模型详解 l软件定制开发工作室 Django教程django
    目录模型定义小案例模型的组成模型的字段基础字段关系字段on_delete删除选项related_name选项模型的META选项模型的方法标准方法示例一：自定义方法示例二：自定义Manager方法完美的高级Django模型示例小结Model(模型)简而言之即数据模型，是一个Django应用的核心。模型不是数据本身（比如数据表里的数据),而是抽象的描述数据的构成和逻辑关系。每个Django的模型(mo
  • [Python入门学习记录(小甲鱼)]第4章 分支与循环 LIN-JUN-WEI python学习开发语言嵌入式硬件单片机
    第4章分支和循环讲些条件语句和循环语句4.1完整条件语句ifx>1:print(1)elifxstopstep0forxinrange(10)print(x)#打印0-9加上list()会像列表一下展示print(list(range(0,-10,-1)))#[0,-1,-2,-3,-4,-5,-6,-7,-8,-9]4.6break语句就一样，跳出这整个循环fornuminrange(1,11)
  • mysql主从数据同步 林鹤霄 mysql主从数据同步
    配置mysql5.5主从服务器(转) 教程开始：一、安装MySQL 说明：在两台MySQL服务器192.168.21.169和192.168.21.168上分别进行如下操作，安装MySQL 5.5.22  二、配置MySQL主服务器（192.168.21.169）mysql  -uroot  -p   &nb
  • oracle学习笔记 caoyong oracle
    1、ORACLE的安装    a>、ORACLE的版本    8i,9i :   i是internet    10g,11g : grid (网格)    12c : cloud (云计算)       b>、10g不支持win7 &
  • 数据库，SQL零基础入门 天子之骄 sql数据库入门基本术语
    数据库，SQL零基础入门        做网站肯定离不开数据库，本人之前没怎么具体接触SQL，这几天起早贪黑得各种入门，恶补脑洞。一些具体的知识点，可以让小白不再迷茫的术语，拿来与大家分享。          数据库，永久数据的一个或多个大型结构化集合，通常与更新和查询数据的软件相关
  • pom.xml 一炮送你回车库 pom.xml
    1、一级元素dependencies是可以被子项目继承的 2、一级元素dependencyManagement是定义该项目群里jar包版本号的，通常和一级元素properties一起使用，既然有继承，也肯定有一级元素modules来定义子元素 3、父项目里的一级元素<modules> <module>lcas-admin-war</module> <
  • sql查地区省市县 3213213333332132 sqlmysql
    -- db_yhm_city SELECT * FROM db_yhm_city WHERE class_parent_id = 1 -- 海南 class_id = 9 港、奥、台 class_id = 33、34、35 SELECT * FROM db_yhm_city WHERE class_parent_id =169 SELECT d1.cla
  • 关于监听器那些让人头疼的事 宝剑锋梅花香 画图板监听器鼠标监听器
           本人初学JAVA，对于界面开发我只能说有点蛋疼，用JAVA来做界面的话确实需要一定的耐心（不使用插件，就算使用插件的话也没好多少）既然Java提供了界面开发，老师又要求做，只能硬着头皮上啦。但是监听器还真是个难懂的地方，我是上了几次课才略微搞懂了些。       
  • JAVA的遍历MAP darkranger map
    Java Map遍历方式的选择 1. 阐述 　　对于Java中Map的遍历方式，很多文章都推荐使用entrySet，认为其比keySet的效率高很多。理由是：entrySet方法一次拿到所有key和value的集合；而keySet拿到的只是key的集合，针对每个key，都要去Map中额外查找一次value，从而降低了总体效率。那么实际情况如何呢？ 　　为了解遍历性能的真实差距，包括在遍历ke
  • POJ 2312 Battle City 优先多列+bfs aijuans 搜索
    来源：http://poj.org/problem?id=2312 题意：题目背景就是小时候玩的坦克大战，求从起点到终点最少需要多少步。已知S和R是不能走得，E是空的，可以走，B是砖，只有打掉后才可以通过。 思路：很容易看出来这是一道广搜的题目，但是因为走E和走B所需要的时间不一样，因此不能用普通的队列存点。因为对于走B来说，要先打掉砖才能通过，所以我们可以理解为走B需要两步，而走E是指需要1
  • Hibernate与Jpa的关系，终于弄懂 avords javaHibernate数据库jpa
    我知道Jpa是一种规范，而Hibernate是它的一种实现。除了Hibernate，还有EclipseLink(曾经的toplink)，OpenJPA等可供选择，所以使用Jpa的一个好处是，可以更换实现而不必改动太多代码。 在play中定义Model时，使用的是jpa的annotations，比如javax.persistence.Entity, Table, Column, OneToMany
  • 酸爽的console.log bee1314 console
    在前端的开发中，console.log那是开发必备啊，简直直观。通过写小函数，组合大功能。更容易测试。但是在打版本时，就要删除console.log，打完版本进入开发状态又要添加，真不够爽。重复劳动太多。所以可以做些简单地封装，方便开发和上线。 /** * log.js hufeng * The safe wrapper for `console.xxx` functions *
  • 哈佛教授：穷人和过于忙碌的人有一个共同思维特质 bijian1013 时间管理励志人生穷人过于忙碌
            一个跨学科团队今年完成了一项对资源稀缺状况下人的思维方式的研究，结论是：穷人和过于忙碌的人有一个共同思维特质，即注意力被稀缺资源过分占据，引起认知和判断力的全面下降。这项研究是心理学、行为经济学和政策研究学者协作的典范。 　　这个研究源于穆来纳森对自己拖延症的憎恨。他7岁从印度移民美国，很快就如鱼得水，哈佛毕业
  • other operate 征客丶 OSosx
    一、Mac Finder 设置排序方式，预览栏 在显示－》查看显示选项中 二、有时预览显示时，卡死在那，有可能是一些临时文件夹被删除了，如：/private/tmp[有待验证] -------------------------------------------------------------------- 若有其他凝问或文中有错误，请及时向我指出， 我好及时改正，同时也让我们一
  • 【Scala五】分析Spark源代码总结的Scala语法三 bit1129 scala
    1. If语句作为表达式 val properties = if (jobIdToActiveJob.contains(jobId)) { jobIdToActiveJob(stage.jobId).properties } else { // this stage will be assigned to "default" po
  • ZooKeeper 入门 BlueSkator 中间件zk
    ZooKeeper是一个高可用的分布式数据管理与系统协调框架。基于对Paxos算法的实现，使该框架保证了分布式环境中数据的强一致性，也正是基于这样的特性，使得ZooKeeper解决很多分布式问题。网上对ZK的应用场景也有不少介绍，本文将结合作者身边的项目例子，系统地对ZK的应用场景进行一个分门归类的介绍。 值得注意的是，ZK并非天生就是为这些应用场景设计的，都是后来众多开发者根据其框架的特性，利
  • MySQL取得当前时间的函数是什么 格式化日期的函数是什么 BreakingBad mysqlDate
    取得当前时间用 now() 就行。 在数据库中格式化时间 用DATE_FORMA T(date, format) . 根据格式串format 格式化日期或日期和时间值date，返回结果串。 可用DATE_FORMAT( ) 来格式化DATE 或DATETIME 值，以便得到所希望的格式。根据format字符串格式化date值: %S, %s 两位数字形式的秒（ 00,01,
  • 读《研磨设计模式》-代码笔记-组合模式 bylijinnan java设计模式
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ import java.util.ArrayList; import java.util.List; abstract class Component { public abstract void printStruct(Str
  • 4_JAVA+Oracle面试题(有答案) chenke oracle
    基础测试题 卷面上不能出现任何的涂写文字，所有的答案要求写在答题纸上，考卷不得带走。 选择题 1、 What will happen when you attempt to compile and run the following code? （3） public class Static { static { int x = 5; // 在static内有效 } st
  • 新一代工作流系统设计目标 comsci 工作算法脚本
      用户只需要给工作流系统制定若干个需求，流程系统根据需求，并结合事先输入的组织机构和权限结构，调用若干算法，在流程展示版面上面显示出系统自动生成的流程图，然后由用户根据实际情况对该流程图进行微调，直到满意为止，流程在运行过程中，系统和用户可以根据情况对流程进行实时的调整，包括拓扑结构的调整，权限的调整，内置脚本的调整。。。。。 在这个设计中，最难的地方是系统根据什么来生成流
  • oracle 行链接与行迁移 daizj oracle行迁移
    表里的一行对于一个数据块太大的情况有二种(一行在一个数据块里放不下) 第一种情况: INSERT的时候，INSERT时候行的大小就超一个块的大小。Oracle把这行的数据存储在一连串的数据块里(Oracle Stores the data for the row in a chain of data blocks)，这种情况称为行链接(Row Chain)，一般不可避免(除非使用更大的数据
  • [JShop]开源电子商务系统jshop的系统缓存实现 dinguangx jshop电子商务
    前言 jeeshop中通过SystemManager管理了大量的缓存数据，来提升系统的性能，但这些缓存数据全部都是存放于内存中的，无法满足特定场景的数据更新（如集群环境）。JShop对jeeshop的缓存机制进行了扩展，提供CacheProvider来辅助SystemManager管理这些缓存数据，通过CacheProvider,可以把缓存存放在内存,ehcache,redis，memcache
  • 初三全学年难记忆单词 dcj3sjt126com englishword
    several 儿子；若干 shelf 架子 knowledge 知识；学问 librarian 图书管理员 abroad 到国外，在国外 surf 冲浪 wave 浪；波浪 twice 两次；两倍 describe 描写；叙述 especially 特别；尤其 attract 吸引 prize 奖品；奖赏 competition 比赛；竞争 event 大事；事件 O
  • sphinx实践 dcj3sjt126com sphinx
      安装参考地址:http://briansnelson.com/How_to_install_Sphinx_on_Centos_Server   yum install sphinx 如果失败的话使用下面的方式安装 wget http://sphinxsearch.com/files/sphinx-2.2.9-1.rhel6.x86_64.rpm yum loca
  • JPA之JPQL（三） frank1234 ormjpaJPQL
    1 什么是JPQL JPQL是Java Persistence Query Language的简称，可以看成是JPA中的HQL， JPQL支持各种复杂查询。 2 检索单个对象 @Test public  void querySingleObject1() {     Query query = em.createQuery("sele
  • Remove Duplicates from Sorted Array II hcx2013 remove
    Follow up for "Remove Duplicates":What if duplicates are allowed at most twice? For example,Given sorted array nums = [1,1,1,2,2,3], Your function should return length
  • Spring4新特性——Groovy Bean定义DSL jinnianshilongnian spring 4
    Spring4新特性——泛型限定式依赖注入 Spring4新特性——核心容器的其他改进 Spring4新特性——Web开发的增强 Spring4新特性——集成Bean Validation 1.1(JSR-349)到SpringMVC  Spring4新特性——Groovy Bean定义DSL Spring4新特性——更好的Java泛型操作API  Spring4新
  • CentOS安装Mysql5.5 liuxingguome centos
    CentOS下以RPM方式安装MySQL5.5 首先卸载系统自带Mysql： yum remove mysql mysql-server mysql-libs compat-mysql51 rm -rf /var/lib/mysql rm /etc/my.cnf 查看是否还有mysql软件： rpm -qa|grep mysql 去http://dev.mysql.c
  • 第14章 工具函数（下） onestopweb 函数
    index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/
  • POJ 1050 SaraWon 二维数组子矩阵最大和
    POJ ACM第1050题的详细描述，请参照 http://acm.pku.edu.cn/JudgeOnline/problem?id=1050 题目意思： 给定包含有正负整型的二维数组，找出所有子矩阵的和的最大值。 如二维数组 0 -2 -7 0 9 2 -6 2 -4 1 -4 1 -1 8 0 -2 中和最大的子矩阵是 9 2 -4 1 -1 8 且最大和是15
  • [5]设计模式——单例模式 tsface java单例设计模式虚拟机
    单例模式：保证一个类仅有一个实例，并提供一个访问它的全局访问点   安全的单例模式：     /* * @(#)Singleton.java 2014-8-1 * * Copyright 2014 XXXX, Inc. All rights reserved. */ package com.fiberhome.singleton;
  • Java8全新打造，英语学习supertool yangshangchuan javasuperword闭包java8函数式编程
    superword是一个Java实现的英文单词分析软件，主要研究英语单词音近形似转化规律、前缀后缀规律、词之间的相似性规律等等。Clean code、Fluent style、Java8 feature: Lambdas, Streams and Functional-style Programming。   升学考试、工作求职、充电提高，都少不了英语的身影，英语对我们来说实在太重要
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他