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 ...

随机推荐

对于拼接进去的html原来绑定的jq事件失效
JQ拼接显示的页面中鼠标事件失效由于是先加载html在用js层绑定的所有后来加进来的html内容就不再绑定js了所以我们需要利用delegate绑定,但是同样道理也不能写在普通的方法层里,因为这样 ...
postgresql+ C#+ DHTMLX 学习汇总
前台: dhtmlxgrid.显示数据其格式为: { rows:[ {id:1,data:[1,2,3]} ,{} ]} 如果在postgesql里直接生成这样的串呢?? 这是就今天要做的事. ...
linux系统基本结构-《循序渐进linux》
1.linux控制台 linux系统由桌面控制台(X -Window视窗)和字符控制台组成.字符控制台是linux的核心,默认linux下有6个字符控制台. 字符控制台--〉X-Window下:ctr ...
Sqoop基础学习(1)
1. Sqoop的导入过程在开始导入之前,Sqoop会通过JDBC来获得所需要的数据库元数据 1.导入表的列名.数据类型等: 2.接着这些数据库的数据类型(varchar.number等)会把映射成 ...
uvm_mem——寄存器模型（十二）
看完了寄存器,再来看看存储器: //------------------------------------------------------------------------------ // ...
SQLAlchemy的基本使用
一.介绍 SQLAlchemy是一种ORM(Object-Relational Mapping)框架,用来将关系型数据库映射到对象上.该框架建立在DB API之上,将类和对象转化成SQL,然后使用AP ...
洛谷 P2038 无线网络发射器选址
题目描述随着智能手机的日益普及,人们对无线网的需求日益增大.某城市决定对城市内的公共场所覆盖无线网. 假设该城市的布局为由严格平行的129 条东西向街道和129 条南北向街道所形成的网格状,并且相邻 ...
C基础的练习集及测试答案(16-30)
16.(课堂)输入一个年份(正整数),判断这年是否是闰年.闰年判断标准:年份能被4整除:如若遇到100的倍数,则需判断年份能否被400整除.(逢4一闰,逢百不闰,逢400又闰) #if 0 .(课堂) ...
windows自定义快速启动（运行）命令
自定义运行(windows键+R)里面命令,启动设置的程序,如图: 它的设置方法有两种: 第一种设置方法: 第1步:在任意地方创建一个文件夹(建议在D盘根目录创建),文件夹的名称可自定义没有特殊限制, ...
mac层到ath9k层，ath9k层到硬件层
如上图,整个 mac 层分成两个部分——UMAC 和 LMAC.LMAC 分成 MAC 下半部分和硬件抽象层. 硬件抽象层和ath9k层的连接在hw.h中的函数struct ath_hw_ops() ...

JS实现——用3L和5L量出4L的水

JS实现——用3L和5L量出4L的水的更多相关文章

随机推荐

热门专题