zoukankan      html  css  js  c++  java
  • day53

    JS常用类

    一、Number

    1、常用数字

    整数:10
    小数:3.14
    科学计数法:1e5 | 1e-5
    正负无穷:Infinity | -Infinity
    

    2、常用进制

    二进制:0b1010
    八进制:012
    十进制:10
    十六进制:0xA
    

    3、NaN

    非数字类型,通过isNaN()进行判断
    

    4、常用常量

    最大值:MAX_VALUE(1.7976931348623157e+308)
    最小值:MIN_VALUE(5e-324)
    正负无穷:NEGATIVE_INFINITY | POSITIVE_INFINITY(Infinity | -Infinity)
    

    5、常用实例方法

    toExponential(n) => 3.14.toExponential(1) => 1.3e+1 (先科学记数,再确定精度,n为小数精度)
    toFixed(n) => 3.14.toFixed(1) => 3.1 (先确定精度,再普通记数,n为小数精度)
    toPrecision(n) => 13.14.toPrecision(1|2) => 1e+1|13 (先确定精度,再记数,n为位数进度)
    toString() => 
    
    v-hint:经典bug数字13.145

    二、时间

    1、创建并获取时间

    var date = new Date();
    

    2、时间戳

    date.getTime();
    

    3、获取时间

    年:date.getFullYear()
    月:date.getMonth() + 1
    日:date.getDate()
    星期:date.getDay()
    小时:date.getHours()
    分钟:date.getMinutes()
    秒:date.getSeconds()
    毫秒:date.getMilliseconds()
    

    4、常见格式时间

    getUTCFullYear()
    getUTCDate()
    getUTCHours()
    

    三、字符串

    1、常用字符串

    'string' | "string" | 'my name is "zero"' | "I'm boy" | "I "love" you"
    

    2、常用属性

    length:字符串长度
    

    3、常用方法

    chartAt(n):指定索引字符,同[n]
    concat(str):将目标字符串拼接到指定字符串之后
    indexOf(str):指定字符串第一次出现的位置
    lastIndexOf(str):指定字符串最一次出现的位置
    replace(re, str):将正则匹配到的字符串替换为指定字符串
    substr(n, m):从索引n开始,截取m个字符长度(m省略代表截取到最后)
    substring(n, m):从索引n开始,截取到索引m(m省略代表截取到最后)
    slice(n, m):同substring(n, m)
    split(re):以指定正则将字符串拆分为数组
    toUpperCase():转换为大写
    toLowerCase():转换为小写
    trim():去除首尾空白字符
    

    四、数组

    1、常见数组

    [1, 2, 3] | ['1', '2', '3'] | [1, '2', true]
    

    2、常用属性

    length:数组元素个数
    

    3、常用基础方法

    concat(arr):将目标数组拼接到指定数组之后
    indexOf(ele):指定元素第一次出现的位置
    lastIndexOf(ele):指定元素最一次出现的位置
    reverse():反转数组
    includes(ele, n):从索引n开始往后,元素ele是否在数组中,做全等匹配,索引从头开始n可以省略(in只做值匹配)
    fill(ele):以指定元素填充整个数组
    slice(n, m):从索引n开始,截取到索引m(m省略代表截取到最后)
    join(str):以指定字符串连接成字符串
    

    4、增删改方法

    push(ele):从尾加
    unshift(ele):从头加
    
    pop():从尾删
    shift():从头删
    
    splice(begin, length, ...eles):完成增删改
    // begin开始索引
    // length长度
    // 新元素们(可以省略)
    

    5、回调函数方法

    filter(function(value, index){ return true | false}):过滤器
    every(function(value, index){ return 条件表达式; }):全部满足条件
    some(function(value, index){ return 条件表达式; }):部分满足条件
    reduce(function(prev,value,index){ return prev * value; }):累积
    sort(function(o, n){ return o > n }):正逆向排序
    

    五、Math

    1、常用常量

    E:返回算术常量 e,即自然对数的底数(约等于2.718)
    LN2:返回 2 的自然对数(约等于0.693)
    LN10:返回 10 的自然对数(约等于2.302)
    LOG2E:返回以 2 为底的 e 的对数(约等于 1.4426950408889634)
    LOG10E:返回以 10 为底的 e 的对数(约等于0.434)
    PI:返回圆周率(约等于3.14159)
    

    2、常用方法

    abs(x):返回 x 的绝对值
    ceil(x):向上取整
    floor(x):向下取整
    max(...n):求最大值
    min(...n):求最小值
    pow(x,y):返回 x 的 y 次幂
    random():返回 0 ~ 1 之间的随机数
    round(x):四舍五入
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>钟钟钟</title>
    	<style>
    		.body{
    			margin: 50px auto;
    			 400px;
    			height: 400px;
    			border: 5px solid black;
    			border-radius: 50%;
    			position: relative;
    			background-color:black;
    		}
    		.time{
    			font-size: 28px;
    			color: #d3d3d3;
    		}
    		.time div{
    			 30px;
    			height: 400px;
    			position: absolute;
    			left: 185px;
    		}
    		.time-1,.time-2,.time-3,.time-4,.time-5,.time-6{
    			display: block;
    			margin-bottom: 320px;
    		}
    		.time-d-1{
    			transform: rotateZ(30deg);		
    		}
    		.time-1{
    			transform: rotateZ(-30deg);
    		}
    		.time-7{
    			display: block;
    			transform: rotateZ(-30deg);
    		}
    		.time-d-2{
    			transform: rotateZ(60deg);		
    		}
    		.time-2{
    			transform: rotateZ(-60deg);
    		}
    		.time-8{
    			display: block;
    			transform: rotateZ(-60deg);
    		}
    		.time-d-3{
    			transform: rotateZ(90deg);		
    		}
    		.time-3{
    			transform: rotateZ(-90deg);
    		}
    		.time-9{
    			display: block;
    			transform: rotateZ(-90deg);
    		}
    		.time-d-4{
    			transform: rotateZ(120deg);		
    		}
    		.time-4{
    			transform: rotateZ(-120deg);
    		}
    		.time-10{
    			display: block;
    			transform: rotateZ(-120deg);
    		}
    		.time-d-5{
    			transform: rotateZ(150deg);		
    		}
    		.time-5{
    			transform: rotateZ(-150deg);
    		}
    		.time-11{
    			display: block;
    			transform: rotateZ(-150deg);
    		}
    		.p{
    			 20px;
    			height: 20px;
    			border-radius: 50%;
    			position: absolute;
    			/*border: 5px*/
    			background-color: white;
    			top: 190px;
    			left: 190px;
    		}
    		.hour{
    			position: absolute;
    			height: 360px;
    			 20px;
    			/*background-color: cyan;*/
    			top:20px;
    			left: 190px;
    		}
    		.hour-z{
    			margin-top: 80px;
    			/*margin-left: 1px;*/
    			height: 120px;
    			 18px;
    			border-radius:50% 50% 3px 3px;
    			border: solid 1px cyan;
    			box-shadow: 0 0 5px 3px cyan;
    			background-color: yellowgreen;
    		}
    		.minute{
    			position: absolute;
    			height: 360px;
    			 20px;
    			/*background-color: cyan;*/
    			top:20px;
    			left: 190px;
    		}
    		.minute-z{
    			margin-top: 40px;
    			/*margin-left: 1px;*/
    			height: 160px;
    			 14px;
    			border-radius:60% 60% 3px 3px;
    			border: solid 3px cyan;
    			box-shadow: 0 0 3px 2px cyan;
    			background-color: blue;
    		}
    
    		.second{
    			position: absolute;
    			height: 360px;
    			 20px;
    			/*background-color: cyan;*/
    			top:20px;
    			left: 190px;
    		}
    		.second-z{
    			margin-top: 10px;
    			/*margin-left: 1px;*/
    			height: 190px;
    			 12px;
    			border-radius:60% 60% 3px 3px;
    			border: solid 4px cyan;
    			box-shadow: 0 0 2px 1px cyan;
    			background-color: red;
    		}
    	</style>
    </head>
    <body>
    	<div class="body">
    		<div class="time">
    			<div class="time-d-1">
    				<span class="time-1">1</span>
    				<span class="time-7">7</span>
    			</div>
    			<div class="time-d-2">
    				<span class="time-2">2</span>
    				<span class="time-8">8</span>
    			</div>
    			<div class="time-d-3">
    				<span class="time-3">3</span>
    				<span class="time-9">9</span>
    			</div>
    			<div class="time-d-4">
    				<span class="time-4">4</span>
    				<span class="time-10">10</span>
    			</div>
    			<div class="time-d-5">
    				<span class="time-5">5</span>
    				<span class="time-11">11</span>
    			</div>
    			<div class="time-d-6">
    				<span class="time-6">12</span>
    				<span class="time-12">6</span>
    			</div>
    		</div>
    
    		<div class="second">
    			<div class="second-z"></div>
    		</div>
    		<div class="minute">
    			<div class="minute-z"></div>
    		</div>
    
    		<div class="hour">
    			<div class="hour-z"></div>
    		</div>
    
    
    		<div class="p">
    		</div>
    	</div>
    </body>
    <script>
    		// var hour = date.getHours();
    		// var minute = date.getMinutes();
    		// var second = date.getSeconds();
    	var second_z = document.querySelector('.second');
    	var minute_z = document.querySelector('.minute');
    	var hour_z = document.querySelector('.hour');
    	var time = document.querySelector('.time');
    	var getdate = function () {
    		var date = new Date();
    		var hour = date.getHours();
    		var minute = date.getMinutes();
    		var second = date.getSeconds();
    		var minsecond = date.getMilliseconds();
    		return [hour,minute,second,minsecond]
    	}
    	var getcolor = function () {
    		var r = parseInt(Math.random()*256);
    		var g = parseInt(Math.random()*256);
    		var b = parseInt(Math.random()*256);
    		return [r,g,b]
    
    	}
    	setInterval (function () {
    		var list_date = getdate();
    		
    		
    		second_z.style.transform = 'rotateZ('+((list_date[2]*6)+(list_date[3]*0.006))+'deg)';
    		minute_z.style.transform = 'rotateZ('+(list_date[1]*6)+'deg)';
    		hour_z.style.transform = 'rotateZ('+((list_date[0]*30)+(list_date[1]*0.5))+'deg)';
    	},25)
    	setInterval (function () {
    		var list_color = getcolor();
    		time.style.color = 'rgb('+list_color[0]+','+list_color[1]+','+list_color[2]+')';
    	},1000)
    </script>
    </html>
    
  • 相关阅读:
    Maven 项目管理工具基础入门系列(二)
    Python OJ 从入门到入门基础练习 10 题
    Maven 项目管理工具基础知识系列(一)
    Markdown 编辑器使用指南
    解决:GitHub 远程端添加了 README.md 文件后,本地 push 代码时出现错误
    CentOS7.4搭建基于用户认证的MongoDB4.0三节点副本集集群详细文档
    Redhat 6.7 x64升级SSH到OpenSSH_7.4p1完整文档
    RHEL6.7 x64双节点安装Oracle 11g R2 RAC
    局域网下通过代理实现服务器的互联网访问
    RedHat 6.7 Enterprise x64环境下使用RHCS部署Oracle 11g R2双机双实例HA
  • 原文地址:https://www.cnblogs.com/yaoxiaofeng/p/9808372.html
Copyright © 2011-2022 走看看