一.html dom運用
查找html元素的三種方式
- 通過 id 找到 HTML 元素
- 通過標簽名找到 HTML 元素
- 通過類名找到 HTML 元素
1.通過 id 找到 HTML 元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>msf的網頁</title>
</head>
<body><p id="msf">你干什么呢？</p>
<p id="hello">你好世界!</p><script>y=document.getElementById("msf")document.write(y.innerHTML)
</script><script>x=document.getElementById("hello");document.write(x.innerHTML + "</p>"); //p段落
</script></body>
</html>2.通過標簽名找html元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>msf的網頁</title>
</head>
<body><div id="main"><p> msf</p><p>mzy</p></div><script>var x=document.getElementById("main");var y=x.getElementsByTagName("p");document.write('id="main"元素中的第一個段落為：' + y[0].innerHTML);</script>
</body>
</html>3.通過類名找html元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>msf的網頁</title>
</head>
<body>
<p class="hello">你好世界!</p><script>x=document.getElementsByClassName("hello");document.write("<p>文本來自 class 為 hello段落: " + x[0].innerHTML + "</p>");</script>
</body>
</html>二、echars
另存為后，用vscode打開，粘貼人家給的模板代碼
當js放到body里面，直接粘貼就行
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 引入資源 --><script src="echarts.min.js"></script>
</head>
<body><body><!-- 為 ECharts 準備一個定義了寬高的 DOM --><div id="main" style="width: 600px;height:400px;"></div><!-- 這個js是放到了body里面 --><script type="text/javascript">// 基于準備好的dom，初始化echarts實例var myChart = echarts.init(document.getElementById('main'));// 指定圖表的配置項和數據var option = {title: {text: 'ECharts 入門示例'},tooltip: {},legend: {data: ['銷量']},xAxis: {data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']},yAxis: {},series: [{name: '銷量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]};// 使用剛指定的配置項和數據顯示圖表。myChart.setOption(option);</script></body>
</html>
</body>
</html>
當js想放在上面，不放在body里面了，需要綁定window.onload事件，表示這個文件執行之后再觸發
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 引入資源 --><script src="echarts.min.js"></script><script type="text/javascript">window.onload=function(){// 基于準備好的dom，初始化echarts實例var myChart = echarts.init(document.getElementById('main'));// 指定圖表的配置項和數據var option = {title: {text: 'ECharts 入門示例'},tooltip: {},legend: {data: ['銷量']},xAxis: {data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']},yAxis: {},series: [{name: '銷量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]};// 使用剛指定的配置項和數據顯示圖表。myChart.setOption(option);}</script></head>
<body><body><!-- 為 ECharts 準備一個定義了寬高的 DOM --><div id="main" style="width: 600px;height:400px;"></div></body>
</html>
</body>
</html>
知識點：width可以設置百分數，是針對于父級元素來說的，但是height是不能設置百分數的，因為高度可變，但可以設置vh，代表占整個視口的百分比
eg：width:40%
eg：height:35vh
想要什么效果可以自己查
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 引入資源 --><script src="echarts.min.js"></script><script type="text/javascript">window.onload=function(){// 基于準備好的dom，初始化echarts實例var myChart = echarts.init(document.getElementById('main'));// 指定圖表的配置項和數據
option = {// 標題組件title: {// 標題文本內容text: 'msf',// 還可以設置別的，具體查一下//逗號隔開backgroundColor:'yellow',borderColor:'pink',borderWidth:4,// 文字樣式textStyle:{// 文字顏色color:'blue',// 文字大小fontSize:30,},// 距離左邊的距離left:20,top:10,},// 提示框組件tooltip: {trigger: 'axis'},// 圖例組件legend: {data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']},// 網格區域grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},// 工具箱組件toolbox: {feature: {saveAsImage: {}}},// x軸xAxis: {type: 'category',boundaryGap: false,data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},// y軸yAxis: {type: 'value'},// 系列列表series: [{name: 'Email',// line折線圖，bar柱狀圖type: 'line',// 表示累加stack: 'Total',data: [120, 132, 101, 134, 90, 230, 210]},{name: 'Union Ads',type: 'line',stack: 'Total',data: [220, 182, 191, 234, 290, 330, 310]},{name: 'Video Ads',type: 'line',stack: 'Total',data: [150, 232, 201, 154, 190, 330, 410]},{name: 'Direct',type: 'line',stack: 'Total',data: [320, 332, 301, 334, 390, 330, 320]},{name: 'Search Engine',type: 'line',stack: 'Total',data: [820, 932, 901, 934, 1290, 1330, 1320]}],// 調色板color:['pink','black','red','green','blue'],};// 使用剛指定的配置項和數據顯示圖表。myChart.setOption(option);}</script><!-- 想調這個表格的樣式 --><style>#main{width:40%;height:35vh;background: rgb(239, 199, 199);}</style></head>
<body><body><!-- 為 ECharts 準備一個定義了寬高的 DOM --><div id="main" style="width: 600px;height:400px;"></div></body>
</html>
</body>
</html>
