换行javascript的换行符？

时间：2017-05-25 01:24:07

标签： javascript html css switch-statement line-breaks

我是新人;非常感谢你帮助我:)。

我有一个我要输出的长段，给定一定的值。

我试图在案例开关中用\ n和＆lt;进行换行。 br＆gt;并尝试了here中的方法 - 所有这些都放在我希望我的休息发生的引文中。他们似乎都没有工作。但是，可能有一种方法可以创建带溢出和CSS的换行符？我不确定，请告诉我。

到目前为止，这是我的代码。 基本上，它出现在浏览器之外的一条长行，我不知道原因：

＆＃13;
＆＃13; 
var determineInfo = function(value) {
  var info = "";
  //console.log(value);
  switch (value) {
    case 1:
      info = "Radio waves have long and largely varying wavelengths, from 1mm to more than 100km. They are emitted by planets, stars, pulsars, and other celestial ongoings. Man-made sources of radio waves include television signals, cell phones, and wifi. These waves are used for communication via shortwave radio and FM stereo. A small dose of radio waves exposure is not too harmful, but  with large and unprotected doses, radio waves can cause cancer. Exposure to radio waves can also cause retinal degeneration, increase the metabolic rate, increase the blood flow, cause cell death and DNA damage, which can lead to necrosis (organ failure).";
      break;
    case 2:
      info = "Microwaves are high frequency waves with a wavelength between 0.1 and 5 cm. Microwaves are used in cell phone transmitters and, shockingly, in microwave ovens. Microwaves are used to cook food because they cause certain molecules to vibrate strongly, resulting in heat. However, this can cause burns on bare human skin. Long exposure to microwaves has also been shown to cause cataracts.";
      break;
    case 3:
      info = "Infrared waves are produced by any source of heat or energy. Infrared waves are often used in sensors. Since all living things emit heat, these sensors can be used to detect the presence of people. Infrared waves have wavelengths between 10 microns and 30 cm. Most infrared radiation that we are exposed to on a daily basis is too weak to do any significant harm. However, long-term exposure to high intensity radiation can cause wrinkles and premature aging. ";
      break;
    case 4:
      info = "Visible light paragraph not written yet";
      break;
    case 5:
      info = "Ultraviolet radiation paragraph not written yet";
      break;
    case 6:
      info = "X-ray paragraph not written yet";
      break;
    case 7:
      info = "Gamma ray paragraph not written yet";
      break;
  }
  //console.log(word);
  return info;
};
＆＃13;
＆＃13;
＆＃13;

完整代码：

＆＃13;
＆＃13; 
// VAL SCORE -> WORD

var determineWord = function(value) {
  var word = "";
  //console.log(value);
  switch (value) {
    case 1:
      word = "Radio waves";
      break;
    case 2:
      word = "Microwaves";
      break;
    case 3:
      word = "Infrared radiation";
      break;
    case 4:
      word = "Visible light";
      break;
    case 5:
      word = "Ultraviolet radiation";
      break;
    case 6:
      word = "X-ray";
      break;
    case 7:
      word = "Gamma ray";
      break;
  }
  //console.log(word);
  return word;
};


var determineInfo = function(value) {
  var info = "";
  //console.log(value);
  switch (value) {
    case 1:
      info = "Radio waves have long and largely varying wavelengths, from 1mm to more than 100km. They are emitted by planets, stars, pulsars, and other celestial ongoings. Man-made sources of radio waves include television signals, cell phones, and wifi. These waves are used for communication via shortwave radio and FM stereo. A small dose of radio waves exposure is not too harmful, but  with large and unprotected doses, radio waves can cause cancer. Exposure to radio waves can also cause retinal degeneration, increase the metabolic rate, increase the blood flow, cause cell death and DNA damage, which can lead to necrosis (organ failure).";
      break;
    case 2:
      info = "Microwaves are high frequency waves with a wavelength between 0.1 and 5 cm. Microwaves are used in cell phone transmitters and, shockingly, in microwave ovens. Microwaves are used to cook food because they cause certain molecules to vibrate strongly, resulting in heat. However, this can cause burns on bare human skin. Long exposure to microwaves has also been shown to cause cataracts.";
      break;
    case 3:
      info = "Infrared waves are produced by any source of heat or energy. Infrared waves are often used in sensors. Since all living things emit heat, these sensors can be used to detect the presence of people. Infrared waves have wavelengths between 10 microns and 30 cm. Most infrared radiation that we are exposed to on a daily basis is too weak to do any significant harm. However, long-term exposure to high intensity radiation can cause wrinkles and premature aging. ";
      break;
    case 4:
      info = "Visible light";
      break;
    case 5:
      info = "Ultraviolet radiation";
      break;
    case 6:
      info = "X-ray";
      break;
    case 7:
      info = "Gamma ray";
      break;
  }
  //console.log(word);
  return info;
};

// SLIDER

$(function() {
  $("#slider").slider({
    value: 1,
    min: 1,
    max: 7,
    step: 1,
    slide: function(event, ui) {
      $("#amount").val(determineWord(ui.value));
      $("#waves").val(determineInfo(ui.value));
    }
  });
  $("#amount").val(determineWord($("#slider").slider("value")));
  $("#waves").val(determineInfo($("#slider").slider("value")));
});


// dropdown

function DropDown(el) {
  this.dd = el;
  this.placeholder = this.dd.children('span');
  this.opts = this.dd.find('ul.dropdown > li');
  this.val = '';
  this.index = -1;
  this.initEvents();
}
DropDown.prototype = {
  initEvents: function() {
    var obj = this;

    obj.dd.on('click', function(event) {
      $(this).toggleClass('active');
      return false;
    });

    obj.opts.on('click', function() {
      var opt = $(this);
      obj.val = opt.text();
      obj.index = opt.index();
      obj.placeholder.text('+ PROTECTION: ' + obj.val);
    });
  },
  getValue: function() {
    return this.val;
  },
  getIndex: function() {
    return this.index;
  }
}

$(function() {

  var dd = new DropDown($('#dd'));

  $(document).click(function() {
    // all dropdowns
    $('.wrapper-dropdown-1').removeClass('active');
  });

});


// scores

$(document).ready(function() {

  var scoreConstants = {
    'Air': 1,
    'Hat': 2,
    'Sunscreen':3,
    'Sweater':4,
    'Glass':5,
    'Brick': 6,
    'Steel': 7,
    'Lead': 8,
    
    'Radio waves': 10,
    'Microwaves': 20,
    'Infrared radiation': 30,
    'Visible light': 40,
    'Ultraviolet radiation': 50,
    'X-ray':60,
    'Gamma ray':70
  };

  var evalScore = function(selectedValues) {
    var totalScore = 0;
    $.each(selectedValues, function(k, v) {
      totalScore += scoreConstants[v];
    });
    return totalScore;
  }
  
  var getScoreInfo = function(score) {
    var scoreInfo = 'Info: ';
    if (score >= 10) {
      scoreInfo += 'You have been hit by a radio wave';
    } else if (score >= 20) {
      scoreValue += 'You have been hit by a microwave';
    } else if (score >= 30) {
      scoreValue += 'You have been hit by infrared radiation';
	  } else if (score >= 40) {
      scoreValue += 'You have been hit by A';
	  } else if (score >= 50) {
      scoreValue += 'You have been hit by B';
	  } else if (score >= 60) {
      scoreValue += 'You have been hit by C';
    } else if (score >= 70) {
      scoreValue += 'You have been hit by D';
	  }
    return scoreInfo;
  }

  var getScoreLabel = function(score) {
    var scoreValue = 'Score: ';
    if (score == 11) {
      scoreValue += 'You have been hit by a radio wave';
      fate.src = "https://image.ibb.co/eMkFqk/149496258477050.png";
    } else if (score == 12) {
      scoreValue += 'You have been hit by a radio wave';
      fate.src = "https://image.ibb.co/eMkFqk/149496258477050.png";
    } else if (score == 13) {
      scoreValue += 'You have been hit by a radio wave';
      fate.src = "https://image.ibb.co/eMkFqk/149496258477050.png";
	  } else if (score == 14) {
      scoreValue += 'You have been hit by a radio wave';
      fate.src = "https://image.ibb.co/eMkFqk/149496258477050.png";
    } else if (score == 15) {
      scoreValue += 'You have been hit by a radio wave';
      fate.src = "https://image.ibb.co/kNLgVk/149496258477050_1.png";
    } else if (score == 16) {
      scoreValue += 'You have been hit by a radio wave';
      fate.src = "https://image.ibb.co/kNLgVk/149496258477050_1.png";  
    } else if (score == 17) {
      scoreValue += 'You have been hit by a radio wave';
      fate.src = "https://image.ibb.co/kNLgVk/149496258477050_1.png";
    } else if (score == 18) {
      scoreValue += 'You have been hit by a radio wave';
      fate.src = "https://image.ibb.co/kNLgVk/149496258477050_1.png";
      
    } else if (score == 21) {
      scoreValue += 'You have been hit by a microwave';
      fate.src = "https://image.ibb.co/eMkFqk/149496258477050.png";
    } else if (score == 22) {
      scoreValue += 'You have been hit by a microwave';
      fate.src = "https://image.ibb.co/eMkFqk/149496258477050.png";
    } else if (score == 23) {
      scoreValue += 'You have been hit by a microwave';
      fate.src = "https://image.ibb.co/eMkFqk/149496258477050.png";
	  } else if (score == 24) {
      scoreValue += 'You have been hit by a microwave';
      fate.src = "https://image.ibb.co/eMkFqk/149496258477050.png";
    } else if (score == 25) {
      scoreValue += 'You have been hit by a microwave';
      fate.src = "https://image.ibb.co/kNLgVk/149496258477050_1.png";
    } else if (score == 26) {
      scoreValue += 'You have been hit by a microwave';
      fate.src = "https://image.ibb.co/kNLgVk/149496258477050_1.png";  
    } else if (score == 27) {
      scoreValue += 'You have been hit by a microwave';
      fate.src = "https://image.ibb.co/kNLgVk/149496258477050_1.png";
    } else if (score == 28) {
      scoreValue += 'You have been hit by a radio wave';
      fate.src = "https://image.ibb.co/kNLgVk/149496258477050_1.png";
      
    } else if (score == 31) {
      scoreValue += 'You have been hit by infrared radiation';
      fate.src = "https://image.ibb.co/eMkFqk/149496258477050.png";
    } else if (score == 32) {
      scoreValue += 'You have been hit by infrared radiation';
      fate.src = "https://image.ibb.co/eMkFqk/149496258477050.png";
    } else if (score == 33) {
      scoreValue += 'You have been hit by infrared radiation';
      fate.src = "https://image.ibb.co/eMkFqk/149496258477050.png";
	  } else if (score == 34) {
      scoreValue += 'You have been hit by infrared radiation';
      fate.src = "https://image.ibb.co/eMkFqk/149496258477050.png";
    } else if (score == 35) {
      scoreValue += 'You have been hit by infrared radiation';
      fate.src = "https://image.ibb.co/kNLgVk/149496258477050_1.png";
    } else if (score == 36) {
      scoreValue += 'You have been hit by infrared radiation';
      fate.src = "https://image.ibb.co/kNLgVk/149496258477050_1.png";  
    } else if (score == 37) {
      scoreValue += 'You have been hit by infrared radiation';
      fate.src = "https://image.ibb.co/kNLgVk/149496258477050_1.png";
    } else if (score == 38) {
      scoreValue += 'You have been hit by a radio wave';
      fate.src = "https://image.ibb.co/kNLgVk/149496258477050_1.png";
      
    } else if (score == 41) {
      scoreValue += 'You have been hit by visible light';
      fate.src = "https://image.ibb.co/eMkFqk/149496258477050.png";
    } else if (score == 42) {
      scoreValue += 'You have been hit by visible light';
      fate.src = "https://image.ibb.co/eMkFqk/149496258477050.png";
    } else if (score == 43) {
      scoreValue += 'You have been hit by visible light';
      fate.src = "https://image.ibb.co/eMkFqk/149496258477050.png";
	  } else if (score == 44) {
      scoreValue += 'You have been hit by visible light';
      fate.src = "https://image.ibb.co/eMkFqk/149496258477050.png";
    } else if (score == 45) {
      scoreValue += 'You have been hit by visible light';
      fate.src = "https://image.ibb.co/kNLgVk/149496258477050_1.png";
    } else if (score == 46) {
      scoreValue += 'You have been hit by visible light';
      fate.src = "https://image.ibb.co/kNLgVk/149496258477050_1.png";  
    } else if (score == 47) {
      scoreValue += 'You have been hit by visible light';
      fate.src = "https://image.ibb.co/kNLgVk/149496258477050_1.png";
    } else if (score == 48) {
      scoreValue += 'You have been hit by a radio wave';
      fate.src = "https://image.ibb.co/kNLgVk/149496258477050_1.png";
      
    } else if (score == 51) {
      scoreValue += 'You have been hit by ultraviolet radiation';
      fate.src = "https://image.ibb.co/eMkFqk/149496258477050.png";
    } else if (score == 52) {
      scoreValue += 'You have been hit by ultraviolet radiation';
      fate.src = "https://image.ibb.co/eMkFqk/149496258477050.png";
    } else if (score == 53) {
      scoreValue += 'You have been hit by ultraviolet radiation';
      fate.src = "https://image.ibb.co/eMkFqk/149496258477050.png";
	  } else if (score == 54) {
      scoreValue += 'You have been hit by ultraviolet radiation';
      fate.src = "https://image.ibb.co/eMkFqk/149496258477050.png";
    } else if (score == 55) {
      scoreValue += 'You have been hit by ultraviolet radiation';
      fate.src = "https://image.ibb.co/kNLgVk/149496258477050_1.png";
    } else if (score == 56) {
      scoreValue += 'You have been hit by ultraviolet radiation';
      fate.src = "https://image.ibb.co/kNLgVk/149496258477050_1.png";  
    } else if (score == 57) {
      scoreValue += 'You have been hit by ultraviolet radiation';
      fate.src = "https://image.ibb.co/kNLgVk/149496258477050_1.png";
    } else if (score == 58) {
      scoreValue += 'You have been hit by a radio wave';
      fate.src = "https://image.ibb.co/kNLgVk/149496258477050_1.png";
      
    } else if (score == 61) {
      scoreValue += 'You have been hit by an X-ray';
      fate.src = "https://image.ibb.co/eMkFqk/149496258477050.png";
    } else if (score == 62) {
      scoreValue += 'You have been hit by an X-ray';
      fate.src = "https://image.ibb.co/eMkFqk/149496258477050.png";
    } else if (score == 63) {
      scoreValue += 'You have been hit by an X-ray';
      fate.src = "https://image.ibb.co/eMkFqk/149496258477050.png";
	  } else if (score == 64) {
      scoreValue += 'You have been hit by an X-ray';
      fate.src = "https://image.ibb.co/eMkFqk/149496258477050.png";
    } else if (score == 65) {
      scoreValue += 'You have been hit by an X-ray';
      fate.src = "https://image.ibb.co/kNLgVk/149496258477050_1.png";
    } else if (score == 66) {
      scoreValue += 'You have been hit by an X-ray';
      fate.src = "https://image.ibb.co/kNLgVk/149496258477050_1.png";  
    } else if (score == 67) {
      scoreValue += 'You have been hit by an X-ray';
      fate.src = "https://image.ibb.co/kNLgVk/149496258477050_1.png";
    } else if (score == 68) {
      scoreValue += 'You have been hit by a radio wave';
      fate.src = "https://image.ibb.co/kNLgVk/149496258477050_1.png";
      
    } else if (score == 71) {
      scoreValue += 'You have been hit by a gamma ray';
      fate.src = "https://image.ibb.co/eMkFqk/149496258477050.png";
    } else if (score == 72) {
      scoreValue += 'You have been hit by a gamma ray';
      fate.src = "https://image.ibb.co/eMkFqk/149496258477050.png";
    } else if (score == 73) {
      scoreValue += 'You have been hit by a gamma ray';
      fate.src = "https://image.ibb.co/eMkFqk/149496258477050.png";
	  } else if (score == 74) {
      scoreValue += 'You have been hit by a gamma ray';
      fate.src = "https://image.ibb.co/eMkFqk/149496258477050.png";
    } else if (score == 75) {
      scoreValue += 'You have been hit by a gamma ray';
      fate.src = "https://image.ibb.co/kNLgVk/149496258477050_1.png";
    } else if (score == 76) {
      scoreValue += 'You have been hit by a gamma ray';
      fate.src = "https://image.ibb.co/kNLgVk/149496258477050_1.png";  
    } else if (score == 77) {
      scoreValue += 'You have been hit by a gamma ray';
      fate.src = "https://image.ibb.co/kNLgVk/149496258477050_1.png";
    } else if (score == 78) {
      scoreValue += 'You have been hit by a radio wave';
      fate.src = "https://image.ibb.co/kNLgVk/149496258477050_1.png";
 		}
    return scoreValue;
  }

  $('body').on('click', '#evaluate', function(e) {
    var amount = $('#amount').val();
var dropdown = $.trim($('.wrapper-dropdown-1').children('span').text().split(':')[1]);
var selectedValues = [amount,dropdown];

    var score = evalScore(selectedValues);
    var scoreLabel = getScoreLabel(score);

    var valueString = 'Selected: ';
    if (selectedValues.length > 0) {
      $.each(selectedValues, function(k, v) {
        if (k === (selectedValues.length - 1)) {
          valueString += v;
        } else {
          valueString += v + ', '
        }
      });
    } else {
      valueString += 'None';
    }

    var $result = $('#result');
    $result.html(scoreLabel);

    var $displayValues = $('#values');
    $displayValues.html(valueString);

		var $info = $('#info');
    $info.html(scoreInfo);
  });
});
＆＃13; 
body {
  background:transparent;
}

::selection {
  background: #ffffcc;
}

::-moz-selection {
  background: #ffffcc;
}

/* protection */

*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.wrapper {
  margin: 40px 0 0 -260px;
  font-weight: 400;
}

.wrapper:after {
  clear: both;
  content: "";
  display: table;
}

.wrapper-dropdown-1 {
  position: relative;
  /* Enable absolute positionning for children and pseudo elements */
  width: 200px;
  padding: 10px;
  margin: 0 auto;
  /* Styles */
  background: #ffcccc;
  color: #000;
  outline: none;
  cursor: pointer;
  font-family: helvetica;
  font-size: 12px;
  letter-spacing: 1px;
}

.wrapper-dropdown-1 .dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  /* Styles */
  list-style: none;
  border-top: 1px solid #000;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}

.wrapper-dropdown-1 .dropdown li a {
  display: block;
  text-decoration: none;
  color: #9e9e9e;
  padding: 10px 20px;
}

.wrapper-dropdown-1 .dropdown li:hover a {
  background: #ffe6e6;
}

.wrapper-dropdown-1.active .dropdown {
  opacity: 1;
  pointer-events: auto;
}

.wrapper-dropdown-1.active:after {
  border-color: #9bc7de transparent;
  border-width: 6px 6px 0 6px;
  margin-top: -3px;
}

.no-opacity .wrapper-dropdown-1 .dropdown,
.no-pointerevents .wrapper-dropdown-1 .dropdown {
  display: none;
  opacity: 1;
  /* If opacity support but no pointer-events support */
  pointer-events: auto;
  /* If pointer-events support but no pointer-events support */
}

.no-opacity .wrapper-dropdown-1.active .dropdown,
.no-pointerevents .wrapper-dropdown-1.active .dropdown {
  display: block;
}


/** slider **/

.text {
  font-family: helvetica;
  font-size: 12px;
  margin: 10px;
  background: transparent;
  letter-spacing: 1px;
}

select {
  margin-top: 20px;
  margin-left: 5px;
}

option {
  text-decoration: none;
  display: block;
  opacity: 1;
  padding: 5px;
  color: black;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

option:hover,
option:focus,
option:active {
  background: #ffe6e6;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

p {
  font-family: helvetica;
  font-size: 12px;
  margin: 10px;
  letter-spacing: 2px;
  background: #fff;
  padding-left: 5px;
  margin-left: 25px;
  width: 305px;
}

#wavescontainer {
  font-family: helvetica;
  font-size: 12px;
  margin: 10px;
  letter-spacing: 2px;
  background: #fff;
  padding-left: 5px;
  margin-left: 425px;
  width: 105px;
  position:relative;
}

#waves {
  color: black;
  font-size: 12px;
  padding: 5px;
  margin: 5px;
  position:relative;
}


#amount {
  color: black;
  font-size: 12px;
  padding: 5px;
  margin: 5px;
}

#slider {
  width: 320px;
  height: 2px;
  border-color: transparent;
  background-color: black;
  margin: 20px;
}

#slider .wavelengths {
  width: 350px;
  background-color: transparent;
  margin-top: 10px;
  margin-left: -5px;
  font-size: 10px;
}

dub {
  margin: 0px 15px;
}

.ui-slider {
  position: relative;
  text-align: left;
}

.ui-slider .ui-slider-handle {
  position: absolute;
  z-index: 2;
  width: 25px;
  height: 10px;
  cursor: default;
  border-radius: 2px;
  -ms-touch-action: none;
  touch-action: none;
}

.ui-slider-horizontal .ui-slider-handle {
  top: -.3em;
  margin-left: -.6em;
}

.ui-slider-horizontal .ui-slider-range-min {
  left: 0;
}

.ui-slider-horizontal .ui-slider-range-max {
  right: 0;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
  border: 1px solid #000;
  background: #000;
  font-weight: normal;
  color: #fff;
  margin-top: 0px;
}

.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited,
a.ui-button,
a:link.ui-button,
a:visited.ui-button,
.ui-button {
  color: #fff;
  text-decoration: none;
}

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus,
.ui-button:hover,
.ui-button:focus {
  border: 1px solid #000;
  background: #000;
  font-weight: normal;
  color: #fff;
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
  border: 1px solid #000;
  background: #000;
  font-weight: normal;
  color: #ffffff;
}

.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
  color: #ffffff;
  text-decoration: none;
}

.ui-dialog-title {
  font-size: 110% !important;
  color: #FFFFFF !important;
  background: #000000 !important;
}

/* results */

button {
  background: #ccffcc;
  height: 100px;
  width: 100px;
  border-radius: 100%;
  border: 2px double white;
  font-size: 12px;
  font-family: helvetica;
  letter-spacing: 2px;
  color: black;
  margin-left: 70%;
}

button:active {
  background: #e6ffe6;
}

h4 {
  margin-left:100px;
  margin-top:60px;
  font-family:helvetica;
  font-size:12px;
  font-weight:normal;
}

h5 {
  margin-left:100px;
  font-family:helvetica;
  font-size:12px;
  font-weight:normal;
}
＆＃13; 
<link href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<link href="http://jsfiddle.net/resources/demos/style.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="text">
  For [10 sec] exposure and [100 watts] of given wavelength. All fields are required.
  <hr>
</div>
<!-- colors: #ffffcc, #ccffcc, #ffcc99, #ffcccc -->
<p>
  <label for="amount">WAVELENGTH:</label>
  <input type="text" id="amount" readonly style="border:0; color:#000; font-weight:normal; width:150px; background:#ccffcc; letter-spacing:1px; text-align:center;">
</p>

<p>
  <label for="waves">INFO:</label>
  <input type="text" id="waves" readonly style="border:0; background:#ffffcc; width:200px; height:100px;">
  </p>

<div id="slider">
  <div class="wavelengths">
    10<sup>3</sup>
    <dub></dub> 10<sup>-2</sup>
    <dub></dub> 10<sup>-5</sup>
    <dub></dub> .5x10<sup>-6</sup>
    <dub></dub> 10<sup>-8</sup>
    <dub></dub> 10<sup>-10</sup>
    <dub></dub> 10<sup>-12</sup>
  </div>
</div>


<section class="main">
  <div class="wrapper">
    <div id="dd" class="wrapper-dropdown-1" tabindex="1">
      <span>+ PROTECTION (2 feet)</span>
      <ul class="dropdown" tabindex="1">
        <li><a href="#" value="Air">Air</a></li>
        <li><a href="#" value="Hat">Hat</a></li>
        <li><a href="#" value="Sunscreen">Sunscreen</a></li>
        <li><a href="#" value="Sweater">Sweater</a></li>
        <li><a href="#" value="Glass">Glass</a></li>
        <li><a href="#" value="Brick">Brick</a></li>
        <li><a href="#" value="Steel">Steel</a></li>
        <li><a href="#" value="Lead">Lead</a></li>
      </ul>
    </div>
  </div>
</section>

<br>
<button id="evaluate" type="button">READY</button>
<h4 id="result"></h4>
<h5 id="values"></h5>
<h5 id="info"></h5>


<img src="https://image.ibb.co/eMkFqk/149496258477050.png" name="fate" style="height:400px;">



<!-- WOUNDED fate.src = "https://image.ibb.co/kNLgVk/149496258477050_1.png"; 
  DEAD fate.src = "https://image.ibb.co/cYe8Ak/149496258477050_3.png";
-->
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：1)

问题是，您要将文字放入的字段是<input>，这些字段只能显示一行。

将其更改为<textarea>，它将自动换行。

＆＃13;
＆＃13; 
// VAL SCORE -> WORD

var determineWord = function(value) {
  var word = "";
  //console.log(value);
  switch (value) {
    case 1:
      word = "Radio waves";
      break;
    case 2:
      word = "Microwaves";
      break;
    case 3:
      word = "Infrared radiation";
      break;
    case 4:
      word = "Visible light";
      break;
    case 5:
      word = "Ultraviolet radiation";
      break;
    case 6:
      word = "X-ray";
      break;
    case 7:
      word = "Gamma ray";
      break;
  }
  //console.log(word);
  return word;
};


var determineInfo = function(value) {
  var info = "";
  //console.log(value);
  switch (value) {
    case 1:
      info = "Radio waves have long and largely varying wavelengths, from 1mm to more than 100km. They are emitted by planets, stars, pulsars, and other celestial ongoings. Man-made sources of radio waves include television signals, cell phones, and wifi. These waves are used for communication via shortwave radio and FM stereo. A small dose of radio waves exposure is not too harmful, but  with large and unprotected doses, radio waves can cause cancer. Exposure to radio waves can also cause retinal degeneration, increase the metabolic rate, increase the blood flow, cause cell death and DNA damage, which can lead to necrosis (organ failure).";
      break;
    case 2:
      info = "Microwaves are high frequency waves with a wavelength between 0.1 and 5 cm. Microwaves are used in cell phone transmitters and, shockingly, in microwave ovens. Microwaves are used to cook food because they cause certain molecules to vibrate strongly, resulting in heat. However, this can cause burns on bare human skin. Long exposure to microwaves has also been shown to cause cataracts.";
      break;
    case 3:
      info = "Infrared waves are produced by any source of heat or energy. Infrared waves are often used in sensors. Since all living things emit heat, these sensors can be used to detect the presence of people. Infrared waves have wavelengths between 10 microns and 30 cm. Most infrared radiation that we are exposed to on a daily basis is too weak to do any significant harm. However, long-term exposure to high intensity radiation can cause wrinkles and premature aging. ";
      break;
    case 4:
      info = "Visible light";
      break;
    case 5:
      info = "Ultraviolet radiation";
      break;
    case 6:
      info = "X-ray";
      break;
    case 7:
      info = "Gamma ray";
      break;
  }
  //console.log(word);
  return info;
};

// SLIDER

$(function() {
  $("#slider").slider({
    value: 1,
    min: 1,
    max: 7,
    step: 1,
    slide: function(event, ui) {
      $("#amount").val(determineWord(ui.value));
      $("#waves").val(determineInfo(ui.value));
    }
  });
  $("#amount").val(determineWord($("#slider").slider("value")));
  $("#waves").val(determineInfo($("#slider").slider("value")));
});


// dropdown

function DropDown(el) {
  this.dd = el;
  this.placeholder = this.dd.children('span');
  this.opts = this.dd.find('ul.dropdown > li');
  this.val = '';
  this.index = -1;
  this.initEvents();
}
DropDown.prototype = {
  initEvents: function() {
    var obj = this;

    obj.dd.on('click', function(event) {
      $(this).toggleClass('active');
      return false;
    });

    obj.opts.on('click', function() {
      var opt = $(this);
      obj.val = opt.text();
      obj.index = opt.index();
      obj.placeholder.text('+ PROTECTION: ' + obj.val);
    });
  },
  getValue: function() {
    return this.val;
  },
  getIndex: function() {
    return this.index;
  }
}

$(function() {

  var dd = new DropDown($('#dd'));

  $(document).click(function() {
    // all dropdowns
    $('.wrapper-dropdown-1').removeClass('active');
  });

});


// scores

$(document).ready(function() {

  var scoreConstants = {
    'Air': 1,
    'Hat': 2,
    'Sunscreen':3,
    'Sweater':4,
    'Glass':5,
    'Brick': 6,
    'Steel': 7,
    'Lead': 8,
    
    'Radio waves': 10,
    'Microwaves': 20,
    'Infrared radiation': 30,
    'Visible light': 40,
    'Ultraviolet radiation': 50,
    'X-ray':60,
    'Gamma ray':70
  };

  var evalScore = function(selectedValues) {
    var totalScore = 0;
    $.each(selectedValues, function(k, v) {
      totalScore += scoreConstants[v];
    });
    return totalScore;
  }
  
  var getScoreInfo = function(score) {
    var scoreInfo = 'Info: ';
    if (score >= 10) {
      scoreInfo += 'You have been hit by a radio wave';
    } else if (score >= 20) {
      scoreValue += 'You have been hit by a microwave';
    } else if (score >= 30) {
      scoreValue += 'You have been hit by infrared radiation';
	  } else if (score >= 40) {
      scoreValue += 'You have been hit by A';
	  } else if (score >= 50) {
      scoreValue += 'You have been hit by B';
	  } else if (score >= 60) {
      scoreValue += 'You have been hit by C';
    } else if (score >= 70) {
      scoreValue += 'You have been hit by D';
	  }
    return scoreInfo;
  }

  var getScoreLabel = function(score) {
    var scoreValue = 'Score: ';
    if (score == 11) {
      scoreValue += 'You have been hit by a radio wave';
      fate.src = "https://image.ibb.co/eMkFqk/149496258477050.png";
    } else if (score == 12) {
      scoreValue += 'You have been hit by a radio wave';
      fate.src = "https://image.ibb.co/eMkFqk/149496258477050.png";
    } else if (score == 13) {
      scoreValue += 'You have been hit by a radio wave';
      fate.src = "https://image.ibb.co/eMkFqk/149496258477050.png";
	  } else if (score == 14) {
      scoreValue += 'You have been hit by a radio wave';
      fate.src = "https://image.ibb.co/eMkFqk/149496258477050.png";
    } else if (score == 15) {
      scoreValue += 'You have been hit by a radio wave';
      fate.src = "https://image.ibb.co/kNLgVk/149496258477050_1.png";
    } else if (score == 16) {
      scoreValue += 'You have been hit by a radio wave';
      fate.src = "https://image.ibb.co/kNLgVk/149496258477050_1.png";  
    } else if (score == 17) {
      scoreValue += 'You have been hit by a radio wave';
      fate.src = "https://image.ibb.co/kNLgVk/149496258477050_1.png";
    } else if (score == 18) {
      scoreValue += 'You have been hit by a radio wave';
      fate.src = "https://image.ibb.co/kNLgVk/149496258477050_1.png";
      
    } else if (score == 21) {
      scoreValue += 'You have been hit by a microwave';
      fate.src = "https://image.ibb.co/eMkFqk/149496258477050.png";
    } else if (score == 22) {
      scoreValue += 'You have been hit by a microwave';
      fate.src = "https://image.ibb.co/eMkFqk/149496258477050.png";
    } else if (score == 23) {
      scoreValue += 'You have been hit by a microwave';
      fate.src = "https://image.ibb.co/eMkFqk/149496258477050.png";
	  } else if (score == 24) {
      scoreValue += 'You have been hit by a microwave';
      fate.src = "https://image.ibb.co/eMkFqk/149496258477050.png";
    } else if (score == 25) {
      scoreValue += 'You have been hit by a microwave';
      fate.src = "https://image.ibb.co/kNLgVk/149496258477050_1.png";
    } else if (score == 26) {
      scoreValue += 'You have been hit by a microwave';
      fate.src = "https://image.ibb.co/kNLgVk/149496258477050_1.png";  
    } else if (score == 27) {
      scoreValue += 'You have been hit by a microwave';
      fate.src = "https://image.ibb.co/kNLgVk/149496258477050_1.png";
    } else if (score == 28) {
      scoreValue += 'You have been hit by a radio wave';
      fate.src = "https://image.ibb.co/kNLgVk/149496258477050_1.png";
      
    } else if (score == 31) {
      scoreValue += 'You have been hit by infrared radiation';
      fate.src = "https://image.ibb.co/eMkFqk/149496258477050.png";
    } else if (score == 32) {
      scoreValue += 'You have been hit by infrared radiation';
      fate.src = "https://image.ibb.co/eMkFqk/149496258477050.png";
    } else if (score == 33) {
      scoreValue += 'You have been hit by infrared radiation';
      fate.src = "https://image.ibb.co/eMkFqk/149496258477050.png";
	  } else if (score == 34) {
      scoreValue += 'You have been hit by infrared radiation';
      fate.src = "https://image.ibb.co/eMkFqk/149496258477050.png";
    } else if (score == 35) {
      scoreValue += 'You have been hit by infrared radiation';
      fate.src = "https://image.ibb.co/kNLgVk/149496258477050_1.png";
    } else if (score == 36) {
      scoreValue += 'You have been hit by infrared radiation';
      fate.src = "https://image.ibb.co/kNLgVk/149496258477050_1.png";  
    } else if (score == 37) {
      scoreValue += 'You have been hit by infrared radiation';
      fate.src = "https://image.ibb.co/kNLgVk/149496258477050_1.png";
    } else if (score == 38) {
      scoreValue += 'You have been hit by a radio wave';
      fate.src = "https://image.ibb.co/kNLgVk/149496258477050_1.png";
      
    } else if (score == 41) {
      scoreValue += 'You have been hit by visible light';
      fate.src = "https://image.ibb.co/eMkFqk/149496258477050.png";
    } else if (score == 42) {
      scoreValue += 'You have been hit by visible light';
      fate.src = "https://image.ibb.co/eMkFqk/149496258477050.png";
    } else if (score == 43) {
      scoreValue += 'You have been hit by visible light';
      fate.src = "https://image.ibb.co/eMkFqk/149496258477050.png";
	  } else if (score == 44) {
      scoreValue += 'You have been hit by visible light';
      fate.src = "https://image.ibb.co/eMkFqk/149496258477050.png";
    } else if (score == 45) {
      scoreValue += 'You have been hit by visible light';
      fate.src = "https://image.ibb.co/kNLgVk/149496258477050_1.png";
    } else if (score == 46) {
      scoreValue += 'You have been hit by visible light';
      fate.src = "https://image.ibb.co/kNLgVk/149496258477050_1.png";  
    } else if (score == 47) {
      scoreValue += 'You have been hit by visible light';
      fate.src = "https://image.ibb.co/kNLgVk/149496258477050_1.png";
    } else if (score == 48) {
      scoreValue += 'You have been hit by a radio wave';
      fate.src = "https://image.ibb.co/kNLgVk/149496258477050_1.png";
      
    } else if (score == 51) {
      scoreValue += 'You have been hit by ultraviolet radiation';
      fate.src = "https://image.ibb.co/eMkFqk/149496258477050.png";
    } else if (score == 52) {
      scoreValue += 'You have been hit by ultraviolet radiation';
      fate.src = "https://image.ibb.co/eMkFqk/149496258477050.png";
    } else if (score == 53) {
      scoreValue += 'You have been hit by ultraviolet radiation';
      fate.src = "https://image.ibb.co/eMkFqk/149496258477050.png";
	  } else if (score == 54) {
      scoreValue += 'You have been hit by ultraviolet radiation';
      fate.src = "https://image.ibb.co/eMkFqk/149496258477050.png";
    } else if (score == 55) {
      scoreValue += 'You have been hit by ultraviolet radiation';
      fate.src = "https://image.ibb.co/kNLgVk/149496258477050_1.png";
    } else if (score == 56) {
      scoreValue += 'You have been hit by ultraviolet radiation';
      fate.src = "https://image.ibb.co/kNLgVk/149496258477050_1.png";  
    } else if (score == 57) {
      scoreValue += 'You have been hit by ultraviolet radiation';
      fate.src = "https://image.ibb.co/kNLgVk/149496258477050_1.png";
    } else if (score == 58) {
      scoreValue += 'You have been hit by a radio wave';
      fate.src = "https://image.ibb.co/kNLgVk/149496258477050_1.png";
      
    } else if (score == 61) {
      scoreValue += 'You have been hit by an X-ray';
      fate.src = "https://image.ibb.co/eMkFqk/149496258477050.png";
    } else if (score == 62) {
      scoreValue += 'You have been hit by an X-ray';
      fate.src = "https://image.ibb.co/eMkFqk/149496258477050.png";
    } else if (score == 63) {
      scoreValue += 'You have been hit by an X-ray';
      fate.src = "https://image.ibb.co/eMkFqk/149496258477050.png";
	  } else if (score == 64) {
      scoreValue += 'You have been hit by an X-ray';
      fate.src = "https://image.ibb.co/eMkFqk/149496258477050.png";
    } else if (score == 65) {
      scoreValue += 'You have been hit by an X-ray';
      fate.src = "https://image.ibb.co/kNLgVk/149496258477050_1.png";
    } else if (score == 66) {
      scoreValue += 'You have been hit by an X-ray';
      fate.src = "https://image.ibb.co/kNLgVk/149496258477050_1.png";  
    } else if (score == 67) {
      scoreValue += 'You have been hit by an X-ray';
      fate.src = "https://image.ibb.co/kNLgVk/149496258477050_1.png";
    } else if (score == 68) {
      scoreValue += 'You have been hit by a radio wave';
      fate.src = "https://image.ibb.co/kNLgVk/149496258477050_1.png";
      
    } else if (score == 71) {
      scoreValue += 'You have been hit by a gamma ray';
      fate.src = "https://image.ibb.co/eMkFqk/149496258477050.png";
    } else if (score == 72) {
      scoreValue += 'You have been hit by a gamma ray';
      fate.src = "https://image.ibb.co/eMkFqk/149496258477050.png";
    } else if (score == 73) {
      scoreValue += 'You have been hit by a gamma ray';
      fate.src = "https://image.ibb.co/eMkFqk/149496258477050.png";
	  } else if (score == 74) {
      scoreValue += 'You have been hit by a gamma ray';
      fate.src = "https://image.ibb.co/eMkFqk/149496258477050.png";
    } else if (score == 75) {
      scoreValue += 'You have been hit by a gamma ray';
      fate.src = "https://image.ibb.co/kNLgVk/149496258477050_1.png";
    } else if (score == 76) {
      scoreValue += 'You have been hit by a gamma ray';
      fate.src = "https://image.ibb.co/kNLgVk/149496258477050_1.png";  
    } else if (score == 77) {
      scoreValue += 'You have been hit by a gamma ray';
      fate.src = "https://image.ibb.co/kNLgVk/149496258477050_1.png";
    } else if (score == 78) {
      scoreValue += 'You have been hit by a radio wave';
      fate.src = "https://image.ibb.co/kNLgVk/149496258477050_1.png";
 		}
    return scoreValue;
  }

  $('body').on('click', '#evaluate', function(e) {
    var amount = $('#amount').val();
var dropdown = $.trim($('.wrapper-dropdown-1').children('span').text().split(':')[1]);
var selectedValues = [amount,dropdown];

    var score = evalScore(selectedValues);
    var scoreLabel = getScoreLabel(score);

    var valueString = 'Selected: ';
    if (selectedValues.length > 0) {
      $.each(selectedValues, function(k, v) {
        if (k === (selectedValues.length - 1)) {
          valueString += v;
        } else {
          valueString += v + ', '
        }
      });
    } else {
      valueString += 'None';
    }

    var $result = $('#result');
    $result.html(scoreLabel);

    var $displayValues = $('#values');
    $displayValues.html(valueString);

		var $info = $('#info');
    $info.html(scoreInfo);
  });
});
＆＃13; 
body {
  background:transparent;
}

::selection {
  background: #ffffcc;
}

::-moz-selection {
  background: #ffffcc;
}

/* protection */

*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.wrapper {
  margin: 40px 0 0 -260px;
  font-weight: 400;
}

.wrapper:after {
  clear: both;
  content: "";
  display: table;
}

.wrapper-dropdown-1 {
  position: relative;
  /* Enable absolute positionning for children and pseudo elements */
  width: 200px;
  padding: 10px;
  margin: 0 auto;
  /* Styles */
  background: #ffcccc;
  color: #000;
  outline: none;
  cursor: pointer;
  font-family: helvetica;
  font-size: 12px;
  letter-spacing: 1px;
}

.wrapper-dropdown-1 .dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  /* Styles */
  list-style: none;
  border-top: 1px solid #000;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}

.wrapper-dropdown-1 .dropdown li a {
  display: block;
  text-decoration: none;
  color: #9e9e9e;
  padding: 10px 20px;
}

.wrapper-dropdown-1 .dropdown li:hover a {
  background: #ffe6e6;
}

.wrapper-dropdown-1.active .dropdown {
  opacity: 1;
  pointer-events: auto;
}

.wrapper-dropdown-1.active:after {
  border-color: #9bc7de transparent;
  border-width: 6px 6px 0 6px;
  margin-top: -3px;
}

.no-opacity .wrapper-dropdown-1 .dropdown,
.no-pointerevents .wrapper-dropdown-1 .dropdown {
  display: none;
  opacity: 1;
  /* If opacity support but no pointer-events support */
  pointer-events: auto;
  /* If pointer-events support but no pointer-events support */
}

.no-opacity .wrapper-dropdown-1.active .dropdown,
.no-pointerevents .wrapper-dropdown-1.active .dropdown {
  display: block;
}


/** slider **/

.text {
  font-family: helvetica;
  font-size: 12px;
  margin: 10px;
  background: transparent;
  letter-spacing: 1px;
}

select {
  margin-top: 20px;
  margin-left: 5px;
}

option {
  text-decoration: none;
  display: block;
  opacity: 1;
  padding: 5px;
  color: black;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

option:hover,
option:focus,
option:active {
  background: #ffe6e6;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

p {
  font-family: helvetica;
  font-size: 12px;
  margin: 10px;
  letter-spacing: 2px;
  background: #fff;
  padding-left: 5px;
  margin-left: 25px;
  width: 305px;
}

#wavescontainer {
  font-family: helvetica;
  font-size: 12px;
  margin: 10px;
  letter-spacing: 2px;
  background: #fff;
  padding-left: 5px;
  margin-left: 425px;
  width: 105px;
  position:relative;
}

#waves {
  color: black;
  font-size: 12px;
  padding: 5px;
  margin: 5px;
  position:relative;
}


#amount {
  color: black;
  font-size: 12px;
  padding: 5px;
  margin: 5px;
}

#slider {
  width: 320px;
  height: 2px;
  border-color: transparent;
  background-color: black;
  margin: 20px;
}

#slider .wavelengths {
  width: 350px;
  background-color: transparent;
  margin-top: 10px;
  margin-left: -5px;
  font-size: 10px;
}

dub {
  margin: 0px 15px;
}

.ui-slider {
  position: relative;
  text-align: left;
}

.ui-slider .ui-slider-handle {
  position: absolute;
  z-index: 2;
  width: 25px;
  height: 10px;
  cursor: default;
  border-radius: 2px;
  -ms-touch-action: none;
  touch-action: none;
}

.ui-slider-horizontal .ui-slider-handle {
  top: -.3em;
  margin-left: -.6em;
}

.ui-slider-horizontal .ui-slider-range-min {
  left: 0;
}

.ui-slider-horizontal .ui-slider-range-max {
  right: 0;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
  border: 1px solid #000;
  background: #000;
  font-weight: normal;
  color: #fff;
  margin-top: 0px;
}

.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited,
a.ui-button,
a:link.ui-button,
a:visited.ui-button,
.ui-button {
  color: #fff;
  text-decoration: none;
}

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus,
.ui-button:hover,
.ui-button:focus {
  border: 1px solid #000;
  background: #000;
  font-weight: normal;
  color: #fff;
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
  border: 1px solid #000;
  background: #000;
  font-weight: normal;
  color: #ffffff;
}

.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
  color: #ffffff;
  text-decoration: none;
}

.ui-dialog-title {
  font-size: 110% !important;
  color: #FFFFFF !important;
  background: #000000 !important;
}

/* results */

button {
  background: #ccffcc;
  height: 100px;
  width: 100px;
  border-radius: 100%;
  border: 2px double white;
  font-size: 12px;
  font-family: helvetica;
  letter-spacing: 2px;
  color: black;
  margin-left: 70%;
}

button:active {
  background: #e6ffe6;
}

h4 {
  margin-left:100px;
  margin-top:60px;
  font-family:helvetica;
  font-size:12px;
  font-weight:normal;
}

h5 {
  margin-left:100px;
  font-family:helvetica;
  font-size:12px;
  font-weight:normal;
}
＆＃13; 
<link href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<link href="http://jsfiddle.net/resources/demos/style.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="text">
  For [10 sec] exposure and [100 watts] of given wavelength. All fields are required.
  <hr>
</div>
<!-- colors: #ffffcc, #ccffcc, #ffcc99, #ffcccc -->
<p>
  <label for="amount">WAVELENGTH:</label>
  <input type="text" id="amount" readonly style="border:0; color:#000; font-weight:normal; width:150px; background:#ccffcc; letter-spacing:1px; text-align:center;">
</p>

<p>
  <label for="waves">INFO:</label>
  <textarea id="waves" readonly style="border:0; background:#ffffcc; width:200px; height:100px;"></textarea>
  </p>

<div id="slider">
  <div class="wavelengths">
    10<sup>3</sup>
    <dub></dub> 10<sup>-2</sup>
    <dub></dub> 10<sup>-5</sup>
    <dub></dub> .5x10<sup>-6</sup>
    <dub></dub> 10<sup>-8</sup>
    <dub></dub> 10<sup>-10</sup>
    <dub></dub> 10<sup>-12</sup>
  </div>
</div>


<section class="main">
  <div class="wrapper">
    <div id="dd" class="wrapper-dropdown-1" tabindex="1">
      <span>+ PROTECTION (2 feet)</span>
      <ul class="dropdown" tabindex="1">
        <li><a href="#" value="Air">Air</a></li>
        <li><a href="#" value="Hat">Hat</a></li>
        <li><a href="#" value="Sunscreen">Sunscreen</a></li>
        <li><a href="#" value="Sweater">Sweater</a></li>
        <li><a href="#" value="Glass">Glass</a></li>
        <li><a href="#" value="Brick">Brick</a></li>
        <li><a href="#" value="Steel">Steel</a></li>
        <li><a href="#" value="Lead">Lead</a></li>
      </ul>
    </div>
  </div>
</section>

<br>
<button id="evaluate" type="button">READY</button>
<h4 id="result"></h4>
<h5 id="values"></h5>
<h5 id="info"></h5>


<img src="https://image.ibb.co/eMkFqk/149496258477050.png" name="fate" style="height:400px;">



<!-- WOUNDED fate.src = "https://image.ibb.co/kNLgVk/149496258477050_1.png"; 
  DEAD fate.src = "https://image.ibb.co/cYe8Ak/149496258477050_3.png";
-->
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题