JS基础（窗口和框架，屏幕和浏览器对象，文档对象）
一窗口和框架
1.window对象，对象事件及使用方法
window对象介绍 简而言之，window对象是浏览器窗口对文档提供一个显示的容器，是每一个加载文档的父对象。window对象还是所有其他对象的顶级对象，通过对window对象的子对象进行操作，可以实现更多的动态效果。
window对象的使用方法 window对象代表当前打开的浏览器窗口，其作为顶级对象。window对象的方法和属性的调用和其它对象一样，区别是window对象不需要创建即可直接使用。需要注意的是window对象名称是小写，下面是其属性和方法的调用语法。
window.属性名
window.方法名(参数列表)
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script language="text/javascript">
function GetCharcount(textObj) {
if (textObj > 10) {
alert("请重新输入你的姓名（少于10个字符）");
}
else {
alert("您输入了" + textObj.length + "个字符");
}
}
</script>
请输入您的姓名（少于10个字符）
Name:<input type="text" name="userName" onblur="GetCharcount(userName.value)">
</body>
</html>2.window对象事件及使用方法
（1）装载文档：使用onload（）方法，该事件是BODY标签的属性。该事件也可以作用于IMG元素，通常借助该事件以实现图片预加载功能。当作用在BODY元素中时，只有当整个网页都加完毕后才会被激活。
（2）卸载文档：unload
（3）得到焦点和失去焦点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript-输出内容（document.write）</title>
<script type="text/javascript">
function OnFocus() {
Body.style.background = "white";
}
function OnBlur() {
Body.style.background = "gray";
}
</script>
</head>
<body id="Body" onfocus="OnFocus()" onblur="OnBlur()">
<label id="info">
失去焦点是窗口背景变为灰色，得到焦点时为红色
</label>
</body>
</html>（4）对话框
window.prompt()
function question() {
var result;
result = window.prompt("你叫什么名字?", "王冲");
if (result == "王冲")
alert("你好")
else {
alert("请你再考虑一下")
}
}(5)状态栏和窗口操作，超时和时间间隔
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script language="javascript">
var myWin;
function question() {
var result;
result = window.prompt("你叫什么名字?", "王冲");
if (result == "王冲")
alert("你好")
else {
alert("请你再考虑一下")
}
}
function GetCharcount(textObj) {
if (textObj > 10) {
alert("请重新输入你的姓名（少于10个字符）");
}
else {
alert("您输入了" + textObj.length + "个字符");
}
}
function OnFocus() {
Body.style.background = "white";
}
function OnBlur() {
Body.style.background = "gray";
}
function open1(){
var result;
// result=
// window.open("","myForm","height=300,width=200,scrollbars=yes");
// window.open("http://www.baidu.com","baidu","heigth=300,width=200",false);
myWin=window.open("https://www.bilibili.com","bilibili","height=300,width=200",false)
}
window.defaultStatus="本站提供影片下载，影像素材，电子书籍等服务"
function closeWindow1(){
myWin.myForm.myText1.value="有父级窗口输入的文字"
}
function colseWindow2(){
myWin.close();
}
function closeWindow(){
if(self.closed){
alert("窗口已经关闭")
}
else{
self.close();
}
}
function textInterval(){
var tm=setInterval("ScroWin()",100);
function ScroWin(){
window.scrollBy(0,1)
}
}
</script>
<body id="Body" onfocus="OnFocus()" onblur="OnBlur()">
<label id="info">
失去焦点是窗口背景变为灰色，得到焦点时为红色
</label>
</br>
<from id="form1" name="form1" method="post" action="">
<label>
<input type="submit" name="submit" value="提交" onclick="po()"></br>
</label>
<label>
<input type="submit" name="submit" value="答题判断" onclick="question()"></br>
</label>
<label>
<input type="submit" name="submit" value="打开一个新的窗口" onclick="open1()"></br>
</label>
<label>
<input type="submit" name="Submit1" onclick="colseWindow()" value="关闭"></br>
</label>
<label>
<input type="submit" name="Submit1" onclick="closeWindow1()" value="关闭1"></br>
</label>
<label>
<input type="submit" name="Submit2" onclick="colseWindow2()" value="关闭2"></br>
</label>
</from>
<form type="submit" name="submit" value="" onclick="textInterval()">
浏览器中的内容大于其显示区域时，<br>
一般会出现滚动条方便查看被遮挡的内容。<br>
用户可以拖动滚动条，也可以通过程序来控制窗口的滚动。<br>
调用window对象的scrollBy或scrollTo方法即可滚动文档，<br>
在一些设计比较人性化的文章阅读页面上就看到这样的应用，<br>
文章自动上滚，方便阅读<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</form>
请输入您的姓名（少于10个字符）
Name:<input type="text" name="userName" onblur="GetCharcount(userName.value)">
</body>
</html>echarts图表的制作
json=[400,500,600,200,100,1,200,20,80]
var myChart=echarts.init(document.getElementById('main'));
var option = {
title: { //图表标题，可以通过show:true/false控制显示与否，subtext:'二级标题',
text: ''
},
backgroundColor: '#FFFFFF',
tooltip : {//鼠标浮动时的工具条，显示鼠标所在区域的数据，trigger这个地方每种图有不同的设置
trigger: 'axis'
},
legend: {// 图例，每条折线或者项对应的示例
data:[]
},
calculable : true,
<!-- 针对x轴的坐标 -->
xAxis : [
{
axisLabel:{
rotate: 30,
interval:0
},
axisLine:{
lineStyle :{
color: '#CCCCCC'
}
},
type : 'category',
boundaryGap : false,//从0刻度开始
// data:[] X轴的定义
data : function (){
var list = [];
for (var i = 10; i <= 18; i++) {
if(i<= 12){
list.push('2021-'+i + '-01');
}else{
list.push('2021-'+(10-i) + '-01');
}
}
return list;
}()
}
],
yAxis : [
{
type : 'value',
axisLine:{
lineStyle :{
color: '#CCCCCC'
}
}
}
],
series : [
{
name:'新增用户',
type:'line',
// symbol:'none',//原点
smooth: 0.2,//弧度
color:['#66AEDE'],
// data:Y轴数据
data:json,
},
]
};运行结果如下图所示
987
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
