JS实现——用3L和5L量出4L的水
把以下代码保存成donglanguage.html文件，使用Google或360浏览器打开
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<title>donglanguage</title>
<style>
</style>
</head> <body> <div style="position:absolute;top:20px;left:10px;width:200px;height:550px;">
<div style="position:relative;top:200px;z-index:999">a 3L</div>
<div id="a" style="position:absolute;top:200px;width:100px;height:300px;background-color:white;border:1px solid blue">
<div id="water" style="position:relative;top:300px;height:0%;background-color:blue"></div>
</div>
<button name="fill" style="position:relative;top:520px">装满水</button>
<button name="empty" style="position:relative;top:520px">倒空水</button>
<button name="toFill" style="position:relative;top:520px">倒满水到另一个桶</button>
</div> <div style="position:absolute;top:20px;left:220px;width:200px;height:550px;">
<div style="position:relative;top:0px;z-index:999">b 5L</div>
<div id="b" style="position:absolute;top:0px;width:100px;height:500px;background-color:white;border:1px solid blue">
<div style="position:relative;top:500px;height:0%;background-color:blue"></div>
</div>
<button name="fill" style="position:relative;top:520px">装满水</button>
<button name="empty" style="position:relative;top:520px">倒空水</button>
<button name="toFill" style="position:relative;top:520px">倒满水到另一个桶</button>
</div> <div style="position:relative;top:10px;left:500px;">
问题：一个3L的捅，还有一个5L的桶，水无限。怎么操作才能准确地弄出4L的水？
<button id="a_solution">我不会，看看解法</button>
</div>
<div style="position:relative;left:500px;top:40px;">
<textarea id="program" style="font-size:20px;" rows="20" cols="40"></textarea>
<button id="run">运行</button>
</div> </body> <script> function $(selector) {
var c = selector[0];
if(c == '#') {
var id = selector.substring(1);
return document.getElementById(id);
} else if(c == '@') {
var name = selector.substring(1);
return document.getElementsByName(name);
} else {
return document.getElementsByTagName(selector);
}
}; //onload start
onload = function() {
$('#run').onclick = function() {
var code = $('#program').value;
run(code);
} $('#a_solution').onclick = function() {
var program = 'a.empty()\nb.empty()\n\n' +
'b.fill()\nb.toFill(a)\na.empty()\nb.toFill(a)\nb.fill()\nb.toFill(a)';
$('#program').value = program;
run(program);
} function fillClick() {
run(this.parentNode.children[1].id + '.fill()');
} function emptyClick() {
run(this.parentNode.children[1].id + '.empty()');
} function toFillClick() {
var thisId = this.parentNode.children[1].id;
var from, to;
if(thisId == 'a') {
from = 'a';
to = 'b';
} else if(thisId == 'b') {
from = 'b';
to = 'a';
}
run(from + '.toFill(' + to + ')');
} window.opBtns = $('button');
window.disableAllOpBtns = function(b) {
for(var i = 0; i < opBtns.length; i++)
opBtns[i].disabled = b ? 'disabled' : '';
} for(var i = 0; i < opBtns.length; i++) {
var btn = opBtns[i];
switch(btn.name) {
case 'fill':
btn.onclick = fillClick;
break;
case 'empty':
btn.onclick = emptyClick;
break;
case 'toFill':
btn.onclick = toFillClick;
break;
}
} window.queue = false;
window.buckets = [$('#a'), $('#b')]; };//onload end function isEmpty(bucket) {
return parseInt(bucket.children[0].style.top) == parseInt(bucket.style.height);
} function isFull(bucket) {
return parseInt(bucket.children[0].style.top) == 0;
} function addWater(bucket, litre, zeroH, fullH) {
queue = false;
disableAllOpBtns(true);
var water = bucket.children[0];
var timer = setInterval(function() {
if(litre == 0) {
clearInterval(timer);
disableAllOpBtns(false);
if(zeroH)
zeroH();
queue = true;
return;
}
if(isFull(bucket)) {
clearInterval(timer);
disableAllOpBtns(false);
if(fullH)
fullH();
queue = true;
} var top = parseInt(water.style.top);
water.style.top = (top - 100) + 'px';
water.style.height = (parseInt(bucket.style.height) - (top - 100)) + 'px';
--litre;
}, 100);
} function subWater(bucket, litre, zeroH, emptyH) {
queue = false;
disableAllOpBtns(true);
var water = bucket.children[0];
var timer = setInterval(function() {
if(isEmpty(bucket)) {
clearInterval(timer);
disableAllOpBtns(false);
if(emptyH)
emptyH();
queue = true;
return;
}
if(litre == 0) {
clearInterval(timer);
disableAllOpBtns(false);
if(zeroH)
zeroH();
queue = true;
return;
}
var top = parseInt(water.style.top);
water.style.top = (top + 100) + 'px';
water.style.height = (parseInt(bucket.style.height) - (top + 100)) + 'px';
--litre;
}, 100);
} function fill(bucket) {
addWater(bucket, parseInt(bucket.children[0].style.top) / 100);
} function empty(bucket) {
subWater(bucket, parseInt(bucket.children[0].style.height) / 100);
} function toFill(bucketFrom, bucketTo) {
queue = false;
disableAllOpBtns(true);
var waterFrom = bucketFrom.children[0];
var waterTo = bucketTo.children[0];
var timer = setInterval(function() {
var waterFromTop = parseInt(waterFrom.style.top);
var waterFromHeight = parseInt(waterFrom.style.height);
var waterToTop = parseInt(waterTo.style.top);
var waterToHeight = parseInt(waterTo.style.height); if(isFull(bucketTo) || isEmpty(bucketFrom)) {
clearInterval(timer);
disableAllOpBtns(false);
queue = true;
return;
}
waterFrom.style.top = (waterFromTop + 100) + 'px';
waterFrom.style.height = (parseInt(bucketFrom.style.height) - (waterFromTop + 100)) + 'px';
waterTo.style.top = (waterToTop - 100) + 'px';
waterTo.style.height = (parseInt(bucketTo.style.height) - (waterToTop - 100)) + 'px';
}, 100);
} var isOperator = function (c) { return /[+\-*\/\^%=(),.]/.test(c); },
isDigit = function (c) { return /[0-9]/.test(c); },
isWhiteSpace = function (c) { return /\s/.test(c); },
isIdentifier = function (c) { return typeof c === "string" && !isOperator(c) && !isDigit(c) && !isWhiteSpace(c); }; function lex(input) {
var tokens = [];
var c, i = 0;
var advance = function () { return c = input[++i]; };
var addToken = function (type, value) {
tokens.push({
type: type,
value: value
});
};
while(i < input.length) {
c = input[i];
if(isWhiteSpace(c))
advance();
if(isIdentifier(c)) {
var id = c;
while(isIdentifier(advance())) id += c;
addToken("identifier", id);
} else if(isOperator(c)) {
addToken(c);
advance();
}
}
addToken('(end)'); return tokens;
} function parse(tokens) {
var expression = function() {
var expression = {};
expression.type = 'call';
expression.args = [];
var argExpression = {};
expression.args.push(tokens[i]);
advance();
advance();
expression.name = tokens[i].value;
advance();
advance();
if(tokens[i].type == 'identifier') {
expression.args.push(tokens[i]);
advance();
}
advance();
return expression;
} var parseTree = [];
var i = 0;
var advance = function () { return tokens[++i]; };
while(tokens[i].type != '(end)') {
parseTree.push(expression());
} return parseTree; } function evaluate(parseTree) {
var functions = {
'fill': fill,
'empty': empty,
'toFill': toFill
}; var variables = {
'a': buckets[0],
'b': buckets[1]
}; var parseNode = function(node) {
if(node.type == 'identifier') {
var value = variables[node.value];
return value;
}else if(node.type == 'call') {
var args = node.args;
for(var i = 0; i < args.length; i++)
args[i] = parseNode(args[i]);
return functions[node.name].apply(null, args);
}
} var i = 0;
queue = true;
var timer = setInterval(function() {
if(queue) {
parseNode(parseTree[i]);
i++;
if(i >= parseTree.length) {
clearInterval(timer);
}
}
}, 0); } function run(code) {
try {
var tokens = lex(code);
var parseTree = parse(tokens);
return evaluate(parseTree);
} catch (e) {
return e;
}
}
</script> </html>
出处：qq群--编程算法&思想 459909287
JS实现——用3L和5L量出4L的水的更多相关文章
- 给你一个 5L 和 3L 桶，水无限多，怎么到出 4L。
智力题 给你一个 5L 和 3L 桶,水无限多,怎么到出 4L. 思考过程 先将 3L 的桶装满水,倒入 5L 的桶里. 再重新将 3L 的桶装满水,倒入 5L 的桶里,把 5 L 的桶装满后,这样 ...
- JavaScript：用JS实现加载页面前弹出模态框
用JS实现加载页面前弹出模态框 主要的JavaScript 代码是: <script> //加载模态框 $('#myModal').modal(); $(document).ready(f ...
- 《JS高程》-教你如何写出可维护的代码
1.前言 在平时工作开发中,大部分开发人员都花费大量的时间在维护其他人员的代码.很难从头开始开发新代码,很多情况下都是以他人成果为基础的,或者新增修改需求,自己写的代码也会被其他开发人员调用,所以 ...
- 工作当中实际运用（3）——js原生实现鼠标点击弹出div层 在点击隐藏
function onmou(){ var divs=document.getElementById('kefuDV');//获取到你要操作的div if (divs.style.display==& ...
- layer.js,,,分享一个好用的弹出层
基本属性: <!DOCTYPE html> <html> <head> <head> <meta content="text/html; ...
- 原生js添加博客点击鼠标出小心心效果~~
昨天刚申请成功JS权限,心血来潮想添加点东西,记得之前看到别人家博客首页点击鼠标的时候会出现炫酷的 “小心心”,自己也来搞一个.没有用jquery啥的框架,原生js写起来麻烦了点,不过主要是怕博客首页 ...
- js原生实现div渐入渐出
jq对渐入渐出进行封装,简单的使用连个方法就可以实现.fadeIn(),fadeOut();如果我们界面没有使用jq那么原生怎么实现呢? 我们讲解一下,这个原理.当我们要实现渐入的时候,首先是让隐藏的 ...
- js防止安卓手机软键盘弹出挤压页面导致变形的方法
5防止安卓手机软键盘弹出挤压页面导致变形的方法 输入框定位在底部,手机端打开,输入框聚焦后软键盘打开为什么会瞬间自动关闭呢? 先看看问题: 1.原来是这样的: 2.在苹果手机里面是正常的: 3.到了安 ...
- JS应用实例3：定时弹出广告
在观看视频时候总会发现有广告弹出 这里就做一个类似这样的定时弹出广告的实例: 前面的JS代码和HTML写在同一个文件,实际开发中总是分开来写 用的时候引入即可 HTML代码: <!DOCTYPE ...
随机推荐
- SQL概念及DDL语句
SQL概念 SQL全称(Structured Query Language):结构化查询语句,是一种特殊目的的编程语言,是一种数据库查询和程序设计语言,用于存取数据以及查询和管理关系型数据库. 其实就 ...
- 终于有人把P2P、P2C、O2O、B2C、B2B、C2C的区别讲透了！还有许多其它类别的类型分享
平时在看招聘时,经常看到我们是什么B2C电子商务网站,但是一直不知是啥意思,今天在WEB开发者上面看到这篇文章,就是知道了个所以然,以记录分享. P2P.P2C .O2O .B2C.B2B. C2C, ...
- django之分页插件
from django.utils.safestring import mark_safe class Page: def __init__(self, current_page, data_coun ...
- SaaS 系统架构设计经验总结
2B SaaS系统最近几年都很火.很多创业公司都在尝试创建企业级别的应用 cRM, HR,销售, Desk SaaS系统.很多SaaS创业公司也拿了大额风投.毕竟SaaS相对传统软件的优势非常明显. ...
- Bezier（贝塞尔曲线）
CDC::PolyBezierBOOL PolyBezier( const POINT* lpPoints, int nCount ); 和 曲线原理及多段曲线连接处如何光滑连接:第一段曲线要有4个点 ...
- linux yum安装指定版本mysql
1.下载mysql rpm包 cd /usr/local/src wget https://dev.mysql.com/get/mysql80-community-release-el7-.noarc ...
- Android（java）学习笔记133：Eclipse中的控制台不停报错Can't bind to local 8700 for debugger
[DDMS] Can't bind to local 8600 for debugger 改成 Under Window -> Preferences -> Android -> D ...
- JQuery EasyUI学习记录（四）
1.EasyUI中的validatebox使用 提供的校验规则: 1.非空校验required="required" 2.使用validType指定 email: 正则表达式匹配电 ...
- Java开发小游戏 用键盘控制精灵在游戏中上下左右跑动 窗体小游戏可打包下载，解压后双击start运行
package com.swift; import java.awt.Point; import java.awt.event.KeyEvent; import com.rupeng.game.Gam ...
- cocos2dx for android 接入 fmod的过程
cocos2dx自带的音效播放有SimpleAudioEngine和AudioEngine两个,SimpleAudioEngine可以播放简单的音效, 如果播放音效数量过多的话,多导致有些音效播放失败 ...