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 ...
随机推荐
- Linux：linux下建ftp用户，并限制用户访问路径
安装:ftp安装部分,操作步骤如下: 可以使用yum命令直接安装ftp # yum install vsftpd ftp服务的开启与关闭命令: 开启:# service vsftpd start 关闭 ...
- javaScript的注释、变量和基本数据类型
上一级写了javaScript是用来操作文档对象元素的,这一次带大家看看javaScriput的注释.变量和基本数据类型. 1.注释:注释是什么呢?注释其实就是阻止浏览器解析某一行或者多行代码或描述的 ...
- mysql+thinkphp +amcharts 完成图表统计功能
思路:从mysql数据库查询数据,经过thinkphp 后端控制器做逻辑处理,返回给前端,前端调用Amcharts 插件 1.数据查询: public function order($time='', ...
- HDU 4738 Caocao's Bridges taijan （求割边，神坑）
神坑题.这题的坑点有1.判断连通,2.有重边,3.至少要有一个人背*** 因为有重边,tarjan的时候不能用子结点和父节点来判断是不是树边的二次访问,所以我的采用用前向星存边编号的奇偶性关系,用^1 ...
- FreeRTOS笔记
任务的创建和删除(静态方法) 任务创建后要开启调度器. FreeRTOSConfig.h 1. 改宏 使能静态创建函数. 会出现,有两个函数未定义. Cortex-M中断管理(上) NVIC:嵌套向量 ...
- setTimeout,clearTimeout的一些好用法
if(hidden != 1){ $.ui.showMask(); var _aaa = setTimeout(function(){ $.ui.hideMask(); },5000); } //be ...
- DateTime与long互转
DateTime转long: public static long GetDateLong(object time) { DateTime epoc = TimeZone.CurrentTimeZon ...
- C#与SQLServer数据库连接
第一种连接数据库方法:直接通过数据库的用户名.密码等连接 步骤: (1)建立SqlConnection对象,指定SqlConnection对象的ConnectionString属性: (2)打开数据库 ...
- js中charAt()与charCodeAt()区别
1. str.charAt(index); 返回指定位置的字符 字符串中第一个字符的下标是 0.如果参数 index 不在 0 与 string.length 之间,该方法将返回一个空字符串. ind ...
- 51nod——1391 01串（字符串、前缀和）
好像这题是4级题下放2级? 预处理:求每个位置 x 左区间 [ 0 , x ] 中 1 比 0 多的数量和右区间 ( x , n - 1 ] 中 0 比 1 多的数量(少就是负的).相当于求两个前缀和 ...