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;
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的更多相关文章
- day53——标签操作
day53 今日内容 标签操作 值操作 取值: 文本输入框:$('#username').val(); input,type=radio单选框: $('[type="radio"] ...
- day53 鼠标事件 键盘事件 及JQuery
复习 // 语法: ECMAScript 操作: DOM BOM // 1.类型转化 // 转数字: +"3.14" | parseInt("123abc") ...
- Python：Day53 Template基础
一.模板由 html代码+逻辑控制代码 组成 二.逻辑控制代码的组成 1.变量(使用双大括号来引用变量) 语法格式:{{ var_name }} -----------------------Temp ...
- python 全栈开发，Day53(jQuery的介绍,jQuery的选择器,jQuery动画效果)
js总结 js: 1.ECMAScript5 ES5语法 2.DOM CRUD 获取 3种方式 id tag className //面向对象 对象 : 属性和方法 某个对象中 function $( ...
- 前端基础之JavaScript（Day53）
阅读目录 一.JavaScript基础 二.JavaScript对象 三.BOM对象 一.JavaScript基础 http://www.cnblogs.com/yuanchenqi/articles ...
- （day53）五、模型层（ORM）、settings文件配置
目录 一.settings配置 (一)测试文件配置 (二)查看对应sql语句 二.模型表数据的增删改查 (一)创建数据 (1)create方法 (2)利用对象的绑定方法 (二)修改数据 (1)利用qu ...
- python 全栈开发，Day53(jQuery的介绍，jQuery的选择器，jQuery动画效果)
01-jQuery的介绍 1.为什么要使用jQuery 在用js写代码时,会遇到一些问题: window.onload 事件有事件覆盖的问题,因此只能写一个事件. 代码容错性差. 浏览器兼容性问题. ...
- day53 作业
写一个博客首页 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- day53 html收尾
目录 一.解决浮动带来的影响 二.溢出属性 三.定位 四.验证浮动和定位是否脱离文档流 五.z-index模态框 六.透明度opacity 七.js简介 一.解决浮动带来的影响 块级标签内的浮动如果该 ...
随机推荐
- python-策略模式
源码地址:https://github.com/weilanhanf/PythonDesignPatterns 说明: 策略指的就是为了达到某一目的而采取的手段或者方法.为了实现软件设计咪表,对象可能 ...
- 从零开始学习html（十一）CSS盒模型——上
一.元素分类 在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的块状元素有: <div>.<p>.<h1 ...
- Memcached+WebApi记录
一.安装Memcached Memcached1.2.6 http://files.cnblogs.com/files/jasonduan/11465401756756.zip Memcached.C ...
- 配置ArcGIS Server使用LDAP身份认证
1.登陆ArcGIS Server Manager,修改站点的安全设置.选择用户和角色来自现有企业系统(LDAP或Windows域). 2.选择LDAP存储类型. 3.填写LDAP用户存储连接信息.主 ...
- 绑定Oracle Database 到 ActiveReport
ActiveReport 可以和多种数据源交互,包括OLEDB, SQL, XML和集合对象. 在本文中我们将阐述如何绑定Oracle 数据库到 ActiveReport . 这是一件很轻松的事情.下 ...
- SpringBoot2+WebSocket之聊天应用实战(优化版本)
背景 之前再SpringBoot2.0集成WebSocket,实现后台向前端推送信息中已经进行过一次demo,而这次的demo更加明确,优化了相关代码,为IM而生 前提 前提当然是导入相关的包,以及配 ...
- 你用过这种奇葩的C#注释吗
博客园一位微软MVP的文章 http://www.cnblogs.com/asxinyu/p/4383402.html#autoid-0-0-0 摘录: 我这里说的奇葩,并不是脱离三种方式,而是其注释 ...
- show命令
数据库 show databases; 表 show tables; show tables in xxdb; show tables 'a*'; tblproperties show tblprop ...
- 学习笔记：Analyze MySQL Performance及慢日志的开启
Table of Contents Analyze MySQL PerformanceTuningSlow queries and Slowlog Brought to you by Rick Jam ...
- python 多进程和多线程的区别
了解线程和进程 进程 程序:磁盘上的可执行二进制文件,并无运行状态. 进程:就是一个正在运行的任务实例(存活在内存里). 获取当前电脑的CPU核心数: pip install psutil >& ...