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;

			width: 400px;

			height: 400px;

			border: 5px solid black;

			border-radius: 50%;

			position: relative;

			background-color:black;

		}

		.time{

			font-size: 28px;

			color: #d3d3d3;

		}

		.time div{

			width: 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{

			width: 20px;

			height: 20px;

			border-radius: 50%;

			position: absolute;

			/*border: 5px*/

			background-color: white;

			top: 190px;

			left: 190px;

		}

		.hour{

			position: absolute;

			height: 360px;

			width: 20px;

			/*background-color: cyan;*/

			top:20px;

			left: 190px;

		}

		.hour-z{

			margin-top: 80px;

			/*margin-left: 1px;*/

			height: 120px;

			width: 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;

			width: 20px;

			/*background-color: cyan;*/

			top:20px;

			left: 190px;

		}

		.minute-z{

			margin-top: 40px;

			/*margin-left: 1px;*/

			height: 160px;

			width: 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;

			width: 20px;

			/*background-color: cyan;*/

			top:20px;

			left: 190px;

		}

		.second-z{

			margin-top: 10px;

			/*margin-left: 1px;*/

			height: 190px;

			width: 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>

day53的更多相关文章

  1. day53——标签操作

    day53 今日内容 标签操作 值操作 取值: 文本输入框:$('#username').val(); input,type=radio单选框: $('[type="radio"] ...

  2. day53 鼠标事件 键盘事件 及JQuery

    复习 // 语法: ECMAScript 操作: DOM BOM // 1.类型转化 // 转数字: +"3.14" | parseInt("123abc") ...

  3. Python：Day53 Template基础

    一.模板由 html代码+逻辑控制代码 组成 二.逻辑控制代码的组成 1.变量(使用双大括号来引用变量) 语法格式:{{ var_name }} -----------------------Temp ...

  4. python 全栈开发，Day53(jQuery的介绍,jQuery的选择器,jQuery动画效果)

    js总结 js: 1.ECMAScript5 ES5语法 2.DOM CRUD 获取 3种方式 id tag className //面向对象 对象 : 属性和方法 某个对象中 function $( ...

  5. 前端基础之JavaScript（Day53）

    阅读目录 一.JavaScript基础 二.JavaScript对象 三.BOM对象 一.JavaScript基础 http://www.cnblogs.com/yuanchenqi/articles ...

  6. （day53）五、模型层（ORM）、settings文件配置

    目录 一.settings配置 (一)测试文件配置 (二)查看对应sql语句 二.模型表数据的增删改查 (一)创建数据 (1)create方法 (2)利用对象的绑定方法 (二)修改数据 (1)利用qu ...

  7. python 全栈开发，Day53(jQuery的介绍，jQuery的选择器，jQuery动画效果)

    01-jQuery的介绍 1.为什么要使用jQuery 在用js写代码时,会遇到一些问题: window.onload 事件有事件覆盖的问题,因此只能写一个事件. 代码容错性差. 浏览器兼容性问题. ...

  8. day53 作业

    写一个博客首页 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  9. day53 html收尾

    目录 一.解决浮动带来的影响 二.溢出属性 三.定位 四.验证浮动和定位是否脱离文档流 五.z-index模态框 六.透明度opacity 七.js简介 一.解决浮动带来的影响 块级标签内的浮动如果该 ...

随机推荐

  1. openstack-on-centos7之环境准备

    centos7配置静态ip ifconfig查看网卡信息并获取到网卡的名称eth0s3 ifconfig 进入到网卡配置目录 cd /etc/sysconfig/network-scripts/ 找到 ...

  2. win7游戏窗口设置

    在开始搜索框输入regedit打开注册表,定位到HKEY_LOCAL_MACHINE------SYSTEM------ControlSet001-------Control-------Graphi ...

  3. 设计模式(19)--Observer(观察者模式)--行为型

    作者QQ:1095737364    QQ群:123300273     欢迎加入! 1.模式定义: 观察者模式是对象的行为模式,又叫发布-订阅(Publish/Subscribe)模式.模型-视图( ...

  4. 4.SSM配置shiro权限管理

    作者QQ:1095737364    QQ群:123300273     欢迎加入! 1.搭建SSM项目: http://www.cnblogs.com/yysbolg/p/6909021.html ...

  5. Ubuntu14.16.18更新源

    一.源概述 源,可以认为是软件库,使用apt-get install安装的时候,会在源保存的库中进行搜索,因此源(默认源在欧洲)会影响下载速度和资源数量 二.更新源 1.步骤 编辑/etc/apt/s ...

  6. Expo大作战(十六)--expo结合firebase 一个nosql数据库（本章令我惊讶但又失望！）

    简要:本系列文章讲会对expo进行全面的介绍,本人从2017年6月份接触expo以来,对expo的研究断断续续,一路走来将近10个月,废话不多说,接下来你看到内容,讲全部来与官网 我猜去全部机翻+个人 ...

  7. vm virtualBox下 centos7 Linux系统 与本地 window 系统 网络连接 配置

    由于要模拟生产环境开发,所以要在自己的电脑上安装虚拟机,这里做一下记录. centos与本机网络连接 1. 环境 虚拟机 VirtualBox-5.2.0-118431-Win Linux镜像 Cen ...

  8. As3截图转换为ByteArray传送给后台node的一种方法

    最近将以前用As3+Php做的一个画板拿出来改成了As3+nodejs(expressjs4). Node: 1. 将图片存放的路径设置为静态公开的路径. app.use(express.static ...

  9. Sql Server 中如果使用TransactionScope开启一个分布式事务，使用该事务两个并发的连接会互相死锁吗

    提问: 如果使用TransactionScope开启一个分布式事务,使用该事务两个并发的连接会互相死锁吗? 如果在.Net中用TransactionScope开启一个事务. 然后在该事务范围内启动两个 ...

  10. Eclipse+Weblogic 12开发简单的Enterprise Application

    学到EJB方面的内容,遇到了很多问题,翻阅了无数遍Java EE和Weblogic的官方文档,在google上进行了无数次搜索都没有答案,可能我要找的答案太冷门.这一切都起源于Java EE官方文档里 ...