jokes
先看效果如下
目录如下
//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的更多相关文章
- Programmer's Jokes
1. 一天, 下着小雨, 和同事们一起去上班,一位同事差点滑倒,另一位同事笑话说:如果人走路用爬的就不会摔倒了! 遂反问他:能用两行代码搞定的事情为什么要用4行呢? 2. 有趣的公式( Fr ...
- python_爬虫一之爬取糗事百科上的段子
目标 抓取糗事百科上的段子 实现每按一次回车显示一个段子 输入想要看的页数,按 'Q' 或者 'q' 退出 实现思路 目标网址:糗事百科 使用requests抓取页面 requests官方教程 使用 ...
- words
conscious[英][ˈkɒnʃəs][美][ˈkɑnʃəs]consensus[英][kənˈsensəs][美][kənˈsɛnsəs] scious sensuswaterflood; de ...
- http-code 未译
1xx Informational Request received, continuing process. This class of status code indicates a provis ...
- 【转】去掉Sqlite3 数据库中的前后回车换行符(newline)
原文: http://www.blogjava.net/pts/archive/2013/06/10/400... 时间: 2013-06-10 转自:http://www.ityuedu.com/a ...
- MongoDB Shard部署及Tag的使用
Shard部署 准备测试环境 为准备数据文件夹 Cd /home/tiansign/fanr/mongodb/Shard mkdir configdb1 configdb2 configdb3 mk ...
- android 资讯阅读器
最近找申请到了一个不错的接口 , 非常适合拿来写一个资讯类的app. 现在着手写,随写随更.也算是抛砖引玉.烂尾请勿喷.╭(╯^╰)╮ android 资讯阅读器 第一阶段目标样式(滑动切换标签 , ...
- [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 ...
- [计算机取证技术] VDI-in-a-Box Analysis Results
原文跳转: http://dig4n6.blogspot.tw/2013/07/vdi-in-box-analysis-results.html *文中引用图片如无法浏览,请科学上网* VDI-in- ...
随机推荐
- C/S和B/S应用程序的区别
一.C/S和B/S介绍: 1.C/S介绍: Client/Server架构,即客户端/服务器架构.是大家熟知的软件系统体系结构,通过将任务合理分配到Client端和Server端,降低了系统的通讯开销 ...
- java、二维数组详解！
/* java 二维数组的概念 使用方法! 1.什么是二维数组? 答案:数组的数组! 他的每一个元素都是数组!二维数组是(存储一维数组的)一维数组. 2.如何定义?(以二维数组为列) int arr[ ...
- Sql server 经典常用函数
..STUFF()用另一子串替换字符串指定位置.长度的子串.STUFF (<character_expression1>, <start_ position>, <len ...
- React 设计模式 --- Container and Presentational pattern(容器和展示组件分离)
在React开发中,一个典型的React组件通常会混杂着逻辑操作部分和展示部分.逻辑操作部分指的是和页面UI无关的内容,如API的调用,数据的处理,事件处理函数. 展示部分则指的是创建页面UI 的内容 ...
- hdu-1176（dp）
解题思路:用dp做的,dp[i][j]表示在i时刻,j点的最大馅饼.a[i][j]表示在i这个时刻j点同时掉落的馅饼: 每个点除了0和10之外,都有三种状态: 1.没有移动,这样值就为dp[i][j] ...
- FFmpeg 将YUV数据转RGB
只要开始初始化一次,结束后释放就好,中间可以循环转码 AVFrame *m_pFrameRGB,*m_pFrameYUV; uint8_t *m_rgbBuffer,*m_yuvBuffer; str ...
- 了解AutoCAD对象层次结构 —— 1 ——应用程序
想象这样一个场景:当您开始一天的工作,坐到电脑前面,用鼠标双击桌面上的AutoCAD Civil 3D图标,这时一个AutoCAD Civil 3D应用程序将运行起来.打开Windows任务管理器,我 ...
- python字符编码与文件打开
一 字符编码 储备知识点: 1.计算机系统分为三层: 应用程序 操作系统 计算机硬件 2.运行Python程序的三个步骤 1.先启动python解释器 2.再将python文件当做普通的文本文件读入内 ...
- Aizu2130-Billion Million Thousand-dp
用dp求出最大的表达,再用dp求出.//然而并没有想出来 #include <cstdio> #include <string> #include <algorithm& ...
- Verilog定义计算位宽的函数clogb2
在很多情况下要计算输入输出的位宽,比如你写一个8*8的ram,那么地址需要三位去表示,那么这个函数的方便就体现出来了,你需要使用函数定义就好了,如果对于多文件可以包含定义的文件: 如果你的DEPTH是 ...