把以下代码保存成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. swift 基础-1

    一.常量与变量 var testVariable = 42         testVariable = 50         println(testVariable)                ...

  2. 1979 第K个数

    1979 第K个数 时间限制: 1 s 空间限制: 1000 KB 题目等级 : 黄金 Gold         题目描述 Description 给定一个长度为N(0<n<=10000) ...

  3. JavaScript中var a=b=c=d的发现

    看了别人的博客随手记录下 先看一下以下的代码 var a=1,b=2,c=3; (function(){ var a=b=1; })(); console.log(a); console.log(b) ...

  4. 帝国empirecms后台登陆次数限制修改

    打开文件:\e\config\config.php, 找到 'loginnum'=>5, 把5改为自己想要的数字即可

  5. arcgis jsapi接口入门系列（0）：总览

    开发环境: arcgis jsapi版本4.9 由于我们这套代码是基于vue,webpack开发的,会有少数vue代码,但总体不影响 里面还有些我们公司的js库和html css,给出的代码不能百分百 ...

  6. PADS 9.5封装向导 多一个管脚

    使用PADS 9.5封装向导(Decal Wizard)建立封装(Decals) 时遇到封装的中间多了一个管脚,如图红圈位置,通过一番搜寻,才知道这是热焊盘,不需要就在右边的红圈处去掉勾选热焊盘即可.

  7. Azure 镜像市场支持一键部署到云

    本视频教程介绍了Azure 镜像市场和一键部署到云. Azure 镜像市场(AMP)由世纪互联运营,是一个联机应用程序和服务市场,它通过独立软件服务商(ISV)能够成为 Azure 客户(Custom ...

  8. BZOJ 2539: [Ctsc2000]丘比特的烦恼

    Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 695  Solved: 260[Submit][Status][Discuss] Description ...

  9. 爬去豆瓣图书top250数据存储到csv中

    from lxml import etree import requests import csv fp=open('C://Users/Administrator/Desktop/lianxi/do ...

  10. Android（java）学习笔记109：Java中输入和输出流概念

     程序在内存中运行,文件在磁盘上,把文件从磁盘上读入内存中来,当然是输入流了,   反之,把内存中的数据写到磁盘上的文件里面去就是输出.通常都是这样的,用了过滤流的情况复杂一些,则另当别论.