先看效果如下

目录如下

//index.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width">
  <title>笑话生成器</title>
  <link rel="stylesheet" href="style.css">
  <script src="ui.js" defer></script>
  <script src="main.js" defer></script>
</head>

<body>
  <div>
    <label for="customname" id="lbl-customname">请输入自定义的名字：</label>
    <input id="customname" type="text" placeholder="李雷">
  </div>
  <div>
    <label for="cn" id="lbl-cn">中国</label>
    <input id="cn" type="radio" name="country" value="cn" checked>
    <label for="us" id="lbl-us">美国</label>
    <input id="us" type="radio" name="country" value="us">
    <label for="uk" id="lbl-uk">英国</label>
    <input id="uk" type="radio" name="country" value="uk">
  </div>
  <div>
    <button class="randomize">随机生成笑话</button>
  </div>
  <p class="story"></p>
</body>
</html>

//main.js
const customName = document.getElementById('customname');
const randomize = document.querySelector('.randomize');
const story = document.querySelector('.story');

function randomValueFromArray(array){
  const random = Math.floor(Math.random()*array.length);
  return array[random];
}

const storyText = 'It was 94 fahrenheit outside, so :insertx: went for a walk. When they got to :inserty:, they stared in horror for a few moments, then :insertz:. Bob saw the whole thing, but was not surprised — :insertx: weighs 300 pounds, and it was a hot day.';
const insertX = ['Willy the Goblin','Big Daddy','Father Christmas'];
const insertY = ['the soup kitchen','Disneyland','the White House'];
const insertZ = ['spontaneously combusted','melted into a puddle on the sidewalk','turned into a slug and crawled away'];

const storyTextZh = '外边有34度，于是:inserta:出去遛弯。当走到:insertb:时他们被眼前的景象惊呆了，然后就:insertc:。李雷全程目睹但他并没有慌，因为:inserta:是一个270斤的胖子，天气又辣么热。';
const insertA = ['怪兽威利', '大老爹', '圣诞老人'];
const insertB = ['救助站', '迪士尼乐园', '白宫'];
const insertC = ['自燃了', '在人行道化成了一坨泥', '变成一条鼻涕虫爬走了'];

randomize.addEventListener('click', result);

function result() {
  let newStory, xItem, yItem, zItem, name;
  if (document.getElementById('cn').checked) {
    newStory = storyTextZh;

    xItem = randomValueFromArray(insertA);
    yItem = randomValueFromArray(insertB);
    zItem = randomValueFromArray(insertC);

    newStory = newStory.replace(':inserta:', xItem);
    newStory = newStory.replace(':inserta:', xItem);
    newStory = newStory.replace(':insertb:', yItem);
    newStory = newStory.replace(':insertc:', zItem);

    if (customName.value !== '') {
      name = customName.value;
      newStory = newStory.replace('李雷', name);
    }
  } else {
    newStory = storyText;

    xItem = randomValueFromArray(insertX);
    yItem = randomValueFromArray(insertY);
    zItem = randomValueFromArray(insertZ);

    newStory = newStory.replace(':insertx:', xItem);
    newStory = newStory.replace(':insertx:', xItem);
    newStory = newStory.replace(':inserty:', yItem);
    newStory = newStory.replace(':insertz:', zItem);

    if (customName.value !== '') {
      name = customName.value;
      newStory = newStory.replace('Bob', name);
    }

    if (document.getElementById("uk").checked) {
      const weight = Math.round(300 * 0.0714286) + ' stone';
      const temperature = Math.round((94 - 32) * 5 / 9) + ' centigrade';
      newStory = newStory.replace('94 fahrenheit', temperature);
      newStory = newStory.replace('300 pounds', weight);
    }
  }

  story.textContent = newStory;
  story.style.visibility = 'visible';
}


//style.css
body {
    font-family: helvetica, sans-serif;
    width: 350px;
    border: 1px solid;
    padding: 1em;
}

label {
  font-weight: bold;
}

div {
  padding-bottom: 20px;
}

input[type="text"] {
  padding: 5px;
  width: 150px;
}

p {
  background: #FFC125;
  color: #5E2612;
  padding: 10px;
  visibility: hidden;
}

//ui.js
document.getElementById('cn').onclick = () => {
    document.title = '笑话生成器';
    document.getElementById('lbl-customname').textContent = '请输入自定义的名字：';
    document.getElementById('lbl-cn').textContent = '中国';
    document.getElementById('lbl-us').textContent = '美国';
    document.getElementById('lbl-uk').textContent = '英国';
    document.getElementById('customname').placeholder = '李雷';
    document.querySelector('.randomize').textContent = '随机生成笑话';
  };

  document.getElementById('us').onclick =
  document.getElementById('uk').onclick = () => {
    document.title = 'Silly story generator';
    document.getElementById('lbl-customname').textContent = 'Enter custom name:';
    document.getElementById('lbl-cn').textContent = 'CN';
    document.getElementById('lbl-us').textContent = 'US';
    document.getElementById('lbl-uk').textContent = 'UK';
    document.getElementById('customname').placeholder = 'Bob';
    document.querySelector('.randomize').textContent = 'Generate random story';
  };

jokes的更多相关文章

  1. Programmer's Jokes

    1.   一天, 下着小雨, 和同事们一起去上班,一位同事差点滑倒,另一位同事笑话说:如果人走路用爬的就不会摔倒了!   遂反问他:能用两行代码搞定的事情为什么要用4行呢? 2.  有趣的公式( Fr ...

  2. python_爬虫一之爬取糗事百科上的段子

    目标 抓取糗事百科上的段子 实现每按一次回车显示一个段子 输入想要看的页数,按 'Q' 或者 'q' 退出 实现思路 目标网址:糗事百科 使用requests抓取页面  requests官方教程 使用 ...

  3. words

    conscious[英][ˈkɒnʃəs][美][ˈkɑnʃəs]consensus[英][kənˈsensəs][美][kənˈsɛnsəs] scious sensuswaterflood; de ...

  4. http-code 未译

    1xx Informational Request received, continuing process. This class of status code indicates a provis ...

  5. 【转】去掉Sqlite3 数据库中的前后回车换行符(newline)

    原文: http://www.blogjava.net/pts/archive/2013/06/10/400... 时间: 2013-06-10 转自:http://www.ityuedu.com/a ...

  6. MongoDB Shard部署及Tag的使用

    Shard部署 准备测试环境 为准备数据文件夹 Cd  /home/tiansign/fanr/mongodb/Shard mkdir configdb1 configdb2 configdb3 mk ...

  7. android 资讯阅读器

    最近找申请到了一个不错的接口 , 非常适合拿来写一个资讯类的app. 现在着手写,随写随更.也算是抛砖引玉.烂尾请勿喷.╭(╯^╰)╮ android 资讯阅读器 第一阶段目标样式(滑动切换标签 , ...

  8. [zz] Pixar’s OpenSubdiv V2: A detailed look

    http://www.fxguide.com/featured/pixars-opensubdiv-v2-a-detailed-look/ Pixar’s OpenSubdiv V2: A detai ...

  9. [计算机取证技术] VDI-in-a-Box Analysis Results

    原文跳转: http://dig4n6.blogspot.tw/2013/07/vdi-in-box-analysis-results.html *文中引用图片如无法浏览,请科学上网* VDI-in- ...

随机推荐

  1. 工作效率提升之Eclipse篇(1)：干掉烦人的xml文件的validation

    每次启动maven项目,都会有一堆烦人的xml文件的validation,一旦网络较慢,项目重新启动的时候,这些多余的验证纯属浪费时间. Eclipse上取消validation的方法: 1.菜单[W ...

  2. 修改tomcat控制台title的方法

    修改tomcat控制台title的方法,参考:http://www.jspkongjian.net/news.jsp?id=1125,具体如图:

  3. Mysql优化单表查询

    借助explain分析SQL,判断该怎么建立索引. 还需要注意,有些情况会导致索引失效,用不上索引,应该优化SQL,应用上索引. 什么情况导致索引失效? 1.在索引列上做任何操作(计算.函数.类型转换 ...

  4. 报错：ch.qos.logback.core.joran.spi.JoranException

    项目中使用了maven. 1.找到本地仓库,删除ch文件夹 2.对项目执行maven install 3.在更新下项目maven update

  5. 集合之LinkedHashSet（含JDK1.8源码分析）

    一.前言 上篇已经分析了Set接口下HashSet,我们发现其操作都是基于hashMap的,接下来看LinkedHashSet,其底层实现都是基于linkedHashMap的. 二.linkedHas ...

  6. Java HashMap的put操作(Java1.6)

    https://www.cnblogs.com/skywang12345/p/3310835.html // 存储数据的Entry数组,长度是2的幂. // HashMap是采用拉链法实现的,每一个E ...

  7. do not track

    privacy.trackingprotection.enabled

  8. 学习 Spring (十四) Introduction

    Spring入门篇 学习笔记 Introduction 允许一个切面声明一个实现指定接口的通知对象,并且提供了一个接口实现类来代表这些对象 由 中的 元素声明该元素用于声明所匹配的类型拥有一个新的 p ...

  9. windows开关机事件

    开关机事件.xml <ViewerConfig> <QueryConfig> <QueryParams> <Simple> <BySource&g ...

  10. BZOJ2281[Sdoi2011]黑白棋&BZOJ4550小奇的博弈——DP+nimk游戏

    题目描述 小A和小B又想到了一个新的游戏. 这个游戏是在一个1*n的棋盘上进行的,棋盘上有k个棋子,一半是黑色,一半是白色. 最左边是白色棋子,最右边是黑色棋子,相邻的棋子颜色不同. 小A可以移动白色 ...