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 ...
随机推荐
- Android自定义可拖动的悬浮按钮
在页面上随意拖动的按钮 public class MoveScaleRotateView extends RelativeLayout { private Context mContext; //默认 ...
- cocos2d-x入门学习篇;切换场景
手机游戏开发最近很火爆,鉴于一直在学习c++,看起来上手就比较快了.这篇文章来自皂荚花 cocos2d-x技术,我把我的想法分享给大家. 首先来看一段代码: CCScene* HelloWorld:: ...
- ./theHarvester.py -d baidu.com -l 100 -b google
./theHarvester.py -d baidu.com -l 100 -b google
- win7下一直试用Beyond Compare 4
找到目录C:\Users\用户名\AppData\Roaming\BeyondCompare,将这个目录删除,重启compare即可.
- Linux OpenGL 实践篇-16 文本绘制
文本绘制 本文主要射击Freetype的入门理解和在OpenGL中实现文字的渲染. freetype freetype的官网,本文大部分内容参考https://www.freetype.org/fre ...
- UVA 10537 Toll! Revisited (逆推,最短路)
从终点逆推,d[u]表示进入u以后剩下的货物,那么进入u之前的货物数量设为y,d[u] = x,那么y-x=ceil(y/20.0)=(y-1)/20+1=(y+19)/20. (y-x)*20+r= ...
- [神经网络]一步一步使用Mobile-Net完成视觉识别(二)
1.环境配置 2.数据集获取 3.训练集获取 4.训练 5.调用测试训练结果 6.代码讲解 本文是第二篇,调用官方例子并获取数据集. 上一节里面记得我们需要配置PYTHONPATH,大家应该发现,每次 ...
- Bootstrap历练实例:带徽章的列表组
向列表组添加徽章 我们可以向任意的列表项添加徽章组件,它会自动定位到右边.只需要在 <li> 元素中添加 <span class="badge"> 即可.下 ...
- Unity3d 中键值监听方法
unity3d的api中没有负责监听键值的方法,不过unity的input类是通过c#类获取各类监听事件,所以我们可以通过c#类监听,方法如下: void OnGUI() { Event e = Ev ...
- 在2d游戏中常用的向量方式
function cc.exports.VectorRotateByAngle(vector,angle)--计算向量旋转后的向量,angle:正数逆时针,负输顺时针 angle = angle*ma ...