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

随机推荐

快色排序算法(C语言描述)
快速排序算法思想快速排序采用了一种分治策略,学术上称之为分治法(Divide-and-Conquer Method). 哨兵(如下算法中的key) 每趟排序将哨兵插入到数组的合适位置,使得哨兵左侧 ...
如何使用markdown编辑器编写文章
1 设置markdown编辑器为默认编辑器进入我的博客,点击管理点击选项,勾选markdown编辑器即可 2 markdown 语法注意,文章中的# - 1. > 只有在段落开头且符号后需 ...
js中.toString()和String()的一丢丢区别
1..toString()可以将所有的的数据都转换为字符串,但是要排除null 和 undefined 例如将false转为字符串类型 <script> var str = false ...
电话号码马赛克*号 string类扩展
/// <summary> /// 字符串马赛克 /// </summary> /// <param name="source"></pa ...
javaScript的注释、变量和基本数据类型
上一级写了javaScript是用来操作文档对象元素的,这一次带大家看看javaScriput的注释.变量和基本数据类型. 1.注释:注释是什么呢?注释其实就是阻止浏览器解析某一行或者多行代码或描述的 ...
Java和ABAP中的几种引用类型的分析和比较
Java编程语言中几种不同的引用类型是面试时经常容易被问到的问题:强引用,软引用,弱引用,虚引用. 其实除了Java之外,某些其他编程语言也有类似概念,比如ABAP.今天我们就来比较一下. 根据AB ...
UVALive 3523 Knights of the Round Table 圆桌骑士 (无向图点双连通分量)
由于互相憎恨的骑士不能相邻,把可以相邻的骑士连上无向边,会议要求是奇数,问题就是求不在任意一个简单奇圈上的结点个数. 如果不是二分图,一定存在一个奇圈,同一个双连通分量中其它点一定可以加入奇圈.很明显 ...
[CV笔记]图像特征提取三大法宝：HOG特征，LBP特征，Haar特征
(一)HOG特征 1.HOG特征: 方向梯度直方图(Histogram of Oriented Gradient, HOG)特征是一种在计算机视觉和图像处理中用来进行物体检测的特征描述子.它通过计算和 ...
2018.2.12 PHP 如何读取一亿行的大文件
PHP 如何读取一亿行的大文件我们可能在很多场景下需要用 PHP 读取大文件,之后进行处理,如果你没有相关的经验可以看下,希望能给你带来一些启发. 模拟场景我们有一个 1亿行,大小大概为 3G ...
wine卸载
Wine手动卸载,出现殘留,导致安装其他软件也不成功. 错误如下: 正在读取软件包列表... 完成正在分析软件包的依赖关系树正在读取状态信息... 完成您也许需要运行“ap ...

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

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

随机推荐

热门专题