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

随机推荐

SQL server下所有表名及字段名及注释查询
--查询所有表及注释SELECTA.name ,C.valueFROM sys.tables A LEFT JOIN sys.extended_properties C ON C.major_id = ...
JAVA分包下项目部分代码存储
一.注册时姓名去重和符合汉字格式: // 新用户申请加入 public void NewHuman() { System.out.println("========新会员申请加入页面==== ...
Java并发(一):基础概念
对于Java并发,我也是属初学阶段,用的参考书是:"Java并发编程实战",写博时也参考了很多类似主题的博客,博主意在记录自己的学习路程,供网友讨论学习之用; 周末写的差不多了,今 ...
dubbo工作原理(3)
dubbo主要核心部件 Remoting:网络通信框架,实现了sync-over-async和request-response消息机制. RPC:一个远程过程调用的抽象,支持负载均衡.容灾和集群功能. ...
AngularJS（四）：控制器、事件
本文也同步发表在我的公众号“我的天空” 控制器控制器可以说是AngularJS中最重要的部分了!之前的一些示例,除了第一讲的示例以外,我们对于AngularJS的使用都集中在HTML部分,其实Ang ...
cf519D. A and B and Interesting Substrings(前缀和)
题意给出$26$个字母对应的权值和一个字符串问满足以下条件的子串有多少首尾字母相同中间字母权值相加为0 Sol 我们要找到区间满足$sum[i] - sum[j] = 0$ $sum[i] = ...
Android 使用NestedScrollView+ViewPager+RecyclerView+SmartRefreshLayout打造酷炫下拉视差效果并解决各种滑动冲突
如果你还在为处理滑动冲突而发愁,那么你需要静下心来看看这边文章,如果你能彻底理解这篇文章中使用的技术,那么,一切滑动冲突的问题解决起来就轻而易举了: 先扔一个最终实现的效果图先分析下效果图中实现的功 ...
npm使用快速的安装源(nrm)
安装 npm install nrm --global 使用 nrm ls 切换安装源 nrm use taobao 测速 nrm test npm 参考地址:http://codingdict.co ...
js操作文档对象的节点
好吧,为了能让大家不至于睡着,我们先回顾先前面的东东吧~ 1.首先我们写了javaScriput的是一门弱类型的解释性的脚本语言:弱类型:我们的变量不用申明其具体的数据类型,在使用的时候浏览器根据其存 ...
codevs 4093 EZ的间谍网络
时间限制: 10 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题目描述 Description 由于外国间谍的大量渗入,学校安全正处于高度的危机之中.YJY决定挺身而作出反抗 ...

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

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

随机推荐

热门专题