如果条件满足,执行外部JS

时间:2018-11-01 18:55:01

标签: javascript jquery html css

我想做的是利用Yahoo的Weather API,并根据天气条件代码执行一个javascript(可能是2,如雨和风)。

到目前为止,已经设法使Rain脚本作为内部源工作,但是当尝试添加第二个脚本作为外部源时,它只是加载而没有执行。我猜大概会有10个脚本,所以我猜最好使用外部资源。 正在寻找一些条件,以后再执行js。 尝试使用jQuery getScript,但它所做的只是加载而不执行脚本。

这是我到目前为止所做的。在下面的代码中,两个脚本都运行...我希望仅在验证了代码30的情况下运行snow脚本。

<!DOCTYPE html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style type="text/css">
body {
  margin: 0;
  overflow: hidden;
  background: #061928;
}
</style>
<body>
<div id="output"></div>
<canvas id="canvas"></canvas>
<script src="https://cdn.rawgit.com/scottschiller/Snowstorm/master/snowstorm-min.js"></script>

<script>
// 1. Define a color for the snow
snowStorm.snowColor = '#fff';
// 2. To optimize, define the max number of flakes that can
// be shown on screen at once
snowStorm.flakesMaxActive = 96;
// 3. Allow the snow to flicker in and out of the view
snowStorm.useTwinkleEffect = true; 
// 4. Start the snowstorm!
snowStorm.start();
var pioggia=false;
var queryURL = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%20in%20(select%20woeid%20from%20geo.places(1)%20where%20text%3D%22cinisello%20balsamo%2C%20it%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys";

$.getJSON(queryURL, function (data) {	
  var canvas = $('#canvas')[0];
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  var results = data.query.results
  var firstResult = results.channel.item.condition
  var link = results.channel.image.link
  var img_link_url = results.channel.image.url
  
  var name = results.channel.location.city
  console.log(firstResult);
    console.log(link);
    console.log(img_link_url);
    
  var description = results.channel.item.description
  console.log(description);
    


    var regex = /img.*?src=("|')(.*?)\1/i;
    var match = description.match(regex)[2];
    console.log(match);
    
  var location = firstResult.location // not returned in response
  var temp = firstResult.temp
  var text = firstResult.text
  var code = firstResult.code
  var img
  console.log(code);
  
  
    switch(code) {
    case "0":
        img = "/images/mono-flat/0.png";
		
        break;            
    case "1":
        img = "/images/mono-flat/1.png";
        break;
    case "2":
        img = "/images/mono-flat/2.png";
        break;
    case "3":
        img = "/images/mono-flat/3.png";
        break;
    case "4":
        img = "/images/mono-flat/4.png";
        break;
    case "5":
        img = "/images/mono-flat/5.png";
		var pioggia=true;
        break;
    case "6":
        img = "/images/mono-flat/6.png";
		var pioggia=true;
        break;
    case "7":
        img = "/images/mono-flat/7.png";
        break;
    case "8":
        img = "/images/mono-flat/8.png";
        break;
    case "9":
        img = "/images/mono-flat/9.png";
        break;
    case "10":
        img = "/images/mono-flat/10.png";
		var pioggia=true;
        break;
    case "11":
        img = "/images/mono-flat/11.png";
		var pioggia=true;
        break;
    case "12":
        img = "/images/mono-flat/12.png";
		var pioggia=true;
        break;
    case "13":
        img = "/images/mono-flat/13.png";
        break;
    case "14":
        img = "/images/mono-flat/14.png";
        break;
    case "15":
        img = "/images/mono-flat/15.png";
        break;
    case "16":
        img = "/images/mono-flat/16.png";
        break;
    case "17":
        img = "/images/mono-flat/17.png";
        break;
    case "18":
        img = "/images/mono-flat/18.png";
        break;
    case "19":
        img = "/images/mono-flat/19.png";
        break;
    case "20":
        img = "/images/mono-flat/20.png";
        break;
    case "21":
        img = "/images/mono-flat/21.png";
        break;
    case "22":
        img = "/images/mono-flat/22.png";
        break;  
    case "23":
        img = "/images/mono-flat/23.png";
        break;
    case "24":
        img = "/images/mono-flat/24.png";
        break;
    case "25":
        img = "/images/mono-flat/25.png";
        break;
    case "26":
        img = "/images/mono-flat/26.png";
        break;
    case "27":
        img = "/images/mono-flat/27.png";
		var pioggia=true;
        break;
    case "28":
        img = "/images/mono-flat/28.png";
		
        break;
    case "29":
        img = "/images/mono-flat/29.png";
        break;
    case "30":
        img = "/images/mono-flat/30.png";
        break;
    case "31":
        img = "/images/mono-flat/31.png";
        break;
    case "32":
        img = "/images/mono-flat/32.png";
        break; 
    case "33":
        img = "/images/mono-flat/33.png";
        break;
    case "34":
        img = "/images/mono-flat/34.png";
        break;
    case "35":
        img = "/images/mono-flat/35.png";
		var pioggia=true;
        break;
    case "36":
        img = "/images/mono-flat/36.png";
        break;  
    case "37":
        img = "/images/mono-flat/37.png";
        break;
    case "38":
        img = "/images/mono-flat/38.png";
        break;
    case "39":
        img = "/images/mono-flat/39.png";
        break;
    case "40":
        img = "/images/mono-flat/40.png";
		var pioggia=true;
        break;
    case "41":
        img = "/images/mono-flat/41.png";
        break;
    case "42":
        img = "/images/mono-flat/42.png";
        break;
    case "43":
        img = "/images/mono-flat/43.png";
        break;
    case "44":
        img = "/images/mono-flat/44.png";
        break;
    case "45":
        img = "/images/mono-flat/45.png";
        break;
    case "46":
        img = "/images/mono-flat/46.png";
        break; 
    case "47":
        img = "/images/mono-flat/47.png";
        break;              
    default:
        img = "/images/mono-flat/na.png";
    }
  
<!-- FUNZIONE PIOGGIA-->
  if (canvas.getContext) {
  if(pioggia===true) {
    var ctx = canvas.getContext('2d');
    var w = canvas.width;
    var h = canvas.height;
    ctx.strokeStyle = 'rgba(174,194,224,0.5)';
    ctx.lineWidth = 1;
    ctx.lineCap = 'round';

    var init = [];
    var maxParts = 1000;
    for (var a = 0; a < maxParts; a++) {
      init.push({
        x: Math.random() * w,
        y: Math.random() * h,
        l: Math.random() * 1,
        xs: -4 + Math.random() * 4 + 2,
        ys: Math.random() * 10 + 10
      })
    }

    var particles = [];
    for (var b = 0; b < maxParts; b++) {
      particles[b] = init[b];
    }

    function draw() {
      ctx.clearRect(0, 0, w, h);
      for (var c = 0; c < particles.length; c++) {
        var p = particles[c];
        ctx.beginPath();
        ctx.moveTo(p.x, p.y);
        ctx.lineTo(p.x + p.l * p.xs, p.y + p.l * p.ys);
        ctx.stroke();
      }
      move();
    }

    function move() {
      for (var b = 0; b < particles.length; b++) {
        var p = particles[b];
        p.x += p.xs;
        p.y += p.ys;
        if (p.x > w || p.y > h) {
          p.x = Math.random() * w;
          p.y = -20;
        }
      }
    }

    setInterval(draw, 30);
}
  }
  
  <!-- FINE FUNZIONE PIOGGIA-->
  
  <!--FUNZIONE NEVE-->

  <!--FINE FUNZIONE NEVE-->
  
 var cels =  (temp - 32) * (5 / 9);

    

});


</script>
	</body>
</head>
</html>

0 个答案:

没有答案