潭州课堂25班：Ph201805201 WEB 之 JS 第六课 (课堂笔记)
上节补充方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script> // toString 转换为字符串
var a = 123.456;
var b = a.toString();
console.log(a,typeof a); // 123.456 "number"
console.log(b, typeof b); // 123.456 string // toFixed
var c = a.toFixed(2); // 转换为小数，保留后两位小数，
console.log(c, typeof c); //123.46 string
var d = a.toFixed(); // 转换为小数，
console.log(d, typeof d); //123 string //parseFloat parseFloat
var e = '112345.1b3';
var f = '112g45.123';
console.log(parseInt(e)); // 112345 整数
console.log(parseInt(f)); // 112 整数
console.log(parseFloat(e)); // 112345.1 浮点数
console.log(parseFloat(f)); // 112 浮点数 // Number 字符串转数字
var j = '333.1215';
console.log(j,typeof j); // 333.1215 string
console.log(Number(j),typeof Number(j)); // 333.1215 "number"
// console.log(Number(f),typeof Number(fj)); // 333.1215 "number" // 判断 是否为数字，不是反回 false ，是返回 true
var cc = 123;
console.log(isNaN(toString(cc))); // true
console.log(isNaN(cc)); // false // Array.isArray 判断 是否是数组，
var arr = [1,2,3];
console.log(Array.isArray(arr)) // true
</script>
</body>
</html>
数学对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <script>
//四舍五入
console.log(Math.round(123.456)); //123
console.log(Math.round(123.666)); //124 //向下取整
console.log(Math.floor(123.456)); //123
console.log(Math.floor(123.666)); //123
//向上取整
console.log(Math.ceil(123.456)); //124
console.log(Math.ceil(123.666)); //124 // 随机数， 取值在0-1间
console.log(Math.random());
console.log(Math.random()*10);
</script>
</body>
</html>
日期对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <script>
// 创建时间对象
var time = new Date();
console.log(time) ; // Wed Aug 08 2018 05:23:56 GMT+0800 (中国标准时间) // 时间戳
console.log(time.getTime()) ; //1533677373265
// 年 月 日 时 分 秒 var year = time.getFullYear(); // 年
var month = time.getMonth()+1; // 月
var data = time.getDate(); // 日
var hour = time.getHours(); // 时
var minute = time.getMinutes(); // 分
var ss = time.getSeconds(); // 秒 document.body.innerText = year +'年'+ month + '月' + data + '目'+ hour + '时' + minute + '分' + ss +
'秒' </script>
</body>
</html>
定时器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button>
清除定时器
</button> <script>
// 只执行一次
// setTimeout(function () {
// console.log('ok');
// },1000); /// 以毫秒为单位
function fu() {
console.log('ok');
}
setTimeout(fu,1000); // 循环执行
// setInterval(function () {
// console.log('ok');
// } , 500)
function fo() {
console.log('ok');
}
// setInterval(fo,500); var sl = setInterval(fo,500); // 如果要清除，那么这个定时器必须有个名字
var bnt = document.getElementsByTagName('button')[0];
bnt.onclick = function () {
clearInterval(sl);
}
</script>
</body>
</html>
定时器的应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
span{
color: #131313;
font-size: 30px;
}
</style>
</head>
<body>
<h4>敌军还有<span>3</span>秒到达战场</h4> <script>
var se = document.getElementsByTagName('span')[0];
var m = se.innerText;
// 创建 一个秒数递减的函数 // function ji() {
// m -= 1;
// se.innerText = m;
// }
function ji() {
if (m==0){
clearInterval(sl);
var h = document.getElementsByTagName('h4')[0];
h.innerText = '全军到达战场'
}
else {
m -= 1;
se.innerText = m;
}
} var sl = setInterval(ji,1000); </script>
</body>
</html>
函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <script> // f1();
//定义函数
// 有名函数
// function f1() {
// console.log('ok')
// }
// f1(); // 匿名函数
// box.onclick=function () {
// console.log('ok')
// }; // 匿名函数 的执行，只有在匿名函数转为函数表达式时才能被执行，
// (function () {
// console.log('aa')
// })(); // +function () {
// console.log('aa')
// }(); // 函数参数
function na(x,y,z) { // x,y，z
var a = x+y+z;
console.log(a);
}
na(1,3,2) ; // 1,3,2,是实参 // arguments 传参
var s=0;
function nb() {
console.log(arguments)
for (var i=0; i<arguments.length i++){
s += arguments[i];
console.log(s);
return s;
}
} nb(1,2,3,45,6,7,8,,9,a,b,c,) </script> </body>
</html>
作业
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.a{
height: 300px;
width: 440px;
border: 2px solid yellow;
background:url("22.png");
margin: 50px auto;
position: relative;
}
h4{
height:50px;
width: 180px;
position: absolute;
top: 100px;
left: 130px;
}
h5{
height:50px;
width: 440px;
font-size: 18px;
position: absolute;
top: 170px;
left: 20px;
}
.b{
font-size: 15px;
color: skyblue;
}
#mm{
color: red;
font-size: 50px;
font-weight: revert;
}
.c,.d,.e,.f{
font-size: 26px;
color: red;
}
</style>
</head>
<body>
<div class="a">
<h4>敌军还有<span id="mm">3</span>秒到达战场</h4><br><br>
<h5><span class="b">现在是北京时间</span>
<span class="c"></span>
<span class="b">年</span>
<span class="d"></span>
<span class="b">月</span>
<span class="e"></span>
<span class="b">日</span>
<span class="f"></span>
</h5>
</div> <script>
var se = document.getElementById('mm');
var h = document.getElementsByTagName('h4')[0];
var hh = document.getElementsByTagName('h5')[0];
var c = document.getElementsByClassName('c')[0];
var d = document.getElementsByClassName('d')[0];
var e = document.getElementsByClassName('e')[0];
var f = document.getElementsByClassName('f')[0];
var m = se.innerText; function ff(){
m -= 1;
se.innerText = m;
if (m==0){
clearInterval(s);
h.innerText = '全面开战';
h.style.color ='red';
h.style.fontSize= '30px'
}
}
function fu(){
var time = new Date()
var year = time.getFullYear(); // 年
var month = time.getMonth()+1; // 月
var data = time.getDate(); // 日
var hour = time.getHours(); // 时
var minute = time.getMinutes(); // 分
var ss = time.getSeconds(); // 秒
var seconds = ss.toString();
if (seconds.length==1){
seconds = 0+seconds;
}
// hh.innerText = '现在是北京时间: '+year+' 年 '+month+' 月 '+data+' 日 '+hour+' : '+minute+' : '+ss
c.innerText = year;
d.innerText = month;
e.innerText = data;
f.innerText = hour + ';'+minute+ ':' +seconds; } var s = setInterval(ff,1000);
setInterval(fu,10);
</script> </body>
</html>
潭州课堂25班：Ph201805201 WEB 之 JS 第六课 (课堂笔记)的更多相关文章
- 潭州课堂25班：Ph201805201 WEB 之 JS 第五课 (课堂笔记)
算数运算符 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- 潭州课堂25班：Ph201805201 WEB 之 JS 第四课 (课堂笔记)
JS 引入方式 在 HTML 中写入 写在 的标签里 <script> </script>推荐 放在 </body> 结束之前 <!DOCTYPE html& ...
- 潭州课堂25班：Ph201805201 WEB 之 页面编写 第二课 (课堂笔记)
index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- 潭州课堂25班：Ph201805201 WEB 之 页面编写 第一课 (课堂笔记)
index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- 潭州课堂25班：Ph201805201 WEB 之 Ajax第八课 (课堂笔记)
js <——>jq <!DOCTYPE html> <html lang="en"> <head> <meta charset ...
- 潭州课堂25班：Ph201805201 WEB 之 jQuery 第七课 (课堂笔记)
jq 的导入 <body> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js">< ...
- 潭州课堂25班：Ph201805201 WEB 之 CSS 第三课 (课堂笔记)
在 CSS 中第个标签都可以认为是个盒子,盒子就有以下几层 边框 border border-top: 5px solid black; /*上边框 实线*/ border-right: 3px do ...
- 潭州课堂25班：Ph201805201 WEB 之 页面编写 第四课 登录注册 (课堂笔记)
index.html 首页 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
- 潭州课堂25班：Ph201805201 WEB 之 页面编写 第三课 (课堂笔记)
index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
随机推荐
- 【转】void及void指针的深刻解析
void的含义 void即“无类型” ,void*则为“无类型指针”,可以指向任何数据类型,所以又叫做“通用指针”. void指针使用规范 ①void指针可以只想任意类型的数据,亦即可用任意数据类型的 ...
- oem 重建
OracleDBControl启动失败to local from URL=http://your-url.co 方法: emca -deconfig dbcontrol db -repos d ...
- CentOS7 虚拟机设置文件共享 VMWareTools安装遇到的坑
设置文件共享的前提条件是已经安装好VMware Tools. 现在从安装VMware Tools开始讲起: 第一步:安装VMware Tools (如果安装的centos是最小安装,需要提前安装组件g ...
- python 中is和== 的理解
Python中的对象包含三要素:id.type.value其中id用来唯一标识一个对象,type标识对象的类型,value是对象的值is判断的是a对象是否就是b对象,是通过id来判断的==判断的是a对 ...
- sqlyog通过跳板机ssh连接mysql数据库
方法一: 方法二: 在跳板机上启动sh脚本做ssh端口转发,客户端配置连接 10.0.0.1的8306端口即可 jdbc:mysql://10.0.0.1:8306/testdb?useUnicode ...
- POJ 3243 // HDU 2815（改下输出，加个判断）
A^x = B (mod C) 的模板题,不够要用扩展BSGS (虽然AC,但完全理解不了模板0.0,以后学好数学在来慢慢理解555555) #include <iostream> #in ...
- python接口自动化测试十五：解决密码动态，无法登录情况
解决问题:每次密码都是变化的,无法通过账号密码登录 (总不能每次去fiddler复制吧????) 解决思路: 1.先用selenium调用浏览器(不会selenium的自己想办法了), 2.登录后从浏 ...
- python 全栈开发，Day18(对象之间的交互,类命名空间与对象,实例的命名空间,类的组合用法)
一.对象之间的交互 现在我们已经有一个人类了,通过给人类一些具体的属性我们就可以拿到一个实实在在的人.现在我们要再创建一个狗类,狗就不能打人了,只能咬人,所以我们给狗一个bite方法.有了狗类,我们还 ...
- DFS基础题
hdu 1241 油田 裸DFS 题意:@代表油田 8个方向上还有@就相连 相当于求图中连通子图的个数Sample Input1 1 // n m*3 5*@*@***@***@*@*1 8@@** ...
- #10 [AH2017/HNOI2017]大佬
题解: 题意看上去挺复杂的 分析一下就能发现自己的自信是没啥用的 只要随便dp一下看看最多能有多少天不使用增加自信 然后问题就变成了 求C1+C2+k=C 然后发现C有10^8 显然枚举C1是不行的了 ...