精华内容
下载资源
问答
  • 本文实例为大家分享了js查询天气应用,供大家参考,具体内容如下实现功能:打开网页时显示用户所在城市天气状况,在输入框输入城市可查询其它城市。实现过程:先调用百度地图API来获取用户所在城市,随后调用...

    本文实例为大家分享了js查询天气应用,供大家参考,具体内容如下

    1484892296214034.jpg

    实现功能:打开网页时显示用户所在城市的天气状况,在输入框输入城市可查询其它城市。

    实现过程:先调用百度地图的API来获取用户所在的城市,随后调用聚合数据的天气API将数据放在页面上。由于ajax不支持跨域,所以采用了jsonp的方式来调用数据。

    实现的原理比较简单,HTML和css比较长,我就只将js代码贴出来,想看完整代码的//调用jsonp函数请求当前所在城市

    jsonp('https://api.map.baidu.com/api?v=2.0&ak=Dv1NMU23dh1sGS9n2tUouDEYY96Dfzh3&s=1&callback=getCity');

    window.οnlοad=function(){

    //请求天气车数据

    btn.οnclick=function (){

    jsonp(createUrl());

    }

    };

    function getCity(){

    function city(result){

    jsonp(createUrl(result.name));

    }

    var cityName = new BMap.LocalCity();

    cityName.get(city);

    }

    // 数据请求函数

    function jsonp(url){

    var script = document.createElement('script');

    script.src = url;

    document.body.insertBefore(script, document.body.firstChild);

    document.body.removeChild(script);

    }

    //数据请求成功回调函数,用于将获取到的数据放入页面相应位置

    function getWeather(response) {

    var oSpan = document.getElementsByClassName('info');

    var data = response.result.data;

    oSpan[0].innerHTML=data.realtime.city_name;

    oSpan[1].innerHTML=data.realtime.date;

    oSpan[2].innerHTML='星期'+data.weather[0].week;

    oSpan[3].innerHTML=data.realtime.weather.info;

    oSpan[4].innerHTML=data.realtime.weather.temperature+'℃';

    oSpan[5].innerHTML=data.realtime.wind.direct;

    oSpan[6].innerHTML=data.realtime.weather.humidity+'%';

    oSpan[7].innerHTML=data.realtime.time;

    oSpan[8].innerHTML=data.life.info.ziwaixian[0];

    oSpan[9].innerHTML=data.life.info.xiche[0];

    oSpan[10].innerHTML=data.life.info.kongtiao[0];

    oSpan[11].innerHTML=data.life.info.chuanyi[0];

    var aDiv = document.getElementsByClassName('future_box');

    for(var i=0; i

    var aSpan = aDiv[i].getElementsByClassName('future_info');

    aSpan[0].innerHTML = data.weather[i].date;

    aSpan[1].innerHTML = '星期'+data.weather[i].week;

    aSpan[2].innerHTML =data.weather[i].info.day[1];

    aSpan[3].innerHTML = data.weather[i].info.day[2]+'℃';

    }

    changeImg(response);

    }

    //根据获取到的数据更改页面中相应的图片

    function changeImg(data){

    var firstImg = document.getElementsByTagName("img")[0];

    var firstWeatherId=data.result.data.realtime.weather.img;

    chooseImg(firstWeatherId,firstImg);

    var aImg = document.getElementById('future_container').getElementsByTagName('img');

    for(var j=0; j

    var weatherId = data.result.data.weather[j].info.day[0];

    chooseImg(weatherId,aImg[j]);

    }

    }

    //选择图片

    function chooseImg(id,index){

    switch(id){

    case '0':

    index.src='images/weather_icon/1.png';

    break;

    case '1':

    index.src='images/weather_icon/2.png';

    break;

    case '2':

    index.src='images/weather_icon/3.png';

    break;

    case '3':

    case '7':

    case '8':

    index.src='images/weather_icon/4.png';

    break;

    case '6':

    index.src='images/weather_icon/6.png';

    break;

    case '13':

    case '14':

    case '15':

    case '16':

    index.src='images/weather_icon/5.png';

    break;

    case '33':

    index.src='images/weather_icon/7.png';

    break;

    default:

    index.src='images/weather_icon/8.png';

    }

    }

    //根据城市名创建请求数据及url

    function createUrl(){

    var cityName = '';

    if(arguments.length == 0) {

    cityName = document.getElementById('text').value;

    }else{

    cityName = arguments[0];

    }

    var url = 'https://op.juhe.cn/onebox/weather/query?cityname=' + encodeURI(cityName) + '&key=1053d001421b886dcecf81a38422a1a2&callback=getWeather';

    return url;

    }

    一个简单的小demo,还有很多不足之处,欢迎大家提出改进建议。

    明天我会更新一下在这其中遇到的一些问题以及解决方法,欢迎关注。

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持PHP中文网。

    更多原生js三级联动的简单实现代码相关文章请关注PHP中文网!

    本条技术文章来源于互联网,如果无意侵犯您的权益请点击此处反馈版权投诉

    本文系统来源:php中文网

    展开全文
  • 代码实现JS的三级联动.js-demo {width: 700px;margin: 0 auto;padding-top: 100px;}select {margin-right: 50px;}省份:城市:区县:// ===== ===== ===== 获取select元素 ===== ===== =====// 获取下拉表单var ...

    代码实现

    JS的三级联动

    .js-demo {

    width: 700px;

    margin: 0 auto;

    padding-top: 100px;

    }

    select {

    margin-right: 50px;

    }

    省份:

    城市:

    区县:

    // ===== ===== ===== 获取select元素 ===== ===== =====

    // 获取下拉表单

    var select_province = document.getElementById('province');

    var select_city = document.getElementById('city');

    var select_county = document.getElementById('county');

    // ===== ===== ===== 准备三级联动的数据 ===== ===== =====

    // 省份

    var arr_province = [

    // 省份ID, 省份名称

    { id: 110000, name: '北京市' },

    { id: 120000, name: '天津市' },

    { id: 130000, name: '河北省' },

    { id: 140000, name: '山西省' },

    { id: 150000, name: '内蒙古自治区' },

    { id: 210000, name: '辽宁省' },

    { id: 220000, name: '吉林省' },

    { id: 230000, name: '黑龙江省' },

    { id: 310000, name: '上海市' },

    { id: 320000, name: '江苏省' }

    ];

    // 城市

    var arr_city = [

    // 城市ID, 城市名称, 城市所属的省份(即本级的上一级的ID)

    { id: 110000, name: '北京市', province_id: 110000 },

    { id: 120000, name: '天津市', province_id: 120000 },

    { id: 320100, name: '南京市', province_id: 320000 },

    { id: 320200, name: '无锡市', province_id: 320000 },

    { id: 320300, name: '徐州市', province_id: 320000 },

    { id: 320400, name: '常州市', province_id: 320000 },

    { id: 320500, name: '苏州市', province_id: 320000 },

    { id: 320600, name: '南通市', province_id: 320000 },

    { id: 320700, name: '连云港市', province_id: 320000 },

    { id: 320800, name: '淮安市', province_id: 320000 }

    ];

    // 区县

    var arr_county = [

    // 区县ID, 区县名称, 区县所属的城市(即本级的上一级的ID)

    { id: 110101, name: '东城区', city_id: 110000 },

    { id: 110102, name: '西城区', city_id: 110000 },

    { id: 110105, name: '朝阳区', city_id: 110000 },

    { id: 110106, name: '丰台区', city_id: 110000 },

    { id: 110107, name: '石景山区', city_id: 110000 },

    { id: 110108, name: '海淀区', city_id: 110000 },

    { id: 110109, name: '门头沟区', city_id: 110000 },

    { id: 110111, name: '房山区', city_id: 110000 },

    { id: 110112, name: '通州区', city_id: 110000 },

    { id: 110113, name: '顺义区', city_id: 110000 },

    { id: 110114, name: '昌平区', city_id: 110000 },

    { id: 110115, name: '大兴区', city_id: 110000 },

    { id: 110116, name: '怀柔区', city_id: 110000 },

    { id: 110117, name: '平谷区', city_id: 110000 },

    { id: 110118, name: '密云区', city_id: 110000 },

    { id: 110119, name: '延庆区', city_id: 110000 },

    { id: 320102, name: '玄武区', city_id: 320100 },

    { id: 320104, name: '秦淮区', city_id: 320100 },

    { id: 320105, name: '建邺区', city_id: 320100 },

    { id: 320106, name: '鼓楼区', city_id: 320100 },

    { id: 320111, name: '浦口区', city_id: 320100 },

    { id: 320113, name: '栖霞区', city_id: 320100 },

    { id: 320114, name: '雨花台区', city_id: 320100 },

    { id: 320115, name: '江宁区', city_id: 320100 },

    { id: 320116, name: '六合区', city_id: 320100 },

    { id: 320117, name: '溧水区', city_id: 320100 },

    { id: 320118, name: '高淳区', city_id: 320100 },

    { id: 320117, name: '溧水区', city_id: 320100 }

    ];

    // ===== ===== ===== 给select填充数据的操作 ===== ===== =====

    // 填充province

    function addDataProvince() {

    var html = "请选择省份";

    var length = arr_province.length;

    for (var i = 0; i < length; i++) {

    html += "" + arr_province[i].name + "";

    }

    select_province.innerHTML = html;

    }

    // 填充city

    function addDataCity(provinceId) {

    var html = "请选择城市";

    var length = arr_city.length;

    for (var i = 0; i < length; i++) {

    var obj = arr_city[i];

    if (obj.province_id == provinceId) {

    html += "" + obj.name + "";

    }

    }

    select_city.innerHTML = html;

    }

    // 填充county

    function addDataCounty(cityId) {

    var html = "请选择区县";

    var length = arr_county.length;

    for (var i = 0; i < length; i++) {

    var obj = arr_county[i];

    if (obj.city_id == cityId) {

    html += "" + obj.name + "";

    }

    }

    select_county.innerHTML = html;

    }

    // ===== ===== ===== 给select绑定change事件 ===== ===== =====

    // select_province绑定change事件

    select_province.onchange = function () {

    var provinceId = select_province.value;

    addDataCity(provinceId);

    };

    // select_city绑定change事件

    select_city.onchange = function () {

    var cityId = select_city.value;

    addDataCounty(cityId);

    };

    // select初始化数据

    addDataProvince();

    addDataCity(arr_province[0].id);

    addDataCounty(arr_city[0].id);

    /* 核心思想就是,通过监听上一级的变化获得上级的value,进而改变本级显示的列表内容。*/

    效果图如下:

    ea06e47a42d5d7ac003c7abb202a523a.png

    047cb490073df4750d6a72853d5eeb27.png

    展开全文
  • Document请选择所在省份浙江省山东省广东省甘肃省请选择所在城市请选择所在县区//按照省份下拉列表顺序定义二维数组 将城市列表对应到省份下var city=[["杭州市","温州市","宁波市","绍兴市"],//浙江省[...
    Document

    请选择所在的省份

    浙江省

    山东省

    广东省

    甘肃省

    请选择所在的城市

    请选择所在的县区

    //按照省份的下拉列表的顺序定义二维数组 将城市列表对应到省份下

    var city=[

    ["杭州市","温州市","宁波市","绍兴市"],//浙江省

    ["济南市","青岛市","济宁市","潍坊市"],//山东省

    ["广州市","潮阳","澄海","潮州"],//广东省

    ["兰州市","白银","敦煌","定西"]//甘肃省

    ];

    //县区数组

    var qu=[

    [

    ["杭州一区","杭州二区"],

    ["温州一区","温州二区"],

    ["宁波一区","宁波二区"],

    ["绍兴一区","绍兴二区"]

    ],

    [

    ["济南一区","济南二区"],

    ["青岛一区","青岛二区"],

    ["济宁一区","济宁二区"],

    ["潍坊一区","潍坊二区"],

    ],

    [

    ["广州一区","广州二区"],

    ["潮阳一区","潮阳二区"],

    ["澄海一区","澄海二区"],

    ["潮州一区","潮州二区"],

    ],

    [

    ["兰州一区","兰州二区"],

    ["白银一区","白银二区"],

    ["敦煌一区","敦煌二区"],

    ["定西一区","定西二区"],

    ]

    ];

    var getProvince = document.forms['theform'].province;

    var City = document.forms[0].city;

    var Qu = document.forms[0].qu;

    function getCity(){

    // 初始化

    Qu.length = 1;

    City.length = 1;

    // 获得 省份选择的项(索引值,0开始)

    var getSelectIndex = getProvince.selectedIndex;

    // 匹配选择省下面的 市区

    var proCity = city[getSelectIndex-1]; //

    console.log( proCity)

    for( var i=0; i

    City[i+1] = new Option(proCity[i],getSelectIndex)

    }

    }

    function getQu(){

    var getSelectIndex = getProvince.selectedIndex; // 省

    var getCitySelectedIndex = City.selectedIndex; // 市

    console.log( getCitySelectedIndex )

    var cityQu = qu[getSelectIndex - 1][ getCitySelectedIndex - 1];

    console.log( cityQu )

    for( var i=0; i

    Qu[i+1] = new Option(cityQu[0],getCitySelectedIndex)

    }

    }

    展开全文
  • 前言插件功能只满足我司业务需求,如果希望有更多功能,可在下方留言,我尽量扩展!如果你有需要或者喜欢话,可以给我github来个star准备页面中容器标签不限制,只需给个id就行var address = new Address({...

    前言

    插件功能只满足我司业务需求,如果希望有更多功能的,可在下方留言,我尽量扩展!如果你有需要或者喜欢的话,可以给我github来个star

    准备

    页面中的容器标签不限制,只需给个id就行

    var address = new Address({

    wrapId: 'wrap',

    showArr: ['provinces','citys','areas'],

    beforeCreat:function(){

    console.log("beforeCreat")

    },

    afterCreat:function(){

    console.log('afterCreat');

    }

    })

    wrapId:"wrap" // 此处的wrap就是上面容器的id

    showArr: ['provinces','citys','areas'] // 此处分别代表省、市、区容器的id

    举个例子:如果传递的数组['provinces','citys','areas']长度为3,那么将会出现省市区,数组中三个字符串分别是省、市、区容器的id

    b3455c6d150fff7f5b092e3a2ff1524b.png

    如传递的数组['provinces','citys']长度为2个,那么将会出现省市,数组中的两个字符串分别是省、市容器的id

    86ca2e8f51a850b65aaf06f2a498fbab.png

    如数组长度为1的时候就不说了

    beforeCreat 插件开始创建前执行的回调函数

    afterCreat 插件创建完成后执行的回调函数

    fc8ad1a4e226a6677e6fd1135069414e.png

    预览

    a847af9ce2b8e272cf27660577309bc1.gif

    总结

    如有什么功能需要增加的,可在评论区留言,我尽量满足。如有什么疏忽或错误,希望您指出。我会尽早修改,以免误导他人。

    展开全文
  • 代码实现JS的三级联动.js-demo {width: 700px;margin: 0 auto;padding-top: 100px;}select {margin-right: 50px;}省份:城市:区县:// ===== ===== ===== 获取select元素 ===== ===== =====// 获取下拉表单var ...
  • 本文实例为大家分享了Android九宫格图片展示具体代码,供大家参考,具体内容如下三级联动效果(纯JS实现)专业方向: --请选择专业--JAVAPHPUI班级名称: --请选择班级--学生姓名: --请选择学生--您选择内容是: ...
  • /*** jQuery : 省市县联动插件* @author : liangjw* @email : liangjw0504@163.com* @example $("#test").province_city_county();* CopyRight:Create Family Wealth 2013*/$.fn.province_city_county = ...
  • Ajax之三级联动效果图需求分析页面中有三个下拉框选项,分别为省下拉框,市下拉框,区/县下拉框选择省,则市下拉框中出现对应下拉信息,选择市,则区/县下拉框中出现对应数据技术分析核心:ajax+...
  • 在二级联动的基础上html部分学校--请选择学校--{{v.name}}js部分getdayschool:function () {$.ajax({type: "post",url: baseurl + "platform/notice1/all123",contenttype: "application/json",success: function (r...
  • 本文实例为大家分享了ajax实现三级联动的具体代码,供大家参考,具体内容如下1.首先在一个页面上布置一个div 方便日后引用方法//divid为“sanji”2.sanji js处理页面$(document).ready(function(){//向div里面放三...
  • java 后台,半路出家 ,想做个自己商城,卖点东西想着挣点外快,用到了js的三级联动,在网上找了很多,没找到解决方法。只能想办法自己解决,想着留个备份,所以处女做作给js 啦~~主要考虑遍历、触发事件和...
  • 本文实例为大家分享了JavaScript实现省市区三级联动的具体代码,供大家参考,具体内容如下首先是js$(document).ready(function(){getErpMarketByParentCode(0,'province',province);getErpMarketByParentCode...
  • 基于Java的ajax城市三级联动

    千次阅读 2017-08-22 08:42:52
    ajax城市三级联动,网上搜一个示例,找不到原著作者,在此抱歉。 首先是页面和JS代码  城市 *    
  • 基于Redis来实现的三级联动 技术栈:开发工具:idea ①Java基础(Servlet、servletContext监听器) ②NOsql ->Redis(java客户端Jedis) ③Ajax json ④jackson解析器 ⑤maven ⑥junit测试 ⑦jQuery 、js 前言:1.将...
  • 本文实例为大家分享了Android九宫格图片...三级联动效果(纯JS实现) 专业方向: <select name="sel1" id="sel1"> <option>--请选择专业-- <option>JAVA</option><option>PHP</option><option>UI</option>
  • 在二级联动的基础上HTML部分学校--请选择学校--{{v.name}}JS部分getDaySchool:function () {$.ajax({type: "POST",url: baseURL + "platform/notice1/All123",contentType: "application/json",success: function (r...
  • 本文实例为大家分享了jquery实现三级联动的具体代码,供大家参考,具体内容如下jsp页面部分:选择楼栋:选择住房:js部分:function floor(){document.getElementById("build").options.length =0;document....
  • [Java教程]jQuery简单省市区县三级联动案例0 2017-06-11 00:01:00简单省市区三级联动,适合初学者入门学习案例目录结构如下: 三级联动.html 跟 JS文件夹是同个级别效果图如下:HTML代码:1 2 *{margin:0;...
  • 不管是网站还是app,这个都是需要掌握的,我们知道中国省市区三级联动的数据可以存储在mysql数据库中,也可以直接存储在distpicker.data.js这样的js文件中,下面来开始学习如何使用Jquery省市区三级联动插件。...
  • %@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ taglib prefix="...
  • java web中实现select下拉框的三级联动(基于Ajax、JQuery) web开发过程中有非常多select元素使用,因而其联动效果是必不可少。下面就为大家讲解一下它实现。 本文链接: link. JS代码 利用jQuery技术在...
  • 第一步:引入struts整合json的插件包第二步:在struts.xml中定义:修改:修改成在Action中添加:第步:页面使用jquery的ajax调用二级联动的js//ajax的二级联动,使用选择的所属单位,查询该所属单位下对应的单位...
  • 给大家推荐个靠谱公众号程序员探索之路,大家一起加油 ​ 当省改变时--------市自动变为...java" import="java.util.*" pageEncoding="utf-8"%&gt; &lt;% String path = requ...
  • java"]年默认加载到距离当前100年年份,同时根据月份是否是闰年自动加载天数。。。 出生日期: var date=...
  • 省市县三级联动

    2016-04-13 14:16:05
    省市县三级联动,包括 java + jsp + mysql 实现方式,还有 dwr 实现方式,还有 js + html 实现方式
  • javascript三维数组的三级联动

    千次阅读 2017-02-06 20:42:22
    三级联动效果(纯JS实现) 专业方向: --请选择专业-- JAVAPHPUI 班级名称: --请选择班级-- 学生姓名: --请选择学生-- 您选择内容是: var myclass = [ [['JAVA班级01'],['JAVA班级...
  • ${pageContext.request.contextPath }/js/jquery-1.9.1.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="${pageContext.request.contextPath .
  • 如图: 注: 此为从数据库中查询的省市区数据, 如果需要不涉及后台的JS实现省市区三级联动, 可查看: html部分:所在省市区:--选择省份----选择城市----选择地区--js部分:省市区通过异步查询数据库获得. 其中,DISTRICT_...

空空如也

空空如也

1 2 3 4
收藏数 62
精华内容 24
关键字:

java的js三级联动

java 订阅