潭州课堂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 ...
随机推荐
- opencv入门指南（转载）
转载链接:http://blog.csdn.net/morewindows/article/details/8426318 网上的总结的一些用openncv的库来做的事: 下面列出OpenCV入门指南 ...
- ubuntu14.04 + cuda8.0 + cudnnv5 + caffe + py-faster-rcnn配置
经过几天的奋战终于配置好了如题所述的配置,现在把配置大体过程写下来供大家配置时参考(由于电脑硬件和系统的千差万别,实在不适合写详细的) (一切不声明配置环境的配置教程都是耍流氓) 环境: Inter集 ...
- __ATTR引发的编译错误【原创】
有一天我编译内核模块驱动的时候发现如下错误 Linux kernel版本:4.1.15 error: negative width in bit-field '<anonymous>' 代 ...
- python动态函数名的研究
所谓动态函数名,就是使用时完全不知道是叫什么名字,可以由用户输入那种. 一般人习惯性会想到eval或exec, 但是众所周知,这样的写法不安全而且容易引起问题,而且不pythonic.而且使用时必须把 ...
- 修改centos和ubuntu ssh远程连接端口提升系统安全性
#修改centos服务器ssh端口 sed -i 's/#Port 22/Port 38390/' /etc/ssh/sshd_config sed -i 's/^GSSAPIAuthenticati ...
- jmeter之beanshell取出需要参数，传递给下个请求
jmeter之beanshell取出需要参数,传递给下个请求 事件背景: 上周同事用jmeter录制脚本,录制成功回放后,并没有达到自己想要的结果. ps:他想从数据库取出某个字段值,然后对数据库做操 ...
- NodeJs>------->>第三章：Node.js基础知识
第三章:Node.js基础知识 一:Node.js中的控制台 1:console.log.console.info 方法 console.log(" node app1.js 1> ...
- jquery----ajax解决scrf问题
前端ajax请求 $.ajax({ type:"PUT", //请求方式为put dataType:"JSON", url:'/updata/user/', d ...
- poj3237树链剖分边权+区间取负
树链剖分+线段树lazy-tag在树链上操作时千万不要写错.. /* 树链剖分+线段树区间变负 */ #include<iostream> #include<cstring> ...
- 性能测试二十八：环境部署之Dubbo部署
Zookeeper部署 ZooKeeper是一个分布式的,开放源码的分布式应用程序协调服务,是Google的Chubby一个开源的实现,是Hadoop和Hbase的重要组件.它是一个为分布式应用提供一 ...