把以下代码保存成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的水的更多相关文章

  1. 给你一个 5L 和 3L 桶,水无限多,怎么到出 4L。

    智力题 给你一个 5L 和 3L 桶,水无限多,怎么到出 4L. 思考过程 先将 3L 的桶装满水,倒入 5L 的桶里. 再重新将 3L 的桶装满水,倒入 5L 的桶里,把 5 L 的桶装满后,这样 ...

  2. JavaScript:用JS实现加载页面前弹出模态框

    用JS实现加载页面前弹出模态框 主要的JavaScript 代码是: <script> //加载模态框 $('#myModal').modal(); $(document).ready(f ...

  3. 《JS高程》-教你如何写出可维护的代码

    1.前言   在平时工作开发中,大部分开发人员都花费大量的时间在维护其他人员的代码.很难从头开始开发新代码,很多情况下都是以他人成果为基础的,或者新增修改需求,自己写的代码也会被其他开发人员调用,所以 ...

  4. 工作当中实际运用(3)——js原生实现鼠标点击弹出div层 在点击隐藏

    function onmou(){ var divs=document.getElementById('kefuDV');//获取到你要操作的div if (divs.style.display==& ...

  5. layer.js,,,分享一个好用的弹出层

    基本属性: <!DOCTYPE html> <html> <head> <head> <meta content="text/html; ...

  6. 原生js添加博客点击鼠标出小心心效果~~

    昨天刚申请成功JS权限,心血来潮想添加点东西,记得之前看到别人家博客首页点击鼠标的时候会出现炫酷的 “小心心”,自己也来搞一个.没有用jquery啥的框架,原生js写起来麻烦了点,不过主要是怕博客首页 ...

  7. js原生实现div渐入渐出

    jq对渐入渐出进行封装,简单的使用连个方法就可以实现.fadeIn(),fadeOut();如果我们界面没有使用jq那么原生怎么实现呢? 我们讲解一下,这个原理.当我们要实现渐入的时候,首先是让隐藏的 ...

  8. js防止安卓手机软键盘弹出挤压页面导致变形的方法

    5防止安卓手机软键盘弹出挤压页面导致变形的方法 输入框定位在底部,手机端打开,输入框聚焦后软键盘打开为什么会瞬间自动关闭呢? 先看看问题: 1.原来是这样的: 2.在苹果手机里面是正常的: 3.到了安 ...

  9. JS应用实例3:定时弹出广告

    在观看视频时候总会发现有广告弹出 这里就做一个类似这样的定时弹出广告的实例: 前面的JS代码和HTML写在同一个文件,实际开发中总是分开来写 用的时候引入即可 HTML代码: <!DOCTYPE ...

随机推荐

  1. R17下maps新增参数的问题

    今天遇到一个奇怪的问题,我之前写的一个函数在我弟弟的机器上编译出错.代码如下: %%将list [k1,v1,k2,v2...]转换成map {k1=>v1,key2=>v2...} -s ...

  2. Java常用函数式接口--Consumer接口andThen()方法使用案例(二)

    Java常用函数式接口--Consumer接口使用案例

  3. echarts使用中的那些事儿(二)

    然而第二天的事情你怎么能猜到客户的心思呢: 客户:右边的是啥? 偶:可放大缩小查看各个时期的数据. 客户:把它去掉吧,全部直观显示. 偶:哦,不过数据过多的话会导致页面过长的. 客户:只有你知道这个可 ...

  4. Win10微软帐户切换不回Administrator本地帐户的解决方法【亲测】

    在Win10系统中经常会用到微软帐户登录,如应用商店等地方,不过一些用户反馈原来使用Administrator帐户被绑定微软帐户后无法切换回本地帐户,连[改用本地帐户登录]按钮都没有,那么怎么解决呢? ...

  5. JavaScript_4_数据类型

    1. JavaScript对大小写敏感. 2. JavaScript是脚本语言.浏览器会在读取代码时,逐行地执行脚本代码.而对于传统编程来说,会在执行前对所有代码进行编译. 3. 变量什么用var, ...

  6. 洛谷 U3348 A2-回文数

    题目背景 方方方很喜欢回文数,于是就有了一道关于回文数的题目. 题目描述 求从小到大第n(1<=n<=10^18)个回文数. 注释:出题人认为回文数不包括0. 输入输出格式 输入格式: 一 ...

  7. Java 集合框架_中

    Set接口 特点: [1]Set接口表示一个唯一.无序的容器(和添加顺序无关) Set接口常用实现类有 HashSet [1]HashSet是Set接口的实现类,底层数据结构是哈希表. [2]Hash ...

  8. 2018.4.1 Ubuntu16.04 下配置Tomcat服务器以及设置dingshi启动

    Tomcat自启动的设置技巧 以root用户登录系统: cd /etc/rc.d/init.d/ vi tomcat #!/bin/sh # # tomcat: Start/Stop/Restart ...

  9. 常用的ement语法

    缩写语法: 介绍:Emmet 使用类似于 CSS 选择器的语法描述元素在生成的文档树中的位置及其属性. 声明:第一次写博客大家多多关照,如有错误或者需要补充的请到评论里留言,谢谢大家! 快速生成htm ...

  10. java的IO机制

    BIO.NIO.AIO -----> Block-IO : inputStream 和OutputStream,Reader和Writer 1个连接,启动一个线程,这样导致很大的线程开销 NIO ...