python学习15-8月25日
01note.py
#https://www.processon.com/view/link/5b7d6458e4b0534c9bb76ad9 #https://www.processon.com/view/link/5ad1c48de4b0b74a6dd65426 #内容回顾 # javascript # 1.ECMAScropt5.0 es6(阮) es7 es8 # (1)声明变量 var let # (2)内置函数 Date Math.random() # (3) if else switvh while do-while for # (4) var a = 5; var x = a++; 先赋值 var y = ++a; 先计算 # 2.DOM # Document Object Model #（1） 获取事件对象 # getElementById() # getElementByTagName() # getElementByClassName() #（2）事件 # onclick onmouseover onmouseout onmouseenter onmuseleave # (3) 操作 # <div></div> # oDiv.innerText = 'too liang';仅仅甚至文本 # oDiv.innerHTML = '<h2>too liang</h2>';文本标签一起渲染 # OInput.value = 'alex';仅仅表单空控件 有效 #标签属性操作： # 设置类名： oDiv.className += ' active';追加类名 #设置ID： oDIve.id = 'box' #设置 title img->href input id name placehodle ... value #样式操作 #oDiv.style.(css所有样式属性) #注意： 如margin-left JS : margiLeft #DOM 三步走：1）事件对象 2）事件 3）事件驱动 #注释法排错 #JQUERY BOOTSTRAP
02DOM增删改建
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> //加载顺序 1.DOM元素 2.图片资源 3. //等到DOM和图片加载完成之后才调用次方法 // window.onload = function (ev) { } //等待DOM加载完成，但是会覆盖， // document.onload = function (ev) { // var oBtn = document.getElementById('btn'); // console.log(oBtn) // } //XXX.onload程序入口函数 </script> </head> <body> <button id ="btn1">追加</button> <button id ="btn2">删除</button> <div class="box" id="box1"> <!----> </div> <script> function $(idName) { return document.getElementById(idName) } // var oBtn = document.getElementById('btn'); // var oDiv = document.getElementById('box1'); // console.log(oBtn); $('btn1').onclick = function(){ //1.DOM的创建 var oP = document.createElement('p'); //2.DOM的追加 $('box1').appendChild(oP); //3.DOM的修改 oP.innerText ='AAA'; oP.id = 'p1'; //自定义标签相对添加 var oA = document.createElement('abc'); oA.innerText = '321'; $('box1').insertBefore(oA,oP); }; $('btn2').onclick = function(){ $('box1').removeChild($('p1')); } </script> <!-- 如果是一开始页面有初始化渲染开销，应用：频繁切换 display:none|block 追加className 如果是DOM的删除和创建 如果你是切换频繁消耗性能 非频繁少量切换-使用 --> </body> </html>
03BOM对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <a href="http://www.baidu.com">baidu</a> <!--默认当前页面打开 _self --> <a href="http://www.baidu.com" target="_blank">baidu</a> <button id = 'btn1'>跳转</button> </body> <script> //histtory 模式 xxx/#/yyy 例如：music.163.com //hash模式 var oBtn = document.getElementById('btn1'); oBtn.onclick = function(){ console.log(location); //默认当前网页 // location.href='http://www.baidu.com' //默认打开新网页 open('http://www.baidu.com'); //当前设置 open('http://www.baidu.com','_self') window.location.reload();//重新载入 } </script> </html> <!-- ƒ () hash:"" host:"localhost:63342" hostname:"localhost" href:"http://localhost:63342/s22/s23day15/03BOM%E5%AF%B9%E8%B1%A1.html?_ijt=c1e902ujls572fooijrj7hqp7h" origin:"http://localhost:63342" pathname:"/s22/s23day15/03BOM%E5%AF%B9%E8%B1%A1.html" port:"63342" protocol:"http:" ƒ reload() replace:ƒ () search:"?_ijt=c1e902ujls572fooijrj7hqp7h" --- reload() 重载 -->
04定时器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> #box1{ width: 200px; height: 200px; background-color: red; } </style> </head> <body> <button id = 'btn1'>跳转</button> <div id ='box1' ></div> </body> <script> //定时器： // 1、一次性定时器 // 1）回调函数 2）事件 毫秒1000毫秒=1秒 // 不等待，解决数据阻塞 // 但是对象不会自动回收 clearTimeout() var timer = setTimeout(function () { console.log('走动了') },2000); //异步动作 var oBtn = document.getElementById('btn1'); oBtn.onclick = function(){ window.location.reload(); //全局刷新 clearTimeout(timer); }; // 2、周期性定时器 var num = 0; var oDiv = document.getElementById('box1'); setInterval(function () { num++; console.log(num); oDiv.style.marginLeft=num+'px' },30); //用定时器 先清定时器 再开定时器 </script> </html>
05JS面向对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> var arr = [1,2,3]; //var arr1 = new Array(); //JS ES5没有CLASS的概念 // 使用function 构建函数 function Dog(name,age){ this.name = name; this.age = age; this.eat = function () { console.log('eat',this.name); } } //父类 Dog.prototype.eatF = function () { console.log('eatF',this.name); }; //没对象 NEW一个 var d1 = new Dog('AAA',55); d1.eat(); d1.eatF(); console.log(Dog.prototype); console.log(d1.__proto__) </script> </body> </html>
06第一个jquery
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="index.css"> </head> <body> <div class="box"> </div> <!--jquery 核心思想 write less do more--> <!--1.引包 前端 一个人JS文件看成一个文件--> <script src="jquery-3.3.1.js"></script> <script> //1.入口函数 console.log($(document)); //当文档加载时调用 // $(document).ready(function () { // // }); //简写方式如下： $(function () { $('.box').click(function () { //css 两种写法 ，都支持 - 和 驼峰写法 // $('.box').css('background-color','green') // $('.box').css({ // 'width':500, // 'backgroundColor':'green' // }); console.log(this); // 指向JS对象 // JS 转换 JQuery 对象 $(this).css({ 'width':500, 'backgroundColor':'green' }); // JQuery 转换 JS 对象 console.log($(this)[0]); }); console.log(1); }); //没有覆盖现象 $(function () { console.log(2); }); </script> </body> </html>
07JQuery选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ width: 100px; height: 100px; background-color: red; } </style> </head> <body> <div class="box"><p>AAA</p></div> <div class="box"><p>BBB</p></div> <input type="text"> <script src="jquery-3.3.1.js"></script> <script> $(function () { var arr = [1,2]; var oBoxs = document.getElementsByClassName('box'); console.log(arr); console.log(oBoxs); console.log($('.box')); //JQuery 内部遍历对每个对象添加事件 $('.box').click(function () { //对值的操作 // alert(this.innerText); // alert($(this).text()) //alert($(this).html()) $(this).text('CCCC') //传参数 - 赋值 //不传参 - 得到对象 }); //设置 获取 $('input').val('123') }) </script> </body> </html>
08高级选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <ul class="lists"> <li> AAA </li> <li> BBB </li> </ul> <script src="jquery-3.3.1.js"></script> <script> $(function () { //后代选择器 var CCC = $('ul li').css({ 'color':'red' }).click(function () { alert($(this).text().trim()) }); //链式编程 console.log(CCC); }) </script> </body> </html>
09基本过滤选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <ul> <li>AAAA1</li> <li>AAAA2</li> <li>AAAA3</li> <li>AAAA4</li> <li>AAAA5</li> <li>AAAA6</li> <li>AAAA7</li> <li>AAAA8</li> <li>AAAA9</li> </ul> <script src="jquery-3.3.1.js"></script> <script> $(function () { $('ul li:eq(0)').css({ 'color':'red' }); $('ul li:gt(1)').css({ 'color':'green' }) //first }) </script> </body> </html>
10筛选方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <ul> <li> AAAA1 <a href="">AAAA1A</a> </li> <li>AAAA2</li> <li class="itm3">AAAA3</li> <li>AAAA4</li> <li>AAAA5</li> <li>AAAA6</li> <li>AAAA7</li> <li>AAAA8</li> <li>AAAA9</li> </ul> <script src="jquery-3.3.1.js"></script> <script> $(function () { $('ul li').find('a').css('color','red'); $('ul').find('.itm3').css('color','green'); $('ul').children().css('color','yellow'); $('ul').parent().css('',''); }) </script> </body> </html>
11sib选项卡
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> *{ padding: 0; margin: 0; } ul{ width: 300px; list-style: none; background-color: purple; overflow: hidden; margin: 100px auto; } ul li { float: left; width: 75px; height: 80px; line-height: 80px; text-align: center; color: #fff; } .active{ color: red; } </style> </head> <body> <ul> <li>AAA</li> <li>BBB</li> <li>CCC</li> <li>DDD</li> </ul> <script src="jquery-3.3.1.js"></script> <script> $(function () { $('ul li').eq(0).addClass('active'); $('ul li').click(function () { $(this).addClass('active').siblings('li').removeClass('active'); }) }) </script> </body> </html>
11sib选项卡1
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> *{ padding: 0; margin: 0; } ul{ width: 300px; list-style: none; background-color: purple; overflow: hidden; margin: 100px auto; } ul li { float: left; width: 75px; height: 80px; line-height: 80px; text-align: center; color: #fff; } .active{ color: red; } </style> </head> <body> <ul> <li><span>AAA</span></li> <li><span>BBB</span></li> <li><span>CCC</span></li> <li><span>DDD</span></li> </ul> <script src="jquery-3.3.1.js"></script> <script> $(function () { $('ul li span').eq(0).addClass('active'); $('ul li').click(function () { //li -> span -> li -> siblings -> span -> // siblings 除了他自己外的兄弟元素 $(this).children().addClass('active').parent().siblings('li').children().removeClass('active'); //$(this).find('span').addClass('active') }) }) </script> </body> </html>
11sib选项卡2
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> *{ padding: 0; margin: 0; } ul{ width: 300px; list-style: none; background-color: purple; overflow: hidden; margin: 100px auto; } ul li { float: left; width: 75px; height: 80px; line-height: 80px; text-align: center; color: #fff; } .active{ color: red; } </style> </head> <body> <ul> <li><span>AAA</span></li> <li><span>BBB</span></li> <li><span>CCC</span></li> <li><span>DDD</span></li> </ul> <script src="jquery-3.3.1.js"></script> <script> $(function () { $('ul li span').eq(0).addClass('active'); $('ul li').click(function () { //li -> span -> li -> siblings -> span -> // siblings 除了他自己外的兄弟元素 //$(this).children().addClass('active').parent().siblings('li').children().removeClass('active'); $(this).find('span').addClass('active').parent().siblings().find('span').removeClass('active'); }) }) </script> </body> </html>
12选项卡完成版
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> *{ padding: 0; margin: 0; } ul{ width: 300px; list-style: none; background-color: purple; overflow: hidden; /*margin: 100px auto;*/ } ul li { float: left; width: 75px; height: 80px; line-height: 80px; text-align: center; color: #fff; } .active{ color: red; } .content{ width: 300px; height: 300px; background-color: red; } .content div{ width: 100%; height: 100%; color: #fff; font-size: 20px; text-align: center; } </style> </head> <body> <ul> <li class="active">AAA</li> <li>BBB</li> <li>CCC</li> <li>DDD</li> </ul> <div class="content"> <div style="display: block">1</div> <div style="display: none">2</div> <div style="display: none">3</div> <div style="display: none">4</div> </div> <script src="jquery-3.3.1.js"></script> <script> $(function () { $('ul li').click(function () { console.log($(this).index()); i = $(this).index(); $(this).addClass('active').siblings().removeClass('active'); $('.content div').eq(i).css('display','block').siblings().css('display','none') }) }) </script> </body> </html>
13类的操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id ='box1' class="box"></div> <script src="jquery-3.3.1.js"></script> <script> $(function () { $('#box1').addClass('active tt uu ii'); $('#box1').removeClass('active tt'); }) </script> </body> </html>
14标签属性的操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <img src="" alt=""> <a href=""></a> <input type="radio" name = 'sex' checked id="man" >男 <input type="radio" name = 'sex' id="woman" >女 <script src="jquery-3.3.1.js"></script> <script> $(function () { //单个属性 //$('img').attr('src','b1.jpg'); //多个属性 $('img').attr( { id:'img1', src:'b1.jpg', //除了CLASS 属性外都可以设置 title:'aaaa' } ); //获取属性 console.log($('img').attr('id')); //删除属性 $('img').removeAttr('id title'); //获取标签属性 cc = $('#man').attr('checked'); console.log(cc); //获取对象属性 dd = $('#man').prop('checked'); console.log(dd); ee = $('#woman').prop('checked'); console.log(ee); }) </script> </body> </html>
15动画
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .box{ width: 300px; height: 300px; background-color: red; display: none; } </style> </head> <body> <button>动画</button> <div class="box"></div> <script src="jquery-3.3.1.js"></script> <script> $(function () { $('button').click(function () { //$('.box').hide(3000); $('.box').show(3000,function(){ $(this).text('AAAAA'); }); }) }); </script> </body> </html>
15动画1
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .box{ width: 300px; height: 300px; background-color: red; display: none; } </style> </head> <body> <button>动画</button> <div class="box"></div> <script src="jquery-3.3.1.js"></script> <script> $(function () { var isShow = true; $('button').click(function () { //$('.box').hide(3000); // $('.box').show(3000,function(){ // $(this).text('AAAAA'); // }); // if(isShow){ // $('.box').show(3000,function(){ // $(this).text('AAAAA'); // isShow = false // }else{ // $('.box').hide(3000); // isShow = true // } // } //使用JQury 先停止 后动 $('.box').stop().toggle(500); }) }); </script> </body> </html>
15动画2-卷帘门
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .box{ width: 300px; height: 300px; background-color: red; display: none; } </style> </head> <body> <button>动画</button> <div class="box"></div> <script src="jquery-3.3.1.js"></script> <script> $(function () { var isShow = true; $('button').click(function () { //$('.box').hide(3000); // $('.box').show(3000,function(){ // $(this).text('AAAAA'); // }); // if(isShow){ // $('.box').show(3000,function(){ // $(this).text('AAAAA'); // isShow = false // }else{ // $('.box').hide(3000); // isShow = true // } // } //使用JQury 先停止 后动 // $('.box').slideDown(500); $('.box').stop().slideToggle(500); }) }); </script> </body> </html>
15动画2-淡如淡出
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .box{ width: 300px; height: 300px; background-color: red; display: none; } </style> </head> <body> <button>动画</button> <div class="box"></div> <script src="jquery-3.3.1.js"></script> <script> $(function () { var isShow = true; $('button').click(function () { //$('.box').hide(3000); // $('.box').show(3000,function(){ // $(this).text('AAAAA'); // }); // if(isShow){ // $('.box').show(3000,function(){ // $(this).text('AAAAA'); // isShow = false // }else{ // $('.box').hide(3000); // isShow = true // } // } //使用JQury 先停止 后动 // $('.box').slideDown(500); //$('.box').fadeIn(200) $('.box').stop().fadeToggle(200); }) }); </script> </body> </html>
16-鼠标悬停下拉菜单
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } ul { list-style: none; } .wrap { width: 330px; height: 30px; margin: 100px auto 0; padding-left: 10px; background-color: pink; } .wrap li { background-color: green; } .wrap > ul > li { float: left; margin-right: 10px; position: relative; } .wrap a { display: block; height: 30px; width: 100px; text-decoration: none; color: #000; line-height: 30px; text-align: center; } .wrap li ul { position: absolute; top: 30px; display: none; } </style> <script src="jquery-3.3.1.js"></script> <script> //入口函数 $(document).ready(function () { //需求：鼠标放入一级li中，让他里面的ul显示。移开隐藏。 var jqli = $(".wrap>ul>li"); //绑定事件 jqli.mouseenter(function () { $(this).children("ul").stop().slideDown(1000); }); //绑定事件(移开隐藏) jqli.mouseleave(function () { $(this).children("ul").stop().slideUp(1000); }); }); </script> </head> <body> <div class="wrap"> <ul> <li> <a href="javascript:void(0);">一级菜单1</a> <ul> <li><a href="javascript:void(0);">二级菜单2</a></li> <li><a href="javascript:void(0);">二级菜单3</a></li> <li><a href="javascript:void(0);">二级菜单4</a></li> </ul> </li> <li> <a href="javascript:void(0);">二级菜单1</a> <ul> <li><a href="javascript:void(0);">二级菜单2</a></li> <li><a href="javascript:void(0);">二级菜单3</a></li> <li><a href="javascript:void(0);">二级菜单4</a></li> </ul> </li> <li> <a href="javascript:void(0);">三级菜单1</a> <ul> <li><a href="javascript:void(0);">三级菜单2</a></li> <li><a href="javascript:void(0);">三级菜单3</a></li> <li><a href="javascript:void(0);">三级菜单4</a></li> </ul> </li> </ul> </div> </body> </html> <!-- $(selector).stop(true, false); 里面的两个参数，有不同的含义。 第一个参数： true：后续动画不执行。 false：后续动画会执行。 第二个参数： true：立即执行完成当前动画。 false：立即停止当前动画。 PS：参数如果都不写，默认两个都是false。实际工作中，直接写stop()用的多。 -->
17-自定义动画
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> div { position: absolute; left: 20px; top: 30px; width: 100px; height: 100px; background-color: green; } </style> <script src="jquery-3.3.1.js"></script> <script> jQuery(function () { $("button").click(function () { var json = {"width": 500, "height": 500, "left": 300, "top": 300, "border-radius": 100}; var json2 = { "width": 100, "height": 100, "left": 100, "top": 100, "border-radius": 100, "background-color": "red" }; //自定义动画 $("div").animate(json, 1000, function () { $("div").animate(json2, 1000, function () { alert("动画执行完毕！"); }); }); }) }) </script> </head> <body> <button>自定义动画</button> <div></div> </body> </html> <!-- 语法： $(selector).animate({params}, speed, callback); 作用：执行一组CSS属性的自定义动画。 第一个参数表示：要执行动画的CSS属性（必选） 第二个参数表示：执行动画时长（可选） 第三个参数表示：动画执行完后，立即执行的回调函数（可选） -->
18-和风天气请求
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .city{ width: 80px; height: 40px; background-color: purple; cursor: pointer; line-height: 40px; text-align: center; color: #fff; position: relative; } .city_weather{ position: absolute; top: 40px; width: 300px; height: 150px; background-color: darkgrey; display: none; } </style> </head> <body> <div class="city"> 北京 <div class="city_weather"> </div> </div> <script src="jquery-3.3.1.js"></script> <script> $(function () { var timer = null $('.city').mouseenter(function () { // console.log(1) $.ajax({ url:'https://free-api.heweather.com/s6/weather/now?location=beijing&key=4693ff5ea653469f8bb0c29638035976', type:'get', success:function (data) { console.log(data.HeWeather6[0].now.cond_txt); var cond_text = data.HeWeather6[0].now.cond_txt; // $('.city_weather').text(cond_text); $('.city_weather').empty(); // $('.city_weather').append('<a href="#">'+cond_text+'</a>') //tab键 上面的反引号 插入变量 使用${变量名} $('.city_weather').append(`<a href="#">${cond_text}</a>`) }, error:function (err) { console.log(err); } }); timer = setTimeout(function () { $('.city_weather').css('display','block'); },1000) }); $('.city').mouseleave(function () { console.log(2) $('.city_weather').css('display','none'); clearTimeout(timer); }); }); </script> </body> </html>
18单双击
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div class="box" style="cursor:pointer">123</div> <script src="jquery-3.3.1.js"></script> <script> //双击时间差 ，如何解决单双击冲突 s //一次性定时器： $(function () { $('.box').click(function () { console.log('单击'); }); $('.box').dblclick(function () { console.log('双击'); }) }) </script> </body> </html> <!-- -->
19和风天气
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body, input, textarea, select, button { background-color: #fff; color: #111; font: 14px Arial,"Microsoft Yahei"; } .city{ width: 80px; height: 40px; background-color: purple; cursor: pointer; line-height: 40px; text-align: center; color: #fff; position: relative; } .city_weather{ position: absolute; top: 40px; width: 300px; height: 150px; background-color: darkgrey; display: block; } dl, ol, dt, dd, ul, li { list-style: none; margin: 0; padding: 0; } .weatherbox2 { float: left; width: 758px; color: #111; border-top: 2px solid #333; border-left: 1px solid #e3e3e3; border-right: 1px solid #e3e3e3; display: none; } dl.table_day7 { float: left; width: 758px; line-height: 70px; border-bottom: 1px solid #e3e3e3; cursor: pointer; overflow: hidden; } dl.table_day7 dl { float: left; width: 100px; font-size: 18px; font-weight: bold; text-align: right; } dl.tbg dd.week { font-weight: bold; color: #36f; } dl.table_day7 dd.week { float: left; width: 70px; padding-left: 30px; font-size: 18px; text-align: left; } dl.table_day7 dd.air { float: left; width: 120px; text-align: center; } dl.table_day7 dd.img { float: left; width: 70px; text-align: center; } dl.table_day7 dd.temp { float: left; width: 100px; font-size: 18px; text-align: left; font-weight: bold; } dl.table_day7 dd.txt { float: left; width: 130px; text-align: left; font-size: 18px; } dl.table_day7 dd.air b { display: inline; padding: 6px 12px; border-radius: 4px; color: #fff; } dl.table_day7 dd.img img { width: 44px; margin-top: 11px; } </style> </head> <body> <div class="city"> <span>北京天气</span> <div class="weatherbox2"> </div> </div> <script src="jquery-3.3.1.js"></script> <script> function getFMDay(number) { var d = new Date(); d.setTime(d.getTime()+24*60*60*1000*number); var s = d.getFullYear()+"-" + (d.getMonth() + 1 < 10 ? "0" + (d.getMonth() + 1) : d.getMonth() + 1) + "-" + d.getDate(); //console.log(number,s); return s } function getDayC(stringDay) { switch (stringDay){ case getFMDay(0): stringDayC = '今天'; //console.log(getFMDay(0),stringDayC); break; case getFMDay(1): stringDayC = '明天'; //console.log(getFMDay(1),stringDayC); break; case getFMDay(2): stringDayC = '后天'; //console.log(getFMDay(2),stringDayC); break; default: stringDayC = '未知'; //console.log(stringDayC); break; } return stringDayC } $(function () { var timer = null; locationstr = 'beijing'; key = 'f118cb9f569d4b26900d3c59c37b77a4'; urlstr = 'https://free-api.heweather.com/s6/weather/forecast?'; urlstr = urlstr+'location='+locationstr+'&'+'key='+key; console.log(urlstr); var daily_forecast = null; $.ajax({ url:urlstr, type:'get', success:function (data) { daily_forecast = data.HeWeather6[0].daily_forecast; var innhtml = $('.weatherbox2').html(); $('.weatherbox2').empty(); console.log(daily_forecast); // console.log(innhtml,typeof innhtml); $.each(daily_forecast,function(i,item){ //console.log(i, item,item.date); //var stringDay = getDayC(item.date); innhtml = `<dl class="table_day7 tbg"> <dl >${item.date}</dl> <dd class="week">${getDayC(item.date)}</dd> <dd class="air"><b style="background-color:#ffbb17;">${item.cond_txt_d}</b></dd> <dd class="img"><img src="./img/${item.cond_code_d}.png" /></dd> <dd class="temp">${item.cond_txt_d}转${item.cond_txt_n}</dd> <dd class="txt">${item.tmp_min}℃ ~ ${item.tmp_max}℃</dd> <dd class="txt">${item.wind_dir} ${item.wind_sc}级</dd> </dl>`; // console.log(innhtml,typeof innhtml); $('.weatherbox2').append(innhtml); }); }, error:function (err) { $('.weatherbox2').empty().append('数据获取错误'); } }); $('.city').mouseenter(function () { timer = setTimeout(function () { $('.weatherbox2').css('display','block'); },1000) }); $('.city').mouseleave(function () { $('.weatherbox2').css('display','none'); clearTimeout(timer); }); }); </script> </body> </html>
浙公网安备 33010602011771号